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.
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
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
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_chainStyleIt 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
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:
Spread inside
Modify app: layout of button in view1_ constraintVertical_ The effect picture is spread style:
Packed
Modify app: layout of button in view1_ constraintVertical_ Chainstyle is packed, and the effect picture is:
Finally, let’s take a look at the introduction of this attribute on the official website
