How chain margins work in ConstraintLayout 1.1.0 (beta)

Question

How chain margins work in ConstraintLayout 1.1.0 (beta)

I had several of my layouts that exploded from the moment I switched to ConstraintLayout version 1.1.0-beta4. Before making any changes, I want to better understand how fields work in chains ConstraintLayout. Below I compare the layout in ConstraintLayoutversion 1.0.2 with version 1.1.0-beta4, but I believe that the problem arose for the first time in version 1.1.0-beta2.

My goal is for some textual representations to stretch across the screen with gaps between the 1st and 2nd textual representations and the 2nd and 3rd textual representations. The background should be displayed in these fields. To do this, I create a horizontal chain and set the end edge from the left text view to the center text view and the end edge from the text view in the right text view. Horizontal chain style spread_inside.

Example 1 - Using ConstraintLayout version 1.0.2

This is how things look in version 1.0.2 and what I expect.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/tvLeft"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="Text1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvCenter"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/tvCenter"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="Text2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvRight"
        app:layout_constraintStart_toEndOf="@+id/tvLeft"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/tvRight"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="Text3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/tvCenter"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>

Example 2 - Using ConstraintLayout version 1.1.0-beta4

The same layout is as follows in version 1.1.0-beta4 ConstraintLayout. Please note that the fields have disappeared. I expect this to look the same as in example 1, but it is not.

3 - ConstraintLayout 1.1.0-beta4

8dp (tvRight), , .

, , . "48dp", , 48dp, .

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_light">

<!-- TextViews tvLeft & tvRight not shown but are the same as above.-->

<TextView
    android:id="@+id/tvRight"
    android:layout_width="0dp"
    android:layout_height="35dp"
    android:layout_marginStart="48dp"
    android:background="@android:color/white"
    android:gravity="center"
    android:text="Text3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/tvCenter"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>

, : " ?" ConstraintLayout, spread_inside? , - ? , .

+6

android android-layout android-constraintlayout

Cheticamp 21 . '17 19:18

3

., ConstraintLayout. ConstraintLayout 1.1.0-beta4.

(android:layout_marginStart) . , . , .
(android:layout_marginEnd) , , . , , .
, .

"A", "D" ang "G" . "C", "F" "I" .

: `packed`

"", , . , . match_constraints, .

, match_constraints, - , .

, , , , Android Studio :

: `spread`

"spread" , . match_constraints, .

: `spread_inside`

spread_inside , . , . spread.

. "F" "I" 8dp, 16dp. "G", "H" "I" , .

XML .

, : , match_constraints, .

. android:layout_marginTop android:layout_marginStart android:layout_marginBottom android:layout_marginEnd.

<android.support.constraint.ConstraintLayout 
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/heading1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="packed, match_constraints"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/textA"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="A"
        android:textColor="@android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/textB"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading1"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#ff00cc"
        app:layout_constraintEnd_toStartOf="@id/textB"
        app:layout_constraintTop_toTopOf="@id/textB" />

    <TextView
        android:id="@+id/textB"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="B"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/textC"
        app:layout_constraintStart_toEndOf="@+id/textA"
        app:layout_constraintTop_toTopOf="@+id/textA"
        tools:ignore="HardcodedText" />

    <View
        android:id="@+id/view16dpOnC"
        android:layout_width="16dp"
        android:layout_height="35dp"
        android:background="#fffb00"
        app:layout_constraintEnd_toStartOf="@id/textC"
        app:layout_constraintTop_toTopOf="@+id/textC" />

    <TextView
        android:id="@+id/textC"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="16dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="C"
        android:textColor="@android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textB"
        app:layout_constraintTop_toTopOf="@+id/textA"
        tools:ignore="HardcodedText" />

    <TextView
        android:id="@+id/heading2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="spread, match_constraints"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textA"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="16dp"
        android:layout_height="35dp"
        android:background="#00ff19"
        app:layout_constraintEnd_toStartOf="@id/textD"
        app:layout_constraintTop_toTopOf="@id/textD" />

    <TextView
        android:id="@+id/textD"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="D"
        android:textColor="@android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/textE"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading2"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="16dp"
        android:layout_height="35dp"
        android:background="#fffb00"
        app:layout_constraintEnd_toStartOf="@id/textE"
        app:layout_constraintTop_toTopOf="@id/textE" />

    <TextView
        android:id="@+id/textE"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="16dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="E"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/textF"
        app:layout_constraintStart_toEndOf="@+id/textD"
        app:layout_constraintTop_toTopOf="@+id/textD"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#003cff"
        app:layout_constraintStart_toEndOf="@id/textE"
        app:layout_constraintTop_toTopOf="@+id/textE" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#ff00cc"
        app:layout_constraintEnd_toStartOf="@id/textF"
        app:layout_constraintTop_toTopOf="@id/textF" />

    <TextView
        android:id="@+id/textF"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="F"
        android:textColor="@android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textE"
        app:layout_constraintTop_toTopOf="@+id/textD"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="16dp"
        android:layout_height="35dp"
        android:background="#00ff19"
        app:layout_constraintStart_toEndOf="@id/textF"
        app:layout_constraintTop_toTopOf="@id/textF" />

    <TextView
        android:id="@+id/heading3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="spread_inside, match_constraints"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textSize="16sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textD"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#003cff"
        app:layout_constraintEnd_toStartOf="@id/textG"
        app:layout_constraintTop_toTopOf="@+id/textG" />

    <TextView
        android:id="@+id/textG"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="G"
        android:textColor="@android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/textH"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading3"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="16dp"
        android:layout_height="35dp"
        android:background="#fffb00"
        app:layout_constraintEnd_toStartOf="@id/textH"
        app:layout_constraintTop_toTopOf="@id/textH" />

    <TextView
        android:id="@+id/textH"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="16dp"
        android:background="@android:color/darker_gray"
        android:gravity="center"
        android:text="H"
        android:textColor="@android:color/white"
        app:layout_constraintEnd_toStartOf="@+id/textI"
        app:layout_constraintStart_toEndOf="@+id/textG"
        app:layout_constraintTop_toTopOf="@+id/textG"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#003cff"
        app:layout_constraintStart_toEndOf="@id/textH"
        app:layout_constraintTop_toTopOf="@id/textH" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#ff00cc"
        app:layout_constraintEnd_toStartOf="@id/textI"
        app:layout_constraintTop_toTopOf="@id/textI" />

    <TextView
        android:id="@+id/textI"
        android:layout_width="0dp"
        android:layout_height="35dp"
        android:layout_marginStart="8dp"
        android:background="@android:color/white"
        android:gravity="center"
        android:text="I"
        android:textColor="@android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textH"
        app:layout_constraintTop_toTopOf="@+id/textG"
        tools:ignore="HardcodedText" />

    <View
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:background="#ff00cc"
        android:visibility="gone"
        app:layout_constraintEnd_toStartOf="@id/textC"
        app:layout_constraintTop_toTopOf="@id/textC" />

    <View
        android:id="@+id/view8dp"
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:layout_marginStart="24dp"
        android:background="#ff00cc"
        app:layout_constraintBottom_toTopOf="@id/view8dpGap"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textG"
        app:layout_constraintVertical_bias="0.100000024"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/text8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="8dp start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view8dp"
        app:layout_constraintStart_toEndOf="@id/view8dp"
        app:layout_constraintTop_toTopOf="@+id/view8dp"
        tools:ignore="HardcodedText" />

    <View
        android:id="@+id/view8dpGap"
        android:layout_width="8dp"
        android:layout_height="35dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:background="#003cff"
        app:layout_constraintBottom_toTopOf="@+id/view16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="8dp gap not defined by start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view8dpGap"
        app:layout_constraintStart_toEndOf="@+id/view8dpGap"
        app:layout_constraintTop_toTopOf="@+id/view8dpGap"
        tools:ignore="HardcodedText" />

    <View
        android:id="@+id/view16dp"
        android:layout_width="17dp"
        android:layout_height="35dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:background="#fffb00"
        app:layout_constraintBottom_toTopOf="@+id/view16dpGap"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8dpGap" />

    <TextView
        android:id="@+id/text16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="16dp start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view16dp"
        app:layout_constraintStart_toEndOf="@+id/view16dp"
        app:layout_constraintTop_toTopOf="@+id/view16dp"
        tools:ignore="HardcodedText" />

    <View
        android:id="@+id/view16dpGap"
        android:layout_width="17dp"
        android:layout_height="35dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:background="#00ff19"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view16dp" />

    <TextView
        android:id="@+id/text16dpGap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="16dp gap not defined by start margin"
        app:layout_constraintBottom_toBottomOf="@+id/view16dpGap"
        app:layout_constraintStart_toEndOf="@+id/view16dpGap"
        app:layout_constraintTop_toTopOf="@+id/view16dpGap"
        tools:ignore="HardcodedText" />

</android.support.constraint.ConstraintLayout>

+2

Cheticamp 11 . '18 15:10

constraintLayout ,

1.Spread: . . : layout_constraintHorizontal_chainStyle = "" : layout_constraintVertical_chainStyle = ""

2. : , . . : layout_constraintHorizontal_chainStyle = "spread_inside" : layout_constraintVertical_chainStyle = "spread_inside"

3.Packed: ( ). (/ /), . . : layout_constraintHorizontal_chainStyle = "" : layout_constraintVertical_chainStyle = ""

4.Weighted:. , , " " (0dp). , " ", , thelayout_constraintHorizontal_weight layout_constraintVertical_weight. layout_weight , . , ; , , .

-2

Android Team Dec 22 '17 at 7:42

source share

Ben P. · Accepted Answer · 2018-01-04T20:42:43+0000

, . API ConstraintLayout

, ( )

. , View A end View B start, View B start View A end.

View A , B . , , (View A 8dp View B, View B 0dp View A). , ConstraintLayout () , () , .

, ConstraintLayout:

1.0.2

. ( ) . -, , . -, , (, 8dp 8dp- ).

1.1.0-beta4

. , . -, , , *. -, **.

*: , 1.1.0-beta4 , , . , .

**: , , "" . A B , , B C.

< > :

, , , . .

<android.support.constraint.ConstraintLayout>

    <TextView
        android:layout_marginEnd="8dp"/>

    <TextView
        android:layout_marginStart="8dp"/>

    <TextView/>

</android.support.constraint.ConstraintLayout>

v1.0.2:

v1.1.0-beta4:

. , , , , , .

How chain margins work in ConstraintLayout 1.1.0 (beta)

1.0.2

1.1.0-beta4

: packed

: spread

: spread_inside

More articles:

: `packed`

: `spread`

: `spread_inside`