Building an adaptive interface for Android constraintlayout
•
Android
Original link
Constraintlayout lets you create complex large layouts using a flat view hierarchy (no nested view groups). It is similar to relativelayout, in which all views are laid out according to the relationship between the peer view and the parent layout, but its flexibility is higher than relativelayout, and it is easier to use with the layout editor of Android studio.
This article shows several uses of constraints.
When creating constraints, note the following rules:
Introducing the constraintlayout Library
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
Use android.support.constraint.constraintlayout in layout, as shown in 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>
Create a new style in style to facilitate subsequent operations
<!-- con layout 示例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>
If no constraint is added to the child view, it will run to the (0,0) position of the parent constraintlayout
<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>
Such as app: layout is used during positioning_ constraintStart_ Tostartof or app: Layout_ constraintTop_ Totopof property.
app:layout_ constraintStart_ Tostartof, there are two words start in it. The first start represents its starting position (left by default). The second tostartof indicates the starting position of the alignment reference.
app:layout_ constraintTop_ Totopof is similar. Align with the top of the reference.
Words specifying the position, such as top, bottom, end, start, which can be used in combination to determine the relative position: app: Layout_ constraint{}_ to{}Of
Align the child view to each edge 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">
<!-- 相对父layout的边缘定位 -->
<TextView
style="@style/ConSampleText"
android:text="居中"
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="左上角"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="左下角"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="右下角"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="右上角"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="顶部水平居中"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="底部水平居中"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="左边垂直居中"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
style="@style/ConSampleText"
android:text="右边垂直居中"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Aligns the text baseline of one view with the text baseline of another view.
You can use app: layout_ constraintBaseline_ The tobaselineof property sets the baseline alignment.
Example
<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>
Example diagram
Add a guide line in the constraintlayout to facilitate positioning. Other views can use guide lines as reference locations.
To add a guideline, you need to determine its direction, which is vertical and horizontal respectively.
Here, we use app: layout to locate by scale_ constraintGuide_ percent。 You need to specify a scale value, such as 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">
<!-- 引导线约束: 相对父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="垂直的1/3引导线后"
app:layout_constraintStart_toStartOf="@id/g1"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/t2"
style="@style/ConSampleText"
android:text="垂直的1/3引导线前"
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="垂直的1/3引导线居中"
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="水平的1/2引导线居中"
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="水平的1/2引导线上面"
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="水平的1/2引导线下面"
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>
We can also use app: layout_ constraintGuide_ End or app: Layout_ constraintGuide_ Begin to specify a specific value.
<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>
As Preview
Like a guide line, a barrier is a hidden line that you can use to constrain the view. The barrier does not define its position; Instead, the position of the barrier moves with the position of the view contained therein. This is useful if you want to limit the view to a group of views rather than a specific view.
This is an example of a vertical barrier. Barrier 1 takes tv221 and tv222 as references.
Set app: barrierdirection = "end" and tv223 to its right.
That is, 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="没有以此作为参考，不管这个有多长"
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>
When you add constraints on both sides of a view (and the view size of the same dimension is "fixed" or "wrap content"), the view is centered between the two constraints and the default deviation is 50%. You can adjust the deviation by setting properties.
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>
The size of the sub view is adjusted here.
The match constraints view expands as much as possible to meet the constraints on each side (after considering the outer margin of the view). However, you can modify this behavior with the following properties and values (these properties only take effect when you set the view width to match constraints):
layout_ constraintWidth_ default
Setting Android: Layout in layout_ Width = "0dp" and Android: Layout_ height="0dp"。 Determine the surrounding reference line.
<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>
The scale is width: height. If one of the width and height is set to a specific value greater than 0 or wrap_ Content, which can be used as a standard to adjust another size parameter.
Set layout_ width="40dp"，android:layout_ Height = "0dp", the ratio is 3:2. Adjust the height proportionally based on the width of 40dp.
<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>
Height 40dp, scale 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>
@H_ 301_ 312@
Both width and height are set to 0dp and the scale is 3:2. Attempts 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>
layout_ width -> wrap_ Content, height 0, scale 1:2. Based on the 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="1:2"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Scale 5:2, 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>
The content of this article comes from the network collection of netizens. It is used as a learning reference. The copyright belongs to the original author.
THE END
二维码