Android ConstraintLayout

Android ConstraintLayout详解

AndroidStudio2.2开始，就推出了一个牛逼的布局，ConstraintLayout,此布局像是一个升级版的RelativeLayout，但是功能比RelativeLayout强大许多，号称一层

布局就可以搞定复杂页面。在AS2.2下还可以用拖拽控件的方式就行布局（设计师的福音），不过本篇不讲解拖拽控件的相关用法，主要讲解一些相关属性含义。 

---

开始！

相对位置

这个相对位置的设置有点类似RelativeLayout的layout_toLeftOf、alignParentLeft等这些属性。 

下面是本人对此属性的总结:

layout_constraint[本源位置]_[目标位置]="[目标ID]"

ConstraintLayout一共支持相对位置的属性在此： 

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

拿第一个属性来说，layout_constraintLeft_toLeftOf=”@+id/id_first”,表示当前View的左边界与id_first的View的做边界对齐。其实这个属性翻译成中文就是：当前view的左边对齐与引用view的左边。 

例子：

效果如下： 

当然，这些属性也支持设置为对齐父布局的左右前后。

app:layout_constraintLeft_toLeftOf="parent"/>

这样，buttonB就依附在父布局的左边。类似Realitelayout的alignParentLeft。

margin属性

这个属性没啥好说的，跟其他布局的margin属性差不多。支持的属性如下： 

android:layout_marginStart 

android:layout_marginEnd 

android:layout_marginLeft 

android:layout_marginTop 

android:layout_marginRight 

android:layout_marginBottom 

注意：如上图，假如A紧贴父布局的左侧，B距离A 100dp，A设置为gone后，则B距离父布局的左侧100dp。

goneMargin属性

这个布局比较有意思，还是拿上面的那副图做示例，假设我们现在有这样一个需求：假设A设置为gone，后，B需要距离父布局的左侧200dp，怎么办？这时候，goneMargin属性就派上用场啦，只要设置B的layout_goneMarginLeft=200dp即可。这样，A不为gone的时候，B距离A 100dp，A为gone时，B距离父布局左侧200dp。 

一共支持的属性如下： 

layout_goneMarginStart 

layout_goneMarginEnd 

layout_goneMarginLeft 

layout_goneMarginTop 

layout_goneMarginRight 

layout_goneMarginBottom

Centering positioning and bias ，设置居中或者按比例偏移。 

bias属性

bias支持的属性如下： 

layout_constraintHorizontal_bias 

layout_constraintVertical_bias

假设我们要设置一个控件居中怎么办？很简单，利用上面介绍过的属性就可以办到。

app:layout_constraintHorizontal_bias="0.5"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent”/>

ConstraintLayout本身支持minHeight、minWidht属性，没啥好说的。

注意ConstraintLayout不支持match_parent属性，要用0dp代替，在加上设置特性的约束属性，即可实现match_parent的效果。

Ratio属性

Ratio设置宽高比。

属性如下：app:layout_constraintDimensionRatio=”” 

当前控件宽或高其一确定的话，可以使用ration属性，根据确定的宽或高确定另外高或宽的大小。

android:layout_height="0dp"

app:layout_constraintDimensionRatio="1:2"/>

当前Button的width已经确定，height根据设置的比例=2×width 

layout_constraintDimensionRatio接受的值是两个float类型的比例，代表的含义是width：height。 

Chains 链状结构。

看图如下：

Chain Style 

要想chain style生效，必须设置当前链方向的边为wrap_content,比如上面的水平链，宽设为wrap_content。还有就是控件要相互引用，比如A的右边依赖B的左

边，B的左边依赖A的右边，都是设置。 

chain style设置在第一个控件上 

即设置在head上。

属性有两个： 

layout_constraintHorizontal_chainStyle 

layout_constraintVertical_chainStyle 

支持的值有三个： 

CHAIN_SPREAD：均匀分布控件。 

CHAIN_SPREAD_INSIDE，同上，但是边上的控件不均匀分布。 

CHAIN_PACKED：控件紧挨在一起。还可以通过bias属性设置偏移量。 

根据字面意思这三个属性好理解，效果如下： 

Weight属性： 

app:layout_constraintHorizontal_weight 

app:layout_constraintVertical_weight 

跟线性布局的weight差不多，layout_constraintHorizontal_weight需要设置width=0dp，控件的大小根据设置的weight比例进行设置。

Guideline 

Guideline是一条隐形的线，这条线可作为准线，根据此准线设置其他控件的位置。

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:id="@+id/guideline"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

app:layout_constraintGuide_begin="100dp" />

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="16dp"

android:text="Button"

app:layout_constraintLeft_toLeftOf="@id/guideline"

app:layout_constraintTop_toTopOf="parent" />

上面代码：guideline控件是一条隐形垂直的线，距离左边距100dp，Button由于设置了left_toLeft，所以也距离左边距100dp。

GuideLine支持的属性：

layout_constraintGuide_begin：距离left或top的大小 

layout_constraintGuide_end：距离right或bottom的大小 

layout_constraintGuide_percent：float类型。距离left或top的大小的比例。 

layout_constraintGuide_percent=”0.5” android:orientation=”vertical” ,那么guideline距离左侧的距离为父布局宽度的一半。

---

结束!