The original link
Build an adaptive interface using ConstraintLayout
ConstraintLayout lets you create complex, large layouts using flat view hierarchies (no nested view groups). It is similar to RelativeLayout in that all views are laid out according to the relationship between sibling views and parent layouts, but it is more flexible than RelativeLayout and easier to work with Android Studio’s layout editor.
This article shows several uses of constraints.
The constraint
Note the following rules when creating constraints:
- Each view must have at least two constraints: one horizontal and one vertical.
- Constraints can only be created between constraint handles and anchor points that share the same plane. Therefore, the view’s vertical plane (left and right) can only be constrained to another vertical plane; The base line can only be constrained to other base lines.
- Each constraint handle can only be used for one constraint, but you can create multiple constraints (from different views) on the same anchor point.
Gradle introduced
Introducing constraintlayout library
implementation 'androidx. Constraintlayout: constraintlayout: 1.1.3'
Copy the codeConstraintlayout use
In the layout of the android. Support. The constraint. ConstraintLayout, the following example
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="50dp"
app:layout_constraintTop_toTopOf="parent">
<! -- child view layout -->
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the codeCreate a new style in style for later operations
<! -- Con Layout example text -->
<style name="ConSampleText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:padding">4dp</item>
<item name="android:textColor">#fff</item>
<item name="android:background">#3F51B5</item>
</style>
Copy the codeIf no constraint is added to the child view, it will run to the parent constraintlayout at position (0,0)
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#f0f0f0"
app:layout_constraintTop_toTopOf="parent">
<TextView
style="@style/ConSampleText"
android:text="No rule, jump to (0,0)" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the codeAlignment, property description
Attributes such as APP :layout_constraintStart_toStartOf or app:layout_constraintTop_toTopOf are used for positioning.
App :layout_constraintStart_toStartOf, with 2 Start words in it. The first Start indicates its starting position (default is left). The second toStartOf represents the starting position of the aligned reference.
App :layout_constraintTop_toTopOf is similar. Align with top of reference.
Positional terms, such as Top, Bottom, End, and Start, can be used together to determine relative positions: app:layout_constraint{}_to{}Of
Position relative to parent layout
Align the child view to the edges of the parent layout.
The reference object of the constraint is parent.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c2"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_marginTop="20dp"
android:background="#f0f0f0"
app:layout_constraintTop_toBottomOf="@id/c1">
<! -- Edge positioning relative to parent Layout -->
<TextView
style="@style/ConSampleText"
android:text="Center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Top left corner"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Bottom left corner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Bottom right corner"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Upper right corner"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Horizontally centered at the top."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Bottom horizontally centered."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Vertical center on the left."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="Right vertical center."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Baseline alignment
Aligns the text baseline of one view with that of another view.
Baseline alignment can be set using the app:layout_constraintBaseline_toBaselineOf property.
The sample
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c21"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#f0f0f0"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/tv1"
style="@style/ConSampleText"
android:layout_marginStart="10dp"
android:text="an"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv2"
style="@style/ConSampleText"
android:layout_marginStart="10dp"
android:text="Rust"
android:textSize="20sp"
app:layout_constraintBaseline_toBaselineOf="@id/tv1"
app:layout_constraintStart_toEndOf="@+id/tv1" />
<TextView
android:id="@+id/tv3"
style="@style/ConSampleText"
android:layout_marginStart="10dp"
android:text="Fisher"
android:textSize="24sp"
app:layout_constraintBaseline_toBaselineOf="@id/tv1"
app:layout_constraintStart_toEndOf="@+id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the codefigure
Guideline constraint
Add a boot line to ConstraintLayout to make it easy to locate. Other views can use the bootline as a reference location.
To add Guideline, determine the direction of the Guideline, vertical and horizontal.
android:orientation="vertical"android:orientation="horizontal"
Proportion of positioning
To do this scaling, use the app:layout_constraintGuide_percent. You need to specify a percentage value, for example app:layout_constraintGuide_percent=”0.5″.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c3"
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_marginTop="40dp"
android:background="#f0f0f0"
app:layout_constraintTop_toBottomOf="@id/c2">
<! -- Boot line constraint: Scale relative to parent layout -->
<! -- Guideline -->
<androidx.constraintlayout.widget.Guideline
android:id="@+id/g1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.33" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/g2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="@+id/t1"
style="@style/ConSampleText"
android:text="Vertical 1/3 behind the lead line."
app:layout_constraintStart_toStartOf="@id/g1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/t2"
style="@style/ConSampleText"
android:text="Vertical 1/3 in front of the lead wire."
app:layout_constraintEnd_toStartOf="@id/g1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/t3"
style="@style/ConSampleText"
android:layout_marginTop="2dp"
android:text="Vertical 1/3 guide line centered."
app:layout_constraintEnd_toEndOf="@id/g1"
app:layout_constraintStart_toStartOf="@id/g1"
app:layout_constraintTop_toBottomOf="@id/t2" />
<TextView
android:id="@+id/th1"
style="@style/ConSampleText"
android:text="Horizontal 1/2 guide line centered"
app:layout_constraintBottom_toBottomOf="@id/g2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@id/g2" />
<TextView
android:id="@+id/th2"
style="@style/ConSampleText"
android:layout_marginStart="2dp"
android:text="Above the horizontal 1/2 guide line."
app:layout_constraintBottom_toBottomOf="@id/g2"
app:layout_constraintStart_toEndOf="@id/th1" />
<TextView
android:id="@+id/th3"
style="@style/ConSampleText"
android:layout_marginStart="2dp"
android:text="Below the horizontal 1/2 guide line."
app:layout_constraintStart_toEndOf="@id/th1"
app:layout_constraintTop_toBottomOf="@id/g2" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/gv75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/gh75"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.75" />
<TextView
style="@style/ConSampleText"
android:layout_marginStart="2dp"
android:text="(0.75, 0.75)"
app:layout_constraintBottom_toBottomOf="@id/gh75"
app:layout_constraintEnd_toEndOf="@id/gv75"
app:layout_constraintStart_toStartOf="@id/gv75"
app:layout_constraintTop_toTopOf="@id/gh75" />
<TextView
style="@style/ConSampleText"
android:layout_marginStart="2dp"
android:text="(0.33, 0.75)"
app:layout_constraintBottom_toBottomOf="@id/gh75"
app:layout_constraintEnd_toEndOf="@id/g1"
app:layout_constraintStart_toStartOf="@id/g1"
app:layout_constraintTop_toTopOf="@id/gh75" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Specific numerical
We can also specify a value using app:layout_constraintGuide_end or app:layout_constraintGuide_begin.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c4"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="30dp"
android:background="#f0f0f0"
app:layout_constraintTop_toBottomOf="@id/c3">
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="10dp" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_end="10dp" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="10dp" />
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="10dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the codeAs a preview
Barrier constraint
Like a bootstrap, a barrier is a hidden line that you can use to constrain views. Barriers don’t define their position; Instead, the position of the barrier moves with the position of the view it contains. This is useful if you want to restrict views to a set of views rather than a specific view.
Vertical barrier Example
This is an example of a vertical barrier. Barrier1 uses tv221 and tv222 as a reference.
Set app:barrierDirection=”end” and set tv223 to the right of it.
Barrier1 will be pushed by TV221 and TV222.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c22"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_marginTop="10dp"
android:background="#f3f3f3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/c21">
<TextView
android:id="@+id/tv221"
style="@style/ConSampleText"
android:layout_marginStart="10dp"
android:text="an"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv222"
style="@style/ConSampleText"
android:layout_marginTop="4dp"
android:text="RustFisher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv221" />
<TextView
style="@style/ConSampleText"
android:layout_marginTop="4dp"
android:text="No reference, no matter how long this is."
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv222" />
<androidx.constraintlayout.widget.Barrier
android:id="@+id/barrier1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="tv221 ,tv222" />
<TextView
android:id="@+id/tv223"
style="@style/ConSampleText"
android:layout_marginStart="10dp"
android:text=".com"
app:layout_constraintStart_toEndOf="@id/barrier1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Adjustment constraint deviation
When constraints are added to both sides of a view (and the size of the view in the same dimension is “fixed” or “wrap Content”), the view is centered between the two constraints with a default deviation of 50%. You can adjust the bias by setting properties.
app:layout_constraintVertical_biasapp:layout_constraintHorizontal_bias
For example,
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c23"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_marginTop="10dp"
android:background="#f3f3f3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/c22">
<TextView
style="@style/ConSampleText"
android:text="Rust"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="0.33, 0.33,"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.33" />
<TextView
style="@style/ConSampleText"
android:text="0.8, 0.8,"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Resize the view
Here we’re adjusting the size of the child view.
Match Constraints views are extended as far as possible to satisfy Constraints on each side (after considering the margins of the view). However, you can modify this behavior with the following properties and values (these properties only take effect if you set the view width to “match constraints”) :
layout_constraintWidth_default
-
Spread: Expand the view as far as possible to satisfy constraints on each side. This is the default behavior.
-
Wrap: Only expand the view to fit its contents as needed, but the view can still be smaller than its contents if constrained. So, the difference between this and using Wrap Content (above) is that setting the width to Wrap Content forces the width to always match the Content width exactly; With Match Constraints set to wrap with layout_constraintWidth_default, the view can be smaller than the content width.
-
Layout_constraintWidth_min The minimum width of this view uses the DP dimension.
-
Layout_constraintWidth_max The maximum width of the view uses the DP dimension.
Set Android :layout_width=”0dp” and Android :layout_height=” 0DP “. Identify the surrounding reference lines.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/c24"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="20dp"
android:background="#009C8D"
app:layout_constraintTop_toBottomOf="@id/c23">
<androidx.constraintlayout.widget.Guideline
android:id="@+id/v50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/h50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<TextView
style="@style/ConSampleText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="30dp"
android:gravity="center"
android:text="R"
app:layout_constraintBottom_toTopOf="@id/h50"
app:layout_constraintEnd_toStartOf="@id/v50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="30dp"
android:gravity="center"
android:text="U"
app:layout_constraintBottom_toTopOf="@id/h50"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/v50"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="30dp"
android:gravity="center"
android:text="S"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/v50"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/h50" />
<TextView
style="@style/ConSampleText"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="30dp"
android:gravity="center"
android:text="T"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/v50"
app:layout_constraintTop_toBottomOf="@id/h50" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Set the size to scale
Width :height. If one of the dimensions is set to a specific value greater than 0 or wrAP_content, it can be used as a standard to adjust another dimension parameter.
Example 1
Set layout_width=”40dp”, Android :layout_height=”0dp”, ratio 3:2. Adjust the height proportionally with the width of 40DP as the benchmark.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="@dimen/con_card_size"
android:layout_height="@dimen/con_card_size"
android:background="#f0f0f0">
<TextView
android:layout_width="40dp"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="#2196F3"
android:gravity="center"
android:text="3:2"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Example 2
Height 40DP, ratio 3:2, automatic width adjustment.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="@dimen/con_card_size"
android:layout_height="@dimen/con_card_size"
android:layout_marginStart="20dp"
android:background="#f0f0f0">
<TextView
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="# 009688"
android:gravity="center"
android:text="3:2"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Set width and height to 0
Set the width and height to 0dp and the ratio to 3:2. Will try to fill the entire parent layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="@dimen/con_card_size"
android:layout_height="@dimen/con_card_size"
android:layout_marginStart="20dp"
android:background="#f0f0f0">
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#3F51B5"
android:gravity="center"
android:text="3:2"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Width wrap_content, height 0
Layout_width -> wrap_content, height 0, scale 1:2. Base on width.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="@dimen/con_card_size"
android:layout_height="@dimen/con_card_size"
android:background="#f0f0f0">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="# 009688"
android:gravity="center"
android:text="" "
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="" "
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code
Height wrap_content, width 0
The ratio of 5:2 will be based on height.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="@dimen/con_card_size"
android:layout_height="@dimen/con_card_size"
android:layout_marginStart="20dp"
android:background="#f0f0f0"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="# 009688"
android:gravity="center"
android:text="5:2"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Copy the code