1. Introduction
ConstrainLayout is a layout View, and in the Design library, it has been widely accepted and used by everyone. The layout of ConstrainLayout is different from others. Its method is similar to RelativeLayout, but it is obviously different from RelativeLayout.
When the layout is rendered, the sub-View of ConstrainLayout is fixed by finding its own position in a container, through the position and its method, so it is mentioned in the layout optimization.
2. Alignment of layout
When many friends are using it, they find that ConstrainLayout is not as easy to use as RelativeLayout. Wanting to be in the middle or bottom of the parent control can no longer be done through android:layout_gravity or android:layout_alignParentRight;
<attr name="gravity">
<!-- Push object to the top of its container, not changing its size. -->
<flag name="top" value="0x30" />
<!-- Push object to the bottom of its container, not changing its size. -->
<flag name="bottom" value="0x50" />
<!-- Push object to the left of its container, not changing its size. -->
<flag name="left" value="0x03" />
<!-- Push object to the right of its container, not changing its size. -->
<flag name="right" value="0x05" />
<!-- Place object in the vertical center of its container, not changing its size. -->
<flag name="center_vertical" value="0x10" />
<!-- Grow the vertical size of the object if needed so it completely fills its container. -->
<flag name="fill_vertical" value="0x70" />
<!-- Place object in the horizontal center of its container, not changing its size. -->
<flag name="center_horizontal" value="0x01" />
<!-- Grow the horizontal size of the object if needed so it completely fills its container. -->
<flag name="fill_horizontal" value="0x07" />
<!-- Place the object in the center of its container in both the vertical and horizontal axis, not changing its size. -->
<flag name="center" value="0x11" />
<!-- Grow the horizontal and vertical size of the object if needed so it completely fills its container. -->
<flag name="fill" value="0x77" />
<!-- Additional option that can be set to have the top and/or bottom edges of
the child clipped to its container's bounds.
The clip will be based on the vertical gravity: a top gravity will clip the bottom
edge, a bottom gravity will clip the top edge, and neither will clip both edges. -->
<flag name="clip_vertical" value="0x80" />
<!-- Additional option that can be set to have the left and/or right edges of
the child clipped to its container's bounds.
The clip will be based on the horizontal gravity: a left gravity will clip the right
edge, a right gravity will clip the left edge, and neither will clip both edges. -->
<flag name="clip_horizontal" value="0x08" />
<!-- Push object to the beginning of its container, not changing its size. -->
<flag name="start" value="0x00800003" />
<!-- Push object to the end of its container, not changing its size. -->
<flag name="end" value="0x00800005" />
</attr>Why?
This is because ConstrainLayout no longer uses this set, but traverses the position of the view through a custom position.
Therefore, I have sorted out the commonly used characteristic locations for reference.
The common child View is set at the position of the parent control ConstrainLayout
<?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:layout_width="120dp"
android:layout_height="wrap_content"
android:text="左上角"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="顶部居中"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="右上角"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="左边垂直居中"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="居父控件中间"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="右边垂直居中"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="左边底部垂直居底"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="底部居中"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:layout_width="120dp"
android:layout_height="wrap_content"
android:text="右边底部垂直居底"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>layout xml rendering
Through the above, you can intuitively see how to set View in parentView.
3. Other detailed explanations of its API
to be determined
Four. Summary
In fact, the position is fixed in various ways, and finally the coordinates of the view are fixed in the parent control.