优势:
1.嵌套少,性能提高。因为View位置是互相关联的,所以不需要像线性布局一样需要有很多父类容器辅助View定位。
2.更快的编写xml布局,提高工作效率。熟练后可以使用Android studio快速拖拉组件来实现布局,但是前期建议好好了解ConstraintLayout的属性
3.View的定位灵活度更大,可以动态的跟随其他View的位置改变而改变。
4.可阅读性强,这点可能很多人会质疑:“一堆View平铺有什么阅读性啊”。 但是事实是,嵌套多层的线性布局或者相对布局反而更难以阅读,因为你需要关注父类布局提供的辅助定位信息。
属性:
这里的定位属性指的是 layout_constraintTop_toTopOf 、layout_constraintTop_toBottomOf 、 layout_constraintStart_toEndOf 等等此类属性。
为了方便后续理解,这里说明下此类定位属性的意思。此类定位属性在文本上想表达的是 当前View 在 定位View 什么位置上。
这里举几个例子,例如:
layout_constraintTop_toBottomOf 这个属性的意思是 当前View的上边(Top)在 目标View的下边(Bottom)
layout_constraintTop_toTopOf 这个属性的意思是 当前View的上边(Top) 在 目标View的上边(Top)
这个时候估计有人会疑问,什么是当前View,什么是定位View啊。
当前View是指:你添加了 layout_constraintTop_toBottomOf 这个属性的View
定位View是指:app:layout_constraintTop_toBottomOf="@id/quit" 后面添加的id ,这里@id/quit 就是定位的View。 所以,使用约束布局还有一个特点就是基本上每一个View都要写上id。
layout_constraintTop_toBottomOf 当前View的Top在目标View的Bottom
效果图(注意图片中的箭头):
xml
<Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:text="按键2" app:layout_constraintTop_toBottomOf="@id/btn1" />
方便观看这里增加了上边距50dp
layout_constraintBottom_toTopOf当前View的Bottom在目标View的Top
效果图:
xml
<Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按键2" android:layout_marginBottom="50dp" app:layout_constraintBottom_toTopOf="@id/btn1" />
layout_constraintLeft_toRightOf 与 layout_constraintStart_toEndOf 当前View的Left在目标View的Right
layout_constraintLeft_toRightOf 与 layout_constraintStart_toEndOf 这2个属性其实都是一个意思,都是当前View的Left在目标View的Right。
为什么google会设计2个功能一样的属性呢? 因为阿拉伯语,我们正常的阅读习惯是从左到右,而阿拉伯语的习惯是从右到左。所以语言切换后整体View的布局位置也要跟随改变。当时,如果你只开发国内App其实用2个之间的任意一个属性都可以。
效果图
xml
<Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按键2" app:layout_constraintStart_toEndOf="@id/btn1" app:layout_constraintTop_toBottomOf="@+id/btn1" />
在上面我使用了Start_toEndOf 所以效果图上按键2的左边依附在按键的右边上,但是因为Top_toBottomOf的关系,按键2的上边又在按键1的下边上。
layout_constraintRight_toLeftOf 与 layout_constraintEnd_toStartOf 当前View的Right在目标View的Left
与上面的差不多,举一反三也可以理解。
效果图:
xml
<Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按键2" app:layout_constraintEnd_toStartOf="@id/btn1" app:layout_constraintTop_toBottomOf="@+id/btn1" />
layout_constraintTop_toTopOf 当前View的Top在目标View的Top
这里要介绍一个关键字 parent,parent会经常使用。当前View想依附到ConstraintLayout 布局本身的四个边的位置上时,就可以使用parent。 例如希望一个按钮依附到ConstraintLayout 上边 就可以 使用 app:layout_constraintTop_toTopOf="parent"
效果图:
xml
<?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" xmlns:tools="http://schemas.android.com/tools" android:background="@color/white" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="按键1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按键2" app:layout_constraintTop_toTopOf="@+id/btn1" app:layout_constraintStart_toEndOf="@+id/btn1"/> </androidx.constraintlayout.widget.ConstraintLayout>
这里按键1依附了父类布局ConstraintLayout 的 左边与上边, 按键2布局也写入 app:layout_constraintTop_toTopOf="@+id/btn1" 依附在按键1的上边。 这里可以看到按键2即使没有写layout_marginTop="20dp" 也依然与按键1的top边对齐。
layout_constraintBottom_toBottomOf 当前View的Bottom在目标View的Bottom
与上面的差不多,举一反三也也可以理解。
效果图:
xml
<?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" xmlns:tools="http://schemas.android.com/tools" android:background="@color/white" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="80dp" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="按键1" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/btn2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按键2" app:layout_constraintBottom_toBottomOf="@id/btn1" app:layout_constraintStart_toEndOf="@+id/btn1"/> </androidx.constraintlayout.widget.ConstraintLayout>
约束布局下View的宽高0dp
在ConstraintLayout下 0dp 有一个特别的功能。让View根据定位属性填满高度或者宽度。
例子1
效果图:
xml
<?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&