前言
-
首先来看下官方文档的介绍：
A ConstraintLayout is a ViewGroup which allows you to position and size
widgets in a flexible way。可以把 ConstraintLayout 理解为 RelativeLayout 的升级版
-
优势
ConstraintLayout 可以大大的减少布局嵌套，在测量/布局阶段的性能比 RelativeLayout 大约高 40%
-
准备工作
-
AndroidStudio 的版本请升级到 2.2 及以上
-
在 app 下的 build.gradle 添加以下依赖
compile 'com.android.support.constraint:constraint-layout:1.0.2'
-
实践
-
在 xml 文件中添加一个居中显示的 Button
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ...> <Button android:id="@+id/btnA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"/> </android.support.constraint.ConstraintLayout>
01.png
可以看到，给 Button 的 上下左右 都添加了约束，并且是相对 parent 的约束。如果一个控件没有添加任何约束，运行之后自动位于屏幕的左上角
-
在 ButtonA 的上方添加一个 ButtonB ，左侧对齐，间隔 10 dp
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" ...> <Button android:id="@+id/btnA" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" .../> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:text="B" app:layout_constraintBottom_toTopOf="@id/btnA" app:layout_constraintLeft_toLeftOf="@id/btnA"/> </android.support.constraint.ConstraintLayout>
02.png
app:layout_constraintLeft_toLeftOf 约束 ButtonB 的左侧和 ButtonA
的左侧对齐，和 RelativeLayout 的 android:layout_alignLeft 效果一样
app:layout_constraintBottom_toTopOf 约束 ButtonB 的底部在 ButtonA 的顶部，和 RelativeLayout 的 android:layout_above 效果一样
相信你对 ConstraintLayout 的属性有一定的理解了，下面简单的将 ConstraintLayout 和 RelativeLayout 的常用属性做一个对比
| RelativeLayout | ConstraintLayout |
|---|---|
| android:layout_toLeftOf | app:layout_constraintRight_toLeftOf |
| android:layout_toRightOf | app:layout_constraintLeft_toRightOf |
| android:layout_above | app:layout_constraintBottom_toTopOf |
| android:layout_below | app:layout_constraintTop_toBottomOf |
| android:layout_alignLeft | app:layout_constraintLeft_toLeftOf |
| android:layout_alignRight | app:layout_constraintRight_toRightOf |
| android:layout_alignTop | app:layout_constraintTop_toTopOf |
| android:layout_alignBottom | app:layout_constraintBottom_toBottomOf |
| android:layout_alignBaseline | app:layout_constraintBaseline_toBaselineOf |
其实这些属性所显示的效果是一样的，那么我们为什么还要费力气学习这个布局了，下面介绍下这个布局自己独有的属性：
-
Bias
Bias 即偏压的意思，可以设置约束偏相某一侧的压力。属性如下:
app:layout_constraintVertical_bias
app:layout_constraintHorizontal_bias取值范围为 0 ~ 1，尝试使用这个两个属性，在屏幕的右下方添加一个 FloatingActionButton
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" ...> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintHorizontal_bias="0.9" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.9"/> </android.support.constraint.ConstraintLayout>
03.png
-
Guideline
Guideline 为辅助线，不会在界面上显示，用于辅助布局。其属性
android:orientation 取值为 vertical 或 horizontal
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"...> <android.support.constraint.Guideline android:id="@+id/guideline_v" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" app:layout_constraintGuide_percent="0.5"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="LEFT" app:layout_constraintRight_toLeftOf="@id/guideline_v" app:layout_constraintTop_toTopOf="parent"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="RIGHT" app:layout_constraintLeft_toRightOf="@id/guideline_v"/> </android.support.constraint.ConstraintLayout>
0.4.png
app:layout_constraintGuide_percent 的意思为占父容器 宽度 或 高度 的比例。除此之外，Guideline 还有以下两个属性：
app:layout_constraintGuide_begin 距离父容器 左侧 或 顶部 的距离
app:layout_constraintGuide_end 距离父容器 右侧 或 底部 的距离
-
Chain
Chain链可以通过两两交叉，平分屏幕剩余空间。实现 LinearLayout 的 android:layout_weight 等分效果
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"...> <TextView android:id="@+id/tv_a" android:layout_width="0dp" android:layout_height="wrap_content" android:background="#FFDF769A" android:gravity="center" android:text="A" android:textSize="20sp" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toLeftOf="@id/tv_b"/> <TextView android:id="@+id/tv_b" android:layout_width="0dp" android:layout_height="wrap_content" android:background="#FFD14172" android:gravity="center" android:text="B" android:textSize="20sp" app:layout_constraintLeft_toRightOf="@id/tv_a" app:layout_constraintRight_toLeftOf="@id/tv_c"/> <TextView android:id="@+id/tv_c" android:layout_width="0dp" android:layout_height="wrap_content" android:background="@color/colorAccent" android:gravity="center" android:text="C" android:textSize="20sp" app:layout_constraintLeft_toRightOf="@id/tv_b" app:layout_constraintRight_toRightOf="parent"/> </android.support.constraint.ConstraintLayout>
05.png
app:layout_constraintHorizontal_chainStyle 一共有三种模式
spread
spread_inside
packed
套用官方的一张图一看便知
chains-styles.png
给每个 View 添加 app:layout_constraintHorizontal_weight 属性，就可以实现 LinearLayout 的按比例展示，等价于上图的第三条展示效果。
结语
ConstraintLayout 融合了 RelativeLayout 和 LinearLayout 的特性，有效的减少了布局的嵌套。以上就是笔者在日常工作中，对 ConstraintLayout的一些用法。第一次写博，不足之处，欢迎大家指证。
网友评论