Comment faire en sorte que ConstraintLayout fonctionne avec des valeurs en pourcentage?
Avec un aperçu 1 de Android Studio 2.2, Google a publié une nouvelle présentation dans sa bibliothèque de prise en charge: 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. créer une vue prendre 40% d'un écran, créer une marge de 20% entre les vues, définir la largeur d'une vue sur 50% de la largeur d'une autre vue?
Vous pouvez actuellement le faire de plusieurs manières.
L'une consiste à créer des repères (cliquez avec le bouton droit de la souris sur la zone de conception, puis cliquez sur ajouter un repère vertical/horizontal). Vous pouvez ensuite cliquer sur "l'en-tête" du guide pour modifier le positionnement afin qu'il soit basé sur un pourcentage. Enfin, vous pouvez limiter les vues aux directives.
Une autre méthode consiste à positionner une vue à l'aide d'un biais (pourcentage), puis d'ancrer d'autres vues à cette vue.
Cela dit, nous avons réfléchi à la manière d’offrir des dimensions en 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.
Utilisation: une ligne directrice avec app:layout_constraintGuide_percent comme ceci:
<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"/>
Et vous pouvez ensuite utiliser cette directive comme points d'ancrage pour d'autres vues.
A partir de "ConstraintLayout1.1.0-beta1", vous pouvez utiliser un 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 ceci et de consignes en pourcentage vous permet de créer la mise en page de votre choix.
Avec la nouvelle version de ConstraintLayout v1.1, vous pouvez maintenant 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 est un peu incertaine sur la façon d'utiliser les lignes directrices 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 ("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 de conduite pour en faire un pourcentage du parent (en utilisant match_constraint sur la vue).
La directive est inestimable - et l'application: layout_constraintGuide_percent est un excellent ami ... Cependant, nous voulons parfois des pourcentages sans directives. Il est maintenant possible d'utiliser poids:
Android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
Voici un exemple plus complet qui utilise une ligne directrice avec plus de poids:
<?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_percent ou layout_constraintHeight_percent sur une valeur comprise entre 0 et 1, comme suit:
<!-- 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.)
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 utiliser app:layout_constraintVertical_weight le même que layout_weight dans linearlayout
<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 ceux qui pourraient être utiles, vous pouvez utiliser layout_constraintDimensionRatio dans n'importe quelle vue enfant à l'intérieur d'une ConstraintLayout et vous pouvez définir la hauteur ou la largeur d'un rapport de l'autre dimension (au moins une doit être 0dp 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 hauteur/largeur est de 16: 9 app:layout_constraintDimensionRatio="16:9" vous pouvez trouver plus d’informations ICI
Il suffit simplement de remplacer, dans votre balise de repère
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 lignes de repère, la valeur déplacée apparaîtra maintenant sous% age.
Je sais que ce n’est pas directement ce que l’OP demandait à l’origine, mais cela m’a beaucoup aidé dans cette situation lorsque j’avais une question similaire. Ajouter ceci aux personnes cherchant à modifier la taille de la fenêtre de présentation (que j’utilise régulièrement), via le code . 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));