ConstraintLayout 约束布局

Android ConstraintLayout 约束布局
Use ConstraintLayout to design your Android views

使用示例

之前项目的一个布局，使用原有的几种常用布局会绘制很多层，而且适配效果并不好。但是采用约束布局就可以很好的解决这个问题。

示意图

绘制的代码

使用

引入 constraint-layout 的依赖

compile 'com.android.support.constraint:constraint-layout:1.1.2'

使用

属性

1、相对定位

在ConstraintLayout中，可以相对于一个其它的组件，而定位当前组件。约束一个组件的横轴和纵轴，相关的属性有：

横轴： Left, Right, Start and End
纵轴：Top, Bottom

属性的规则：(当前控件B)
layout_constraint *[source]* _to *[target]* Of = "A"，
source 和 target 都表示某个方向；
= 后面接的就是 当前控件B 引做参考的控件A；
上面的属性规则表示的意思就是：
当前控件B 的 source 方向相对于引用控件 A 的 target 方向，进行约束

居中

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

上面定位的含义是：
当前控件的 Bottom ，相对于 parent 的Bottom进行约束；
当前控件的 Left ，相对于 parent 的Left进行约束；
当前控件的 Right ，相对于 parent 的Right进行约束；
当前控件的 Top ，相对于 parent 的Top进行约束；
所以，当前控件就相对parent 进行居中了

居中约束

B 在 A 的右边

右侧约束

通过上面的解释，应该已经清楚了，‘’B 在 A 的右边“ ，就是B的左边相对与A 的右边进行约束，用代码表示就是：
B：app:layout_constraintLeft_toRightOf="A"
布局代码：

约束代码只有一行就是，B的：app:layout_constraintLeft_toRightOf="@id/btn_A"

ok，左右约束就讲完了。

B 在 A 的下边

下边约束

‘’B 在 A 的下边“ ，就是B的上边相对与A 的下边进行约束，用代码表示就是：
B：app:layout_constraintTop_toBottomOf="A"

约束代码同样只有一行就是，B的：app:layout_constraintTop_toBottomOf="@id/btn_A""

ok，上下约束也讲完了。

相对位置的约束属性
View的Left、Top、Right、Bottom还是比较好理解。
那 Start 和 End 又是指的什么呢？
其实 Start 和 End，是指的当前语言的开始和结束方向：大多数语言都是从左向右的，而少数语言是从右向左书写的。所以在我们语言环境中，Start = Left ，End = Right 。

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

2、边距

gone margins
在约束布局中除了之前的常规边距margins外，还新加了gone margins 。
gone margins 的意义在于，当位置约束的相对控件的可见性为：View.GONE时，设置的边距依旧可用。
使用和之前的边距是一样的。

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

具体区别：（在C中设置边距属性，相对的控件是B ，B的相邻控件是A）

android:layout_margin
当控件B ,View.visible 或者 View.invisible时，设置的数值相对于控件B有效；
当控件B ,View.Gone时，设置的数值，就相对于控件A有效了。

layout_goneMargin
当控件B ,View.visible 或者 View.invisible时，设置的数值，看不出任何效果，即边距无效；
当控件B ,View.Gone时，设置的数值，就相对于控件A有效了

图示说明
横向定义了三个按钮：A 、B 、 C

A、B、C
C中设置android:layout_marginLeft="20dp"

marginLeft="20dp"
B中设置android:visibility="gone"

B：View.GONE
C中设置app:layout_goneMarginLeft="20dp"

goneMarginLeft="20dp"
B中设置android:visibility="gone"

B：View.GONE

区别在于，goneMargin，只有当目标控件View.GONE时才会触发

3、偏移率(bias)

使用

app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintVertical_bias="0.8"

Horizontal_bias (横向偏移) 的取值范围[0.0, 1.0]，方向从左向右
Vertical_bias (纵向偏移) 的取值范围[0.0, 1.0]，方向从上向下

比如我们想让居中的那个按钮，移动到竖直方向居中，水平方向1/4的位置。我们就可以使用偏移率来实现。

加上偏移

4、最小尺寸

当一个组件的宽或高设置为WRAP_CONTENT时，可以为它们设置一个最小尺寸：

android:minWidth
android:minHeight

5、Guideline，引导线

使用Guideline为相对组件时，以帮助定位组件。
Guideline主要属性有：

android:orientation    //方向
layout_constraintGuide_begin  //引导线距顶部或左边框的距离
layout_constraintGuide_end   //引导线距底部或右边框的距离
layout_constraintGuide_percent   //所占百分比

横线帮助纵向定位，纵线帮助横向定位。