Difficulty analysis of constraintlayout

Time:2022-5-3
WRAP_CONTENT

We know that this attribute in other views means the package content, which is its own size. The maximum size will not exceed the size of the screen.

image.png

The general meaning is that this attribute is added in version 1.1. If wrap is set before version 1.1_ Content, the constraint will not limit the size of the result, that is, the size does not play any role. Let’s take a look at an example

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="@color/color_ffffff"
    android:orientation="vertical"
    android:paddingTop="40dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:text="ahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahahah"
        android:textColor="@color/color_000000"
        android:textSize="20dp"
        app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Take a look at the preview results

image.png

It is found that the text is not fully displayed. If other viewgroups are used, they can certainly display the full text. Then how to solve this problem at this time?
You can set one of these two properties to constrain the width or height, so there is no problem,

app:layout_constrainedWidth=”true|false”
app:layout_constrainedHeight=”true|false”
MATCH_CONSTRAINT(0dp)
When a dimension is set to MATCH_CONSTRAINT, the default behavior is to have the resulting size take all the available space. Several additional modifiers are available

Dimension match of width and height in constrained layout_ Parent is replaced by 0dp, and the size generated by default accounts for all available space. The following attributes can be used:

  • layout_ constraintWidth_ min and layout_ constraintHeight_ Min / / set the minimum size
  • layout_ constraintWidth_ max and layout_ constraintHeight_ Max / / set the maximum size
  • layout_ constraintWidth_ percent and layout_ constraintHeight_ Percent / / sets the percentage relative to the parent class
    There is a requirement in the development that it is located in the middle of the parent control and the width is half of the parent control, so we can implement it as follows:
    image.png
Ratio

If you want to determine the ratio of one side of a control to the other, you can use

layout_constraintDimensionRatio

Property, but at least one side must be set to match_ CONSTRAINT(0dp),layout_ Constraintdimensionratio indicates the ratio of width to height, which is always the ratio of width to height. If width is set to match_ Constraint indicates that the width needs to be constrained. In this case, the width is calculated by height, and the width is calculated according to the aspect ratio. Conversely, if it is high, it is set to match_ Constraint indicates that the height needs to be constrained, which is calculated by the width. Remember that it is always the aspect ratio, but which one is used to calculate which one, and what is constrained is always calculated.

Chain style

Join us now to achieve the following effects

image.png

Layout nesting is required for both linealayout and relativelayout. In this case, the chain of constraintlayout can be used:
Let’s take a look at the explanation of the chain in the official document:

A chain is a group of views that are linked to each other with bi-directional position constraints. The views within a chain can be distributed either vertically or horizontally.

A chain is a group of views, which are connected with each other by two-way constraints. These are distributed in the horizontal or vertical direction of the view in the chain, usually through

//Vertical
layout_constraintVertical_chainStyle
//Horizontal
layout_constraintHorizontal_chainStyle

It is usually set at the head of the chain, that is, the view closest to the left and top of the parent layout. The elements on the chain must be constrained by each other

image.png

Chains can be divided into the following types

Spread

The views in the chain are distributed divergently, which is the default style

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 1"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />

    <Button
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 2"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view1" />

    <Button
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="View 3"
        app:layout_constraintTop_toBottomOf="@id/view2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

The effect picture is:

image.png

Spread inside

Modify app: layout of button in view1_ constraintVertical_ The effect picture is spread style:

image.png

Packed

Modify app: layout of button in view1_ constraintVertical_ Chainstyle is packed, and the effect picture is:

image.png

Finally, let’s take a look at the introduction of this attribute on the official website

image.png