Constraint Layout 不完全使用手册

[] Constraint Layout

how to use ConstraintLayout

Official Guide

build.gradle 文件中添加依赖

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'
}

在使用过程中已经从 beta1 变成了 beta4 了。很快应该有正式版，注意更新版本。

两种方式使用 ConstraintLayout

把已有的 layout 转成 ConstraintLayout

注意是在Design 页面 中的Component Tree 中找到对应 layout， 右键，最后一项里 Convert xxxLayout to ConstraintLayout , 不是在 text页面。

自动转换的这种，编辑器会自动添加一些约束， 会尽力保持和原布局一致，但是在实际使用中发现自动转换的基本都不能用， 不如重新写来的方便。

在Text页面中直接写 ConstraintLayout

重新写，或者直接修改原有 layout 都可以。

ConstraintLayout 约束constraint

看过官方文档中的视频介绍可以看到，视频中介绍了鼠标点击的方式和自动的方式来设置约束。 在我的实践中感觉鼠标点选问题只是看起来很美好，有如下问题

• 图形方式编辑页面刷新速度较慢
• 添加约束不精准，尤其是页面复杂的时候。
• 切回text方式的时候，会有一定的自动调整，行为比较难预测。

因此，我认为图形界面仅适用于看效果，和初期理解，务必坚持使用文本方式text的编辑方式

位置节点(handle or anchor)包括:

• Top, Bottom, Left, Right, BaseLine

约束有下列要求：

• 每个 view 至少要有2个约束：1个水平方向，1个垂直方向
• 垂直的位置节点(handle or anchor)必须依赖的是垂直的位置节点，水平的位置节点必须依赖水平的位置节点。 GuideLine也是一样，垂直的GuideLine 依赖垂直的GuideLine ， 水平的GuideLine 依赖水平的GuideLine
• 一个位置节点可以被多个位置节点依赖，但只能依赖一个其他位置节点

约束constraint包括：

• Parent constraint 依赖父容器，比如：```app:layout_constraintLeft_toLeftOf="parent"` ，左边和父容器的左边对齐
• Position constraint 和LinearLayout 等的margin 用法相同
• Baseline constraint 和 RelativeLayout中的alignBaseLine 意思相同，是垂直方向的约束
• Alignment constraint 依赖同级元素， 其实和Parent constraint是不同是，依赖的是同级元素
• 新功能 Constraint to guideline 依赖辅助线， 依赖的是辅助线。 辅助线是新添加的功能，类似 PS 中的辅助线。

自动布局 不建议使用自动布局， 原因和自动转换时是一样的问题。

在约束下调整大小

3种类型：

• 固定大小， 30dp, 30px, 30sp
• wrap_content 同之前的wrap_content
• 填充约束0dp, 不要使用fill_parent和match_parent ，但是意思和match_parent差不多，都是在约束范围内尽量填充。

调整 margin

和之前一样

新功能 调整占比 bias

相比原来的仅有的3种，增加了任意值的占比。比如占20% bias=0.2
原有的对齐方式就是占比中的3种特殊情况：

• 居中 相当于 bias=0.5,
• 靠左或者靠上相当于bias=0，
• 靠右或者靠下相当于bias=1

ConstraintLayout 的几个特性

• 约束依赖的对象 gone的时候，会自动依赖上一级。 RelativeLayout 中无法实现
• 依赖的对象gone的时候，可以设置单独的 goneMargin。 RelativeLayout 中无法实现
• 辅助线设计， 可以设置任意位置，任意百分比的辅助线，对于一些复杂布局来说非常方便。结合约束，可以实现按百分比设置 view的大小，按任意位置设置 view的位置

常用功能

单个 View 布局：

• 左对齐
• 右对齐
• 居中对齐
• 相对父容器左20%，右80%。是空白区域的比例2：8，不是占父容器的20%位置。 注意区别下面一条
• 相对20%的辅助线， 是占父容器的20%的位置。 对比上一条，见图二者是不同的
• marginLeft 20dp
• 相对20dp 的辅助线

水平对齐功能

两个 view 的布局

本节的内容包括:

• top_topOf
• top_bottomOf
• bottom_bottomOf
• bottom_topOf
• left_leftOf
• left_rightOf
• right_rightOf
• right_leftOf

• top_topOf
• top_bottomOf

top_topOf

• bottom_bottomOf
• bottom_topOf

bottom

• left_leftOf
• left_rightOf

left

• right_rightOf
• right_leftOf

top_topOf

• baselineof

top_topOf

多个 view 的布局

本节的内容包括

• gone的使用

• margingone 的使用

• gone的使用

gone

• margingone 的使用

marginGone 设置的依赖的 view 在 gone 时的 margin, 可以分别设置marginLeft,marginRight,marginTop和marginBottom.本例中设置的marginTop

gone

style 里 的使用

ConstraintLayout 的属性多一些，写多了肯定想简化成 style 的形式。写成 style 时要注意ConstraintLayout 的属性属于自定义属性， 在 style 文件中不用写命名空间，直接写属性值即可。

style

几个经验使用心得

• Design模式用来看看效果还行，别指望用来写代码
• 布局的时候综合使用LinearLayout 和ConstraintLayout ，不要全篇使用一个 ConstraintLayout, 那样布局太平，不利于维护代码。 建议明显的线性布局依然使用LinearLayout,对于理清思路，日后维护都比较好。比较复杂的布局使用ConstraintLayout。
• RelativeLayout可以不用。
• id 的依赖不是强制按代码先后，可以交叉依赖。 不像 RelativeLayout中被依赖的 id 必须先定义。

github 地址

文中全部代码都在这里。欢迎交流。

https://github.com/buptfarmer/edu/blob/master/app/src/main/java/com/chensiwen/edugame/ConstraintLayoutActivity.java