ConstraintLayout previous articles about ConstraintLayout explain its various attributes, how to achieve the effect of the properties are not clear, just say what the role of the properties directly, so goal-oriented, to see how this control shows its powerful function!

instructions

  • Some effects can be fully nested, but cannot be implemented with just one level of controls, so they can be used more oftenConstraintLayoutFor view-level optimizations, it’s best to start directly with themConstraintLayoutNo more pushing back
  • The horizontal direction is used as an example. The vertical direction is self-explanatory
  • Focus on key attributes (lines in code blocks can’t be marked in red, so it’s up to savvy)
  • I will not specify individual attributes

In the middle of his father

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
Copy the code

Relative brothers in the middle

A is horizontally centered with respect to B, so it has to be A flat sibling view, so essentially the center line is aligned with the center line

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="@+id/right"
        app:layout_constraintBottom_toBottomOf="@+id/right"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
Copy the code

Align the center line with the center line

The center line of A is aligned with the center line of B, regardless of the size of AB

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/right"
        app:layout_constraintBottom_toBottomOf="@+id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

Align the center line with the edges

The center line of A is aligned with the top line of B

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/right"
        app:layout_constraintBottom_toTopOf="@+id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

Align the edges with the center line

When the top of A is aligned with the middle line of B (sometimes not easily reversed due to anchor points) we need an auxiliary View, but it is notandroid.support.constraint.GuidelineseeThis article 

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="# 333"
        android:textSize="23sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/middle"/>

    <View
        android:id="@+id/middle"
        android:layout_width="match_parent"
        android:layout_height="0.5 dp"
        app:layout_constraintRight_toRightOf="@id/right"
        android:visibility="invisible"
        app:layout_constraintTop_toTopOf="@id/right"
        app:layout_constraintBottom_toBottomOf="@id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

Edge of

The right side of A is aligned 30% of the overall width of B, regardless of the width of A and B

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View
        android:id="@+id/percent_30"
        android:layout_width="0.5 dp"
        android:layout_height="match_parent"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="@id/right"
        app:layout_constraintRight_toRightOf="@id/right"
        app:layout_constraintHorizontal_bias="0.3"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

Overall proportion

The overall width of A is 30% of the overall width of B

    <TextView
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/right"
        app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View
        android:id="@+id/percent_30"
        android:layout_width="0.5 dp"
        android:layout_height="match_parent"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="@id/right"
        app:layout_constraintRight_toRightOf="@id/right"
        app:layout_constraintHorizontal_bias="0.3"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

Overall midline proportion

A as A whole will always be 30% of the width of B as A whole, no matter how the width of A changes, i.e., the middle line of A is aligned 30% of the level of B. Right

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/percent_30"
        app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View
        android:id="@+id/percent_30"
        android:layout_width="0.5 dp"
        android:layout_height="match_parent"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="@id/right"
        app:layout_constraintRight_toRightOf="@id/right"
        app:layout_constraintHorizontal_bias="0.3"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

Follow disappear

B set to Gone, A with B are Gone. At this moment need auxiliary control android support. The constraint. The Group, at the same time, it is not directly manipulate B, and the operation Group; Bind two controls with a Group and set the Group to disappear together

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="left,right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
Copy the code

The code is set to

view.findViewById(R.id.group).setVisibility(View.GONE);
Copy the code

Divide the view

The size is equally divided

    <TextView
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/middle"/>

    <TextView
        android:id="@+id/middle"
        android:layout_width="0dp"
        android:layout_height="60dp"
        tools:text="C"
        android:textColor="# 999"
        android:textSize="20sp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left"
        app:layout_constraintRight_toLeftOf="@id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="BBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/middle"
        app:layout_constraintRight_toRightOf="parent"/>
Copy the code

View spacing is evenly divided

The size is not fixed, adjacent interval evenly divided

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/middle"/>

    <TextView
        android:id="@+id/middle"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        tools:text="C"
        android:textColor="# 999"
        android:textSize="20sp"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left"
        app:layout_constraintRight_toLeftOf="@id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/middle"
        app:layout_constraintRight_toRightOf="parent"/>
Copy the code

Close together, overall center

AB is close, of varying width, but centered as a whole

Use this effect onlyLinearLayoutSimplest, the following is an example of three views centered relative to their parent :(can also become relatively flat and other views centered)

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/middle"
        app:layout_constraintHorizontal_chainStyle="packed"/>

    <TextView
        android:id="@+id/middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="CCC"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left"
        app:layout_constraintRight_toLeftOf="@+id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/middle"/>
Copy the code

Close together, edges centered

AB is close to each other, with varying widths, but adjacent edges are centered. For example, other views are centered relative to their fatherandroid.support.constraint.Guideline)

@+id/back_ground is a horizontal view identified by a special background color. So the question is: how do you do that if you have three views?

    <View
        android:id="@+id/back_ground"
        android:layout_width="350dp"
        android:layout_height="60dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#E6E4E4"/>

    <View
        android:id="@+id/middle"
        android:layout_width="0.5 dp"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="@+id/back_ground"
        app:layout_constraintRight_toRightOf="@+id/back_ground"/>

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAA"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="@+id/back_ground"
        app:layout_constraintBottom_toBottomOf="@+id/back_ground"
        app:layout_constraintRight_toLeftOf="@+id/middle"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="@+id/back_ground"
        app:layout_constraintBottom_toBottomOf="@+id/back_ground"
        app:layout_constraintLeft_toRightOf="@+id/middle"/>
Copy the code

Hold tight to reach maximum width before sliding

A very useful effect: for example, the vertical LinearLayout begins to increase when the content increases in height, but the height does not increase beyond a specified value (70dp) and the overall content starts to slide. We’re definitely going to use a ScrollView

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constrainedHeight="true"
        app:layout_constraintHeight_max="70dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            
        </LinearLayout>

    </ScrollView>
Copy the code

Close, dynamic maximum width

This effect can only be implemented for ConstraintLayout!

Once B reaches the edge of A, the width can no longer grow, that is, A has the maximum width, but it is determined by B. That is:

This used to be impossible for any control to implement as a property declaration, except in code. Now that you interpret aintLayout, you don’t have to write code at all. It’s time to show the power of ConstraintLayout, complete the code

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

    <TextView
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAAAAADDDDDDD"
        android:textColor="# 333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/right"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintHorizontal_bias="0"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBB"
        android:textColor="# 999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Copy the code