原文链接:https://juejin.im/post/5d12c4146fb9a07ea33c24b7
ConstraintLayout(约束布局)是Android Studio 2.2中主要的新增功能之一。ConstraintLayout能够以支持库的形式最小支持到API9,ConstraintLayout非常适合使用可视化的方式来编写界面,但并不太适合使用XML的方式来进行编写。
1、定位
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.TestConstraintLayoutActivity">
<TextView
android:id="@+id/tv_constraint_1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="你好" />
<TextView
android:id="@+id/tv_constraint_2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:background="@color/colorPrimaryDark"
android:gravity="center"
android:text="你好"
app:layout_constraintLeft_toRightOf="@id/tv_constraint_1" />
<TextView
android:id="@+id/tv_constraint_3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:background="@color/colorAccent"
android:gravity="center"
android:text="你好"
app:layout_constraintTop_toBottomOf="@id/tv_constraint_1" />
</android.support.constraint.ConstraintLayout>
以tv_constraint_1相对不位置属性,layout_constraintLeft_toRightOf 的意思constraintLeft 表示tv_constraint_2本身的左边,一个VIew有四条边,上,下,左,右。分别对应着constrainTop,constrainBottom,constrainLeft,constrainRight。toRightOf则表示位于另外一个VIew的右边,tv_constraint_2位于tv_constraint_1的右边。因此对应toLeftOf,toRightOf,toBottomOf 分别位于tv_constraint_1的左,右,下。
总结的说,constraintXXX表示View自身约束的边,toXXXOf表示另一个View的边,而XXX的值可以是Left、Top、Right、Bottom,分别对应左,上、右、下边。layout_constraintStart_toEndOf
也是类似的道理。
另外需要注意的是:view在相对于parent的时候toLeftOf,toTopOf,toRightOf,toBottomOf分别表示位于parent的内部左上右下边缘。
看一个特殊的场景:
此时想要Hello和World文本中间对齐怎么办?提供了属性layout_constraintBaseline_toBaselineOf
什么是baseline?贴张官网的图
2,边距
边距与平常使用并无太大区别,但需要先确定view的位置,边距才会生效。
常用属性如下:
Gone Margin
- android:layout_marginStart
- android:layout_marginEnd
- android:layout_marginLeft
- android:layout_marginTop
- android:layout_marginRight
- android:layout_marginBottom
有时候,会有这种需求,在World可见的时候,GitCode与World的左边距是0,当World不见时,GitCode的左边距是某个特定的值。
World可见的效果,GitCode的左边距为0
World不可见的效果,GitCode的左边距为10
为此,ConstraintLayout提供了特殊的goneMargin属性,在目标View隐藏时,属性生效。有如下属性:
- layout_goneMarginStart
- layout_goneMarginEnd
- layout_goneMarginLeft
- layout_goneMarginTop
- layout_goneMarginRight
- layout_goneMarginBottom
Centering positioning and bias
在RelativeLayout居中,通常是使用以下三个属性:
-
layout_centerInParent 中间居中
-
layout_centerHorizontal 水平居中
-
layout_centerVertical 垂直居中
而在ConstraintLayout居中则采用左右上下边来约束居中。
-
水平居中 layout_constraintLeft_toLeftOf & layout_constraintRight_toRightOf
-
垂直居中 layout_constraintTop_toTopOf & layout_constraintBottom_toBottomOf
-
中间居中 水平居中 & 垂直居中
<TextView ... android:text="Hello" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>
那,要是想把Hello往左挪一点,怎么办?
那很简单,使用margin呀。不不不,这里要介绍的是另外两个属性,与LinearLayout的权重类似(当然,ConstraintLayout也可以使用权重属性),但简单很多。
-
layout_constraintHorizontal_bias 水平偏移
-
layout_constraintVertical_bias 垂直偏移
两个属性的取值范围在0-1。在水平偏移中,0表示最左,1表示最右;在垂直偏移,0表示最上,1表示最下;0.5表示中间。
<TextView
...
android:text="Hello"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
效果:
3、圆形定位(Added in 1.1)
圆形定位指的是View的中心点相对于另外View中心点的位置。贴张官网图。
涉及三个属性:
-
layout_constraintCircle : 另外一个view的id,上图的A view
-
layout_constraintCircleRadius : 半径,上图的radius
-
layout_constraintCircleAngle : 角度,上图angle,范围为0-360
根据上面上个属性就可以确定B View的位置。从图也可以知道,角度以时间12点为0,顺时针方式。
4 尺寸约束
ConstraintLayout 最大最小尺寸
ConstraintLayout的宽高设为WRAP_CONTENT
时,可以通过以下熟悉设置其最大最小尺寸。
-
android:minWidth 最小宽度
-
android:minHeight 最小高度
-
android:maxWidth 最大宽度
-
android:maxHeight 最大高度
ConstraintLayout中的控件尺寸约束
在ConstraintLayout中控件可以三种方式来设置其尺寸约束。
-
指定具体的值。如123dp
-
使用值
WRAP_CONTENT
,内容自适配。 -
设为0dp,即
MATCH_CONSTRAINT
,扩充可用空间。
第一二种跟平常使用没什么区别。第三种会根据约束情况重新计算控件的大小。
在ConstraintLayout中,不推荐使用MATCH_PARENT
,而是推荐使用MATCH_CONSTRAINT
(0dp),它们的行为是类似的。
在1.1之前的版本,控件尺寸设为WRAP_CONTENT
,控件默认是由组件文本大小控制,其他约束是不生效的。可以通过以下属性设置是否生效。
-
app:layout_constrainedWidth=”true|false”
-
app:layout_constrainedHeight=”true|false”
控件设为MATCH_CONSTRAINT
时,控件的大小会扩展所有可用空间,在1.1版本后,可以通过以下属性改变控件的行为。
-
layout_constraintWidth_min 最小宽度
-
layout_constraintHeight_min 最小高度
-
layout_constraintWidth_max 最大宽度
-
layout_constraintHeight_max 最大高度
-
layout_constraintWidth_percent 宽度占parent的百分比
-
layout_constraintHeight_percent 高度占parent的百分比
比例约束
控件的宽高比,要求是宽或高至少一个设为0dp,然后设置属性layout_constraintDimensionRatio
即可。
这里设置宽高比为3:1,高度为100dp,那么宽度将为300dp。
<TextView
android:text="Hello"
app:layout_constraintDimensionRatio="3:1"
android:layout_width="0dp"
android:layout_height="100dp"
/>
也可以在比例前加W
,H
表示是宽高比还是高宽比。如下面表示高宽比
<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
5 链
链在水平或者垂直方向提供一组类似行为。如图所示可以理解为横向链。这里需要了解一点,A与parent的左边缘约束,B与parent的右边边缘约束,A右边和B左边之间相互约束,才能使用一条链。多个元素之间也是如此,最左最右与parent约束,元素之间边相互约束。不然下面的链式永远无法生效
横向链最左边第一个控件,垂直链最顶第一个控件称为链头,可以通过下面两个属性链头统一定制链的样式。
-
layout_constraintHorizontal_chainStyle 水平方向链式
-
layout_constraintVertical_chainStyle 垂直方向链式
它两的值默认可以是
-
CHAIN_SPREAD 展开样式(默认)
-
Weighted chain 在CHAIN_SPREAD样式,部分控件设置了MATCH_CONSTRAINT,那他们将扩展可用空间。
-
CHAIN_SPREAD_INSIDE 展开样式,但两端不展开
-
CHAIN_PACKED 抱团(打包)样式,控件抱团一起。通过偏移bias,可以改变packed元素的位置。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Hello"
android:id="@+id/tvHello"
android:gravity="center"
android:padding="20dp"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/tvWorld"
android:textColor="@color/colorWhite"
android:background="@color/colorPrimaryDark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:text="World"
android:gravity="center"
android:padding="20dp"
android:id="@+id/tvWorld"
app:layout_constraintLeft_toRightOf="@id/tvHello"
app:layout_constraintRight_toRightOf="parent"
android:textColor="@color/colorWhite"
android:background="@color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
6 优化器
在1.1之后,公开了优化器,通过在app:layout_optimizationLevel
来决定控件在哪方面进行优化。
-
none : 不进行优化
-
standard : 默认方式, 仅仅优化direct和barrier约束
-
direct : 优化direct约束
-
barrier : 优化barrier约束
-
chain : 优化链约束 (实验性质)
-
dimensions : 优化尺寸 (实验性质), 减少测量次数
7.工具类
7.1 Guideline(参考线)
参考线实际上不会在界面进行显示,只是方便在ConstraintLayout布局view时候做一个参考。
通过设置Guideline的属性orientation
来表示是水平方向还是垂直方向的参考线,对应值为vertical
和horizontal
。可以通过三种方式来定位Guideline位置。
-
layout_constraintGuide_begin 从左边或顶部指定具体的距离
-
layout_constraintGuide_end 从右边或底部指定具体的距离
-
layout_constraintGuide_percent 从宽度或高度的百分比来指定具体距离
<android.support.constraint.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:layout_width="match_parent" android:layout_height="match_parent"> <android.support.constraint.Guideline android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/guideline" android:orientation="vertical" app:layout_constraintGuide_begin="10dp"/> <Button android:text="Button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button" app:layout_constraintLeft_toLeftOf="@+id/guideline" android:layout_marginTop="16dp" app:layout_constraintTop_toTopOf="parent"/> <Button android:text="Button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button2" app:layout_constraintLeft_toLeftOf="@+id/guideline" android:layout_marginTop="16dp" app:layout_constraintTop_toBottomOf="@id/button"/> </android.support.constraint.ConstraintLayout>
Guideline设置为垂直参考线,距离开始的位置为10dp。如下图所示,实际中需要把鼠标移到button才会显示出来哦。
7.2 Barrier(栅栏)
Barrier有点类似Guideline,但Barrier会根据所有引用的控件尺寸的变化重新定位。例如经典的登录界面,右边的EditText总是希望与左右所有TextView的最长边缘靠齐。
如果两个TextView其中一个变得更长,EditText的位置都会跟这变化,这比使用RelativeLayout灵活很多。
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Barrier
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="right"
android:id="@+id/barrier"
app:constraint_referenced_ids="tvPhone,tvPassword"
/>
<TextView android:layout_width="wrap_content"
android:text="手机号码"
android:id="@+id/tvPhone"
android:gravity="center_vertical|left"
android:padding="10dp"
android:layout_height="50dp"/>
<TextView android:layout_width="wrap_content"
android:text="密码"
android:padding="10dp"
android:gravity="center_vertical|left"
android:id="@+id/tvPassword"
app:layout_constraintTop_toBottomOf="@id/tvPhone"
android:layout_height="wrap_content"/>
<EditText android:layout_width="wrap_content"
android:hint="输入手机号码"
android:id="@+id/etPassword"
app:layout_constraintLeft_toLeftOf="@id/barrier"
android:layout_height="wrap_content"/>
<EditText android:layout_width="wrap_content"
android:hint="输入密码"
app:layout_constraintTop_toBottomOf="@id/etPassword"
app:layout_constraintLeft_toLeftOf="@id/barrier"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
app:barrierDirection
所引用控件对齐的位置,可设置的值有:bottom、end、left、right、start、top.constraint_referenced_ids
为所引用的控件,例如这里的tvPhone,tvPasswrod。
7.3 Group(组)
用来控制一组view的可见性,如果view被多个Group控制,则以最后的Group定义的可见性为主。
Group默认可见时,是这样的。
设置Group的visible
属性为gone。
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Group
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/group"
android:visibility="gone"
app:constraint_referenced_ids="tvPhone,tvPassword"
/>
<TextView android:layout_width="wrap_content"
android:text="手机号码"
android:id="@+id/tvPhone"
android:gravity="center_vertical|left"
android:padding="10dp"
android:layout_height="50dp"/>
<TextView android:layout_width="wrap_content"
android:text="密码"
android:padding="10dp"
android:gravity="center_vertical|left"
android:id="@+id/tvPassword"
app:layout_constraintLeft_toRightOf="@id/tvPhone"
app:layout_constraintTop_toBottomOf="@id/tvPhone"
android:layout_height="wrap_content"/>
<TextView android:layout_width="wrap_content"
android:text="GitCode"
android:padding="10dp"
android:gravity="center_vertical|left"
app:layout_constraintLeft_toRightOf="@id/tvPassword"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
效果就变成了这样了,tvPhone,tvPassword都被隐藏了。
7.4 Placeholder(占位符)
一个view占位的占位符,当指定Placeholder的content属性为另一个view的id时,该view会移动到Placeholder的位置。
代码中,将TextView的定位在屏幕中间,随着将id设置给Placeholder的属性后,TextView的位置就跑到Placeholder所在的地方,效果图跟上图一直。
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Placeholder
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:content="@id/tvGitCode"
/>
<TextView android:layout_width="wrap_content"
android:text="GitCode"
android:id="@+id/tvGitCode"
android:padding="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:gravity="center_vertical|left"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
7.5 其他
在2.0版本,为ConstraintLayout增加了ConstraintProperties、ConstraintsChangedListener等,感兴趣可以自己看看官网。
8.总结
在写本文之前,其实还不会用ConstraintLayout,写完本文之后,已经上手和喜欢上了,满足自己在实际开发中想要的效果,能够有效的减少布局的层级,从而提高性能。不知道看完本文,你会使用ConstraintLayout了没有?