ToB企服应用市场:ToB评测及商务社交产业平台

标题: Android约束布局ConstraintLayout的使用 [打印本页]

---

作者: 王國慶    时间: 2024-6-15 00:55
标题: Android约束布局ConstraintLayout的使用
Android引入约束布局的目的是为了减少布局层级的嵌套，从而提升渲染性能。约束布局综合线性布局、相对布局、帧布局的部分功能，缺点也很明显，就是可能要多写几行代码。所以约束布局使用时，还得综合思量代码量。提升性能也并不一定非得使用约束布局，也可以在ViewGroup上dispatchDraw。你必要根据业务的详细情况选择最符合的实现方式。我知道很多人一开始很不风俗使用约束布局，但既然你恳切诚意问我怎么使用了？于是我就大发慈悲告诉你怎么使用呗。
链式约束

用得最多的非链式约束莫属了。这看起来是不是类似于相对布局？那么有人问了，既然相对布局写法这么简便，都不用强制你写另一个方向的占满屏幕的约束，为什么还要使用约束布局呢？约束布局它还是有它过布局之处的，比如以下一些功能，相对布局是做不到的。

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent">
7.     <ImageView
8.         android:id="@+id/iv1"
9.         android:layout_width="100dp"
10.         android:layout_height="100dp"
11.         android:background="#F0F"
12.         app:layout_constraintVertical_chainStyle="spread"
13.         app:layout_constraintTop_toTopOf="parent"
14.         app:layout_constraintEnd_toEndOf="parent"
15.         app:layout_constraintStart_toStartOf="parent"
16.         app:layout_constraintBottom_toTopOf="@+id/iv2"/>
18.     <ImageView
19.         android:id="@+id/iv2"
20.         android:layout_width="100dp"
21.         android:layout_height="100dp"
22.         android:background="#FF0"
23.         app:layout_constraintBottom_toTopOf="@id/iv3"
24.         app:layout_constraintEnd_toEndOf="parent"
25.         app:layout_constraintStart_toStartOf="parent"
26.         app:layout_constraintTop_toBottomOf="@+id/iv1"/>
27.     <ImageView
28.         android:id="@+id/iv3"
29.         android:layout_width="100dp"
30.         android:layout_height="100dp"
31.         android:background="#0FF"
32.         app:layout_constraintBottom_toTopOf="@id/iv4"
33.         app:layout_constraintEnd_toEndOf="parent"
34.         app:layout_constraintStart_toStartOf="parent"
35.         app:layout_constraintTop_toBottomOf="@+id/iv2"/>
36.     <ImageView
37.         android:id="@+id/iv4"
38.         android:layout_width="100dp"
39.         android:layout_height="100dp"
40.         android:background="#0F0"
41.         app:layout_constraintBottom_toBottomOf="parent"
42.         app:layout_constraintEnd_toEndOf="parent"
43.         app:layout_constraintStart_toStartOf="parent"
44.         app:layout_constraintTop_toBottomOf="@+id/iv3"/>
45. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

我们可以在链首的控件添加一个layout_constraintVertical_chainStyle属性为spread，翻译成睁开，在我看来就是排队，要保持间距一样，而且边缘不能站，默认不写也是指定的spread。

如果你改成spread_inside，就会变成可以靠墙的情况。

那如果你改成packed，就会贴在一起了。

使用Group分组进行表现和隐藏

而如果你添加以下代码在布局中，就会将id为iv1和iv3点色块去掉，如许iv2和iv4就贴在一起了。

1. <androidx.constraintlayout.widget.Group
2.     android:id="@+id/group"
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content"
5.     android:visibility="gone"
6.     app:constraint_referenced_ids="iv1,iv3" />

复制代码

Guideline引导线

1. <androidx.constraintlayout.widget.Guideline
2.     android:layout_width="wrap_content"
3.     android:layout_height="wrap_content"
4.     android:orientation="vertical"
5.     app:layout_constraintGuide_percent="0.5"/>

复制代码

使用引导线，可以在预览布局的时候看到，在运行时是看不到的，可以作为布局的参考线。

切换到Design的选项卡你就能看到了。
引导线的另外两个属性是layout_constraintGuide_begin和layout_constraintGuide_end，一看就知道这个是使用边距定位的。
角度约束

角度约束的以下三个属性是一起使用的。

1. layout_constraintCircle  
2. layout_constraintCircleAngle
3. layout_constraintCircleRadius  

复制代码

1. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:app="http://schemas.android.com/apk/res-auto"
3.     xmlns:tools="http://schemas.android.com/tools"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent">
7.     <ImageView
8.         android:id="@+id/iv1"
9.         android:layout_width="100dp"
10.         android:layout_height="100dp"
11.         android:background="#FFC0C0"
12.         app:layout_constraintTop_toTopOf="parent"
13.         app:layout_constraintEnd_toEndOf="parent"
14.         app:layout_constraintStart_toStartOf="parent"
15.         app:layout_constraintBottom_toBottomOf="parent"/>
17.     <ImageView
18.         android:id="@+id/iv2"
19.         android:layout_width="100dp"
20.         android:layout_height="100dp"
21.         android:background="#FF0"
22.         app:layout_constraintCircle="@id/iv1"
23.         app:layout_constraintCircleAngle="30"
24.         app:layout_constraintCircleRadius="150dp"/>
25.     <androidx.constraintlayout.widget.Guideline
26.         android:layout_width="wrap_content"
27.         android:layout_height="wrap_content"
28.         android:orientation="horizontal"
29.         app:layout_constraintGuide_percent="0.5"/>
30.     <androidx.constraintlayout.widget.Guideline
31.         android:layout_width="wrap_content"
32.         android:layout_height="wrap_content"
33.         android:orientation="vertical"
34.         app:layout_constraintGuide_percent="0.5"/>
36. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

知道你们喜好粉嫩的，所以特地把色块的颜色换了一下。旋转角是以垂直向上为0度角，顺时针旋转30度。距离则是盘算两控件重心的连线。在矩形地区中，重心就在对角线的交叉点。

位置百分比偏移

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent">
8.     <ImageView
9.         android:id="@+id/iv1"
10.         android:layout_width="100dp"
11.         android:layout_height="100dp"
12.         android:background="#FFC0C0"
13.         app:layout_constraintStart_toStartOf="parent"
14.         app:layout_constraintEnd_toEndOf="parent"
15.         app:layout_constraintHorizontal_bias="0.5"
16.         app:layout_constraintTop_toTopOf="parent"
17.         app:layout_constraintBottom_toTopOf="@+id/iv2"/>
19.     <ImageView
20.         android:id="@+id/iv2"
21.         android:layout_width="100dp"
22.         android:layout_height="100dp"
23.         android:background="#FF0"
24.         app:layout_constraintStart_toStartOf="parent"
25.         app:layout_constraintEnd_toEndOf="parent"
26.         app:layout_constraintHorizontal_bias="0.4"
27.         app:layout_constraintBottom_toBottomOf="parent"
28.         app:layout_constraintTop_toBottomOf="@+id/iv1"/>
29.     <androidx.constraintlayout.widget.Guideline
30.         android:layout_width="wrap_content"
31.         android:layout_height="wrap_content"
32.         android:orientation="vertical"
33.         app:layout_constraintGuide_percent="0.5"/>
34. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

这里必要注意，不是只使用layout_constraintHorizontal_bias就可以了，原有该方向的约束也不能少。

使用goneMargin设置被依靠的控件gone时，依靠控件的边距

goneMargin有以部属性：

1. layout_goneMarginStart  
2. layout_goneMarginEnd  
3. layout_goneMarginTop  
4. layout_goneMarginBottom  

复制代码

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     tools:context=".MainActivity">
9.     <ImageView
10.         android:id="@+id/iv1"
11.         android:layout_width="100dp"
12.         android:layout_height="100dp"
13.         android:background="#FFC0C0"
14.         android:visibility="gone"
15.         app:layout_constraintTop_toTopOf="parent"
16.         app:layout_constraintEnd_toEndOf="parent"
17.         app:layout_constraintStart_toStartOf="parent"
18.         app:layout_constraintBottom_toTopOf="@+id/iv2"/>
20.     <ImageView
21.         android:id="@+id/iv2"
22.         android:layout_width="100dp"
23.         android:layout_height="100dp"
24.         android:background="#FF0"
25.         app:layout_goneMarginTop="10dp"
26.         app:layout_constraintTop_toBottomOf="@+id/iv1"
27.         app:layout_constraintEnd_toEndOf="parent"
28.         app:layout_constraintStart_toStartOf="parent"/>
30.     <androidx.constraintlayout.widget.Guideline
31.         android:layout_width="wrap_content"
32.         android:layout_height="wrap_content"
33.         android:orientation="horizontal"
34.         app:layout_constraintGuide_begin="10dp"/>
35. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

约束宽高比

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent">
8.     <ImageView
9.         android:id="@+id/iv1"
10.         android:layout_width="0dp"
11.         android:layout_height="100dp"
12.         app:layout_constraintDimensionRatio="1:1"
13.         android:background="#FFC0C0"
14.         app:layout_constraintStart_toStartOf="parent"
15.         app:layout_constraintEnd_toEndOf="parent"
16.         app:layout_constraintTop_toTopOf="parent"
17.         app:layout_constraintBottom_toTopOf="@id/iv2"/>
19.     <ImageView
20.         android:id="@+id/iv2"
21.         android:layout_width="100dp"
22.         android:layout_height="0dp"
23.         android:background="#FF0"
24.         app:layout_constraintDimensionRatio="H,3:2"
25.         app:layout_constraintStart_toStartOf="parent"
26.         app:layout_constraintEnd_toEndOf="parent"
27.         app:layout_constraintTop_toBottomOf="@id/iv1"
28.         app:layout_constraintBottom_toBottomOf="parent"/>
29. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

我们可以将宽高的其中一个设置为0dp，然后这个宽或高根据相对于另一个的比例来。如果高度为0dp，必要根据宽度来确认高度，你可以直接赋值为3:2，也可以赋值为H,3:2，这也是推荐的写法，我一样寻常省略W和H。如果高度为0dp，你本应该写H，而你写成了W，那就要把比例反过来看宽高比。

权重约束

这个类似于线性布局的权重功能。

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent">
8.     <ImageView
9.         android:id="@+id/iv1"
10.         android:layout_width="100dp"
11.         android:layout_height="0dp"
12.         app:layout_constraintVertical_weight="1"
13.         android:background="#FFC0C0"
14.         app:layout_constraintStart_toStartOf="parent"
15.         app:layout_constraintEnd_toEndOf="parent"
16.         app:layout_constraintTop_toTopOf="parent"
17.         app:layout_constraintBottom_toTopOf="@id/iv2"/>
19.     <ImageView
20.         android:id="@+id/iv2"
21.         android:layout_width="100dp"
22.         android:layout_height="0dp"
23.         app:layout_constraintVertical_weight="2"
24.         android:background="#FF0"
25.         app:layout_constraintStart_toStartOf="parent"
26.         app:layout_constraintEnd_toEndOf="parent"
27.         app:layout_constraintTop_toBottomOf="@id/iv1"
28.         app:layout_constraintBottom_toBottomOf="parent"/>
29. </androidx.constraintlayout.widget.ConstraintLayout>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4