web-dev-qa-db-fra.com

pourcentage de marge avec constraintlayout?

J'apprends à utiliser ConstraintLayout et j'ai trouvé quelques bons tutoriels pour afficher les vues en largeur et en hauteur en pourcentage. Je sais que je peux probablement ajouter une vue vide pour "créer" une marge, mais cela ne semble pas correct. Existe-t-il un moyen de faire des choses comme marginEnd='10%'?

androidandroid-constraintlayout
6
user1865027

Il existe deux façons d’ajouter un pourcentage de marge à l’aide de ConstraintLayout.

Directive n ° 1

Ajoutez simplement vertical guideline à votre présentation et à la vue des contraintes:

<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">

    <View
        Android:id="@+id/view"
        Android:layout_width="0dp"
        Android:layout_height="50dp"
        Android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Android.support.constraint.Guideline
        Android:id="@+id/guideline"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:layout_constraintGuide_percent="0.9" />

</Android.support.constraint.ConstraintLayout>

# 2 Poids de contrainte

Ajoutez un espace, placez-le à l'extrême gauche du parent, regroupez votre vue et l'espace dans "étalez" la chaîne et définissez app:layout_constraintHorizontal_weight="90" sur votre vue et app:layout_constraintHorizontal_weight="10" sur espace. Cela fonctionne très semblable au poids de LinearLayout.

<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">

    <View
        Android:id="@+id/view"
        Android:layout_width="0dp"
        Android:layout_height="50dp"
        Android:background="@color/colorAccent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="90"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/space"
        app:layout_constraintBottom_toBottomOf="parent" />

    <Space
        Android:id="@+id/space"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        app:layout_constraintHorizontal_weight="10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</Android.support.constraint.ConstraintLayout>

En conséquence, votre vue a une marge de fin avec une valeur de 10% de la largeur du parent:

 Result view

14
Eugene Brusov

Astuce n ° 3:

pour le pourcentage des deux côtés

 app:layout_constraintWidth_percent=".80"
2
amorenew

Vous voudrez peut-être des contraintes imbriquées avec 

app:layout_constraintWidth_percent="0.9"
    app:layout_constraintHorizontal_bias="0.25"

 screenshot without bias Exemple XML sans biais:

<?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">

    <Android.support.constraint.ConstraintLayout
        Android:layout_width="0dp"
        Android:layout_height="50dp"
        Android:orientation="vertical"
        Android:focusable="true"
        Android:focusableInTouchMode="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintWidth_percent="0.9">
        <View
            Android:id="@+id/view"
            Android:layout_width="0dp"
            Android:layout_height="0dp"
            Android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"/>
        </Android.support.constraint.ConstraintLayout>

</Android.support.constraint.ConstraintLayout>

 screenshot with bias

Exemple Xml avec biais 

<?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">

    <Android.support.constraint.ConstraintLayout
        Android:layout_width="0dp"
        Android:layout_height="50dp"
        Android:orientation="vertical"
        Android:focusable="true"
        Android:focusableInTouchMode="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_percent="0.9"
        app:layout_constraintHorizontal_bias="0.25">
        <View
            Android:id="@+id/view"
            Android:layout_width="0dp"
            Android:layout_height="0dp"
            Android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"/>
        </Android.support.constraint.ConstraintLayout>

</Android.support.constraint.ConstraintLayout>
1
CrandellWS