Avec un Preview 1 d'Android 2.2 Studio de Google a publié une nouvelle mise en page dans sa bibliothèque de support: ConstraintLayout. Avec ConstraintLayout, il est plus facile d'utiliser un outil de conception dans Android Studio, mais je n'ai pas trouvé de moyen d'utiliser des tailles relatives (pourcentages ou 'poids' comme dans LinearLayout). Existe-t-il un moyen de définir les contraintes en fonction des pourcentages? Par exemple, faire en sorte qu'une vue occupe 40% d'un écran, créer une marge de 20% entre les vues, définir la largeur d'une vue à 50% de la largeur d'une autre vue?

Vous pouvez actuellement le faire de plusieurs manières.

La première consiste à créer des lignes directrices (cliquez avec le bouton droit sur la zone de conception, puis cliquez sur ajouter des lignes directrices verticales / horizontales). Vous pouvez ensuite cliquer sur "l'en-tête" de la ligne directrice pour modifier le positionnement pour qu'il soit basé sur un pourcentage. Enfin, vous pouvez contraindre les vues aux directives.

Une autre façon consiste à positionner une vue en utilisant le biais (pourcentage), puis à ancrer d'autres vues à cette vue.

Cela dit, nous avons réfléchi à la façon d'offrir des dimensions basées sur un pourcentage. Je ne peux faire aucune promesse mais c'est quelque chose que nous aimerions ajouter.

Il peut être utile d'avoir une référence rapide ici.

Placement des vues

Utilisez une ligne directrice avec app:layout_constraintGuide_percentcomme ceci:

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

Et vous pouvez ensuite utiliser ce guide comme points d'ancrage pour d'autres vues.

ou

Utilisez le biais avec app:layout_constraintHorizontal_biaset / ou app:layout_constraintVertical_biaspour modifier l'emplacement de la vue lorsque l'espace disponible le permet

<Button
    ...
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.25"
    ...
    />

Taille des vues

Une autre valeur en pourcentage est la hauteur et / ou la largeur des éléments, avec app:layout_constraintHeight_percentet / ou app:layout_constraintWidth_percent:

<Button
    ...
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.5"
    ...
    />

Depuis "ConstraintLayout1.1.0-beta1", vous pouvez utiliser le pourcentage pour définir les largeurs et les hauteurs.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

Cela définira la largeur à 40% de la largeur de l'écran. Une combinaison de cela et des directives en pourcentage vous permet de créer n'importe quelle mise en page basée sur le pourcentage que vous souhaitez.

Avec la nouvelle version de ConstraintLayout v1.1, vous pouvez désormais effectuer les opérations suivantes:

<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.65" />

Cela contraindra le bouton à 20% de la hauteur et 65% de la largeur de la vue parent.

Comment utiliser les directives

La réponse acceptée n'est pas claire sur la façon d'utiliser les directives et sur ce qu'est "l'en-tête".

Pas

Ajoutez d'abord une directive.

Sélectionnez la ligne directrice ou déplacez-la un peu pour rendre les contraintes visibles.

Cliquez ensuite sur le cercle rond (l '"en-tête") jusqu'à ce qu'il devienne un pourcentage. Vous pouvez ensuite faire glisser ce pourcentage jusqu'à 50% ou ce que vous voulez.

Après cela, vous pouvez contraindre votre vue à la ligne directrice pour en faire un pourcentage du parent (en utilisant match_constraintla vue).

La directive est inestimable - et l'application: layout_constraintGuide_percent est un grand ami ... Cependant, parfois, nous voulons des pourcentages sans directives. Il est maintenant possible d'utiliser des poids :

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

Voici un exemple plus complet qui utilise une directive avec des poids supplémentaires :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="android.itomerbu.layoutdemo.MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.44"/>

    <Button
        android:id="@+id/btnThird"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/btnThird"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/btnTwoThirds"
        app:layout_constraintHorizontal_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/btnTwoThirds"
        app:layout_constraintBottom_toBottomOf="@+id/btnThird"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
</android.support.constraint.ConstraintLayout>

Avec ConstraintLayout v1.1.2, la dimension doit être définie sur 0dp, puis définissez les attributs layout_constraintWidth_percentou layout_constraintHeight_percentsur une valeur comprise entre 0 et 1, comme:

<!-- 50% width centered Button -->
<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent=".5" />

(Vous n'avez pas besoin de définir app:layout_constraintWidth_default="percent"ou app:layout_constraintHeight_default="percent"avec ConstraintLayout 1.1.2 et les versions suivantes)

Contrainte Layout 1.0 faisant qu'une vue occupe un pourcentage de l'écran requis en faisant deux directives. Dans Constraint Layout 1.1, il a été simplifié en vous permettant de contraindre facilement n'importe quelle vue à un pourcentage de largeur ou de hauteur.

N'est-ce pas fantastique? Toutes les vues prennent en charge les attributs layout_constraintWidth_percent et layout_constraintHeight_percent. Celles-ci entraîneront la fixation de la contrainte à un pourcentage de l'espace disponible. Il est donc possible de créer un bouton ou une extension TextView pour remplir un pourcentage de l'écran avec quelques lignes de XML.

Par exemple, si vous souhaitez définir la largeur du bouton à 70% de l'écran, vous pouvez le faire comme ceci:

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

Veuillez noter que vous devrez mettre la dimension à utiliser en pourcentage à 0dp comme nous l'avons spécifié android: layout_width à 0dp ci-dessus.

De même, si vous souhaitez régler la hauteur du bouton à 20% de l'écran, vous pouvez le faire comme ceci:

<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_constraintHeight_percent="0.2" />

Voir! nous avons spécifié android: layout_height à 0dp cette fois car nous voulons que le bouton utilise la hauteur en pourcentage.

Essayez ce code. Vous pouvez modifier les pourcentages de hauteur et de largeur avec app: layout_constraintHeight_percent et app: layout_constraintWidth_percent.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".4"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Gradle:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

vous pouvez l'utiliser app:layout_constraintVertical_weightcomme layout_weightdanslinearlayout

<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button5"
    app:layout_constraintVertical_weight="1"/>

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/button4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>

REMARQUE: app:layout_constraintVertical_weight( app:layout_constraintHorizontal_weight) fonctionnera avec android:layout_width="0dp"(android:layout_height="0dp"

Pour quelqu'un qui pourrait trouver utile, vous pouvez utiliser layout_constraintDimensionRatioim n'importe quelle vue enfant à l'intérieur d'un ConstraintLayoutet nous pouvons définir la hauteur ou la largeur un rapport de l'autre dimension (au moins un doit être 0dp soit largeur ou hauteur) exemple

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

dans ce cas le rapport d'aspect est de 16: 9 app:layout_constraintDimensionRatio="16:9" vous pouvez trouver plus d'informations ICI

Je sais que ce n'est pas directement ce que OP demandait à l'origine, mais cela m'a beaucoup aidé dans cette situation quand j'avais une question similaire. . Ajoutez ceci à votre onCreate dans l'activité de question. (Le change à 80%)

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

int width = dm.widthPixels;
int height = dm.heightPixels;

getWindow().setLayout((int)(width * 0.8), (int)(height * 0.8));

Remplacez simplement, dans votre balise de ligne directrice

app:layout_constraintGuide_begin="291dp"

avec

app:layout_constraintGuide_percent="0.7"

où 0,7 signifie 70%.

De plus, si vous essayez maintenant de faire glisser les directives, la valeur glissée apparaîtra désormais en% age.

À l'aide des directives, vous pouvez modifier le positionnement pour qu'il soit basé sur un pourcentage

<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>

Vous pouvez également utiliser cette méthode

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"