web-dev-qa-db-fra.com

ContrainteLayout Marges

J'ai une mise en page simple.

<?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="wrap_content"
    Android:background="@color/colorDarkGray">


    <RelativeLayout
        Android:id="@+id/container3"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="8dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_centerVertical="true"
            Android:alpha="0.7"
            Android:fontFamily="sans-serif"
            Android:letterSpacing="0.03"
            Android:text="Another text"
            Android:textColor="@color/colorWhite"
            Android:textSize="11sp"
            Android:textStyle="normal" />

        <TextView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentRight="true"
            Android:layout_centerVertical="true"
            Android:fontFamily="sans-serif"
            Android:letterSpacing="0.03"
            Android:text="Some text"
            Android:textColor="@color/colorWhite"
            Android:textSize="11sp"
            Android:textStyle="normal" />
    </RelativeLayout>
</Android.support.constraint.ConstraintLayout>

En mode conception, il semble si  looks so Comme vous pouvez le constater, il n'y a pas de marges gauche et droite. Les marges supérieure et inférieure fonctionnent bien. Si je supprime la marge gauche ou droite, ma disposition relative se déplace légèrement au-delà de l'écran ..__ Je suppose que je peux le faire sans aucune disposition relative, MAIS je suis intéressé par la raison.

androidandroid-constraintlayout
7
TooLazy

Essayez de changer votre RelativeLayout width enAndroid:layout_width="0dp"

<?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="wrap_content"
    Android:background="@color/colorDarkGray">


    <RelativeLayout
        Android:id="@+id/container3"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_marginBottom="8dp"
        Android:layout_marginStart="8dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginEnd="8dp"
        Android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_centerVertical="true"
            Android:alpha="0.7"
            Android:fontFamily="sans-serif"
            Android:letterSpacing="0.03"
            Android:text="Another text"
            Android:textColor="@color/colorWhite"
            Android:textSize="11sp"
            Android:textStyle="normal" />

        <TextView
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentRight="true"
            Android:layout_centerVertical="true"
            Android:fontFamily="sans-serif"
            Android:letterSpacing="0.03"
            Android:text="Some text"
            Android:textColor="@color/colorWhite"
            Android:textSize="11sp"
            Android:textStyle="normal" />
    </RelativeLayout>
</Android.support.constraint.ConstraintLayout>
0
Ratilal Chopda

Vous devez éviter d'utiliser des vues imbriquées dans ConstraintLayout. Les raisons sont:

La source de mise en page de résultat devrait ressembler à:

<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="wrap_content"
    Android:background="@color/colorDarkGray">

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_centerVertical="true"
        Android:alpha="0.7"
        Android:fontFamily="sans-serif"
        Android:letterSpacing="0.03"
        Android:text="Another text"
        Android:textColor="@color/colorWhite"
        Android:textSize="11sp"
        Android:textStyle="normal"
        Android:id="@+id/textView"
        Android:layout_marginTop="8dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/textView2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread" />

    <TextView
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_centerVertical="true"
        Android:gravity="end"
        Android:fontFamily="sans-serif"
        Android:letterSpacing="0.03"
        Android:text="Some text"
        Android:textColor="@color/colorWhite"
        Android:textSize="11sp"
        Android:textStyle="normal"
        Android:id="@+id/textView2"
        Android:layout_marginTop="8dp"
        Android:layout_marginLeft="8dp"
        Android:layout_marginRight="8dp"
        Android:layout_marginBottom="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</Android.support.constraint.ConstraintLayout>

 Result view

Vous pouvez apprendre à créer des modèles avec ConstraintLayouts en suivant les étapes décrites dans Codelab de Google .

8
Eugene Brusov

Oui, bien sûr, il n'y a pas de marges gauche et droite dans votre mise en page lorsque vous définissez votre RelativeLayout comme ci-dessous:

<RelativeLayout
    Android:id="@+id/container3"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginBottom="8dp"
    Android:layout_marginStart="8dp"
    Android:layout_marginLeft="8dp"
    Android:layout_marginRight="8dp"
    Android:layout_marginEnd="8dp"
    Android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"

Cela signifie que RelativeLayout a wrap_content width et height et qu'il est au centre de Parent (avec notre constraintTop, Bot ....). 

Comment le résoudre? Il suffit de définir la width de votre disposition relative sur 0dp. Selon constraints, cela signifie que votre RelativeLayout sera aussi large que le parent.

0
Kingfisher Phuoc