ConstraintLayout 使用简介

一 背景

ConstraintLayout 是目前是android studio 2.2 以后的默认根布局。 到目前为止，大家还是习惯常用的布局。同事先尝试了下ConstraintLayout优化布局层次，笔者也使用了下，发现确实比较好用。下面我们一起来试着使用布局吧~~

二 demo

来看下有个简单的布局是这个样子的

image.png

其中文字‘金豆’ 左边金色条是居中对齐文字一栏的。按传统布局，这个简单的布局至少需要三层布局， 垂直方向和 单个水平方向。下面看下使用ConstraintLayout布局。

其实，ConstraintLayout 写起来比较方便，与RelativeLayout非常相似。 首先我们看下 要保证垂直方向的顺序布局。 如果没使用ConstraintLayout前，需要使用垂直方向的LinearLayout 或RelativeLayout。 我们的ConstraintLayout 怎样保证的呢？

 app:layout_constraintTop_toBottomOf="@+id/golden_beans_tips"

一行代码，是不是跟RelativeLayout类似。 同理 我们要保持文本 ‘12’ 和按钮‘充值’ 水平方向

app:layout_constraintTop_toTopOf="@+id/golden_bean_number"

是不是很简单。那怎么保证第一行的金色条icon 居中对齐 文本 ‘金豆’呢？

app:layout_constraintBottom_toBottomOf="@+id/golden_beans_tips"
app:layout_constraintTop_toTopOf="@+id/golden_beans_tips"

即对齐文本‘金豆’的上下边缘， 这里有一个比较形象的说法，就是constraintXXX_toXXXOf 表示对于id 对本view的拉力。这里上下方向拉力一致，所以文本居中了。那么我们的相对布局其实就有 4 * 2 8种方式：

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

三 进一步升级打怪

看了上面的一个，我们有个需求的ui是这样子的

image.png

当然，这个只是布局的一小块，你可以看成listView 的item 优化布局的层次还是比较重要的。
你可能会说 what a shell ！！！ ConstraintLayout 来布局很简单呀，实际上，你使用上面的约束，想一层布局搞定，貌似搞不定。来，看下我们的布局代码

我们看

 bind:layout_constraintLeft_toLeftOf="parent"
 bind:layout_constraintRight_toLeftOf="@+id/more"

使用这两行代码之后文本 已经在 icon 更多左边，但是文本是居中的，看起来是这样

image.png

原因是parent左边和右边more的拉力是相同的，所以文本宽度不够时，居中了。那问题来了，我想让文本居左怎么办？
bind:layout_constraintRight_toLeftOf去不掉，是需要保证在icon的左边，那怎么办呢？

app:layout_constraintHorizontal_bias="0"

layout_constraintHorizontal_bias 表示水平偏向， 取值 0 到 1， 即在两个拉力中偏左为0， 偏右为1 ，默认就是0.5， 也可以看成左右间距比例。相似的还有垂直方向layout_constraintVertical_bias

恩，ui需求又来了，比较常见的如， 水平三个按钮，我想等分水平的，这里不再赘述，ConstraintLayout中类似LinearLayout weight的属性就ok。

app:layout_constraintHorizontal_weight="1"

四 更多

还有几个重要的属性，本文不一一列出，前面的基本需求都无压力了。
app:layout_constraintHorizontal_chainStyle 链式的
以及 按宽高比布局属性 app:layout_constraintDimensionRatio。