Comment faire fonctionner ConstraintLayout avec des valeurs en pourcentage ?

Question

Avec la Preview 1 d'Android Studio 2.2, Google a publié une nouvelle disposition 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 % de l'é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 ?

Answer 1

Il peut être utile d'avoir une référence rapide ici.
Utilisation : une ligne directrice avec app:layout_constraintGuide_percent comme ça :

<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 pourrez ensuite utiliser ces lignes directrices comme points d'ancrage pour d'autres points de vue.

Answer 2

Vous pouvez actuellement le faire de plusieurs façons. La première consiste à créer des lignes directrices (cliquez avec le bouton droit de la souris sur la zone de conception, puis cliquez sur Ajouter une ligne directrice verticale/horizontale). Vous pouvez ensuite cliquer sur l'"en-tête" de la ligne directrice pour modifier le positionnement en fonction du pourcentage. Enfin, vous pouvez contraindre les vues aux lignes directrices. Une autre méthode consiste à positionner une vue en utilisant un biais (pourcentage) et à ancrer d'autres vues à cette vue.

Cela dit, nous avons réfléchi à la manière de proposer des dimensions en pourcentage. Je ne peux rien promettre, mais c'est quelque chose que nous aimerions ajouter.

Answer 3

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"

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

Answer 4

Avec la nouvelle version de ConstraintLayout v1.1, vous pouvez maintenant faire ce qui suit :

<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 à occuper 20 % de la hauteur de l'écran et 65 % de sa largeur.

Answer 5

Mode d'emploi des directives

La réponse acceptée est un peu floue quant à la manière d'utiliser les directives et à ce qu'est l'"en-tête".

Étapes

Ajoutez d'abord une ligne directrice.

Sélectionnez la ligne de guidage 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 vers le bas jusqu'à 50 % ou ce que vous voulez.

Après cela, vous pouvez contraindre votre vue à la ligne directrice pour qu'elle représente un certain pourcentage du parent (en utilisant la fonction match_constraint sur la vue).