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

Constraint Layout 不完全使用手册