约束布局ConstraintLayout总结

背景

ConstraintLayout是目前android官方比较推荐的布局方式，Android进行布局时减少对布局层次的嵌套，进而提高app的性能。

约束顾名思义，就是将该view约束到指定的view上（包括外层的ConstraintLayout和其他的布局），实现位置的定位。
因此有时候可能需要更多的定位去约束控件的位置，强大的功能，灵活的使用给上手带来了一点点的难度，很多开发者望而生畏。其实掌握之后，真的越用越舒服！！!

使用

ConstraintLayout的使用需要添加依赖，

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

和relativelayout相似的功能

app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintLeft_toLeftOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
app:layout_constraintRight_toRightOf="@id/view"
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBaseline_toBaselineOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"

app:layout_constraintStart_toEndOf="@id/view"
app:layout_constraintLeft_toRightOf="@id/view"
app:layout_constraintEnd_toStartOf="@id/view"
app:layout_constraintRight_toLeftOf="@id/view"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/view"

望名知意，这些的意思是把约束控件的 上下左右 放到提供约束的控件的 的 上下左右 位置上。

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

要想实现水平居中只需设置left与right分别约束parent，而要想实现竖直居中则只需设置top与bottom分别约束parent

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

layout_constraintBaseline_toBaselineOf

Baseline指的是文本基线，即使两个不同宽高的textview，可以把文字基线对齐，即文字对齐。

Bias(偏向)

当遇到两个相反方向的约束时，默认情况下控件是居中的；然而要想让控件偏向某一边，可以使用bias属性：

layout_constraintHorizontal_bias 水平偏移
layout_constraintVertical_bias 垂直偏移

Bias的大小在0-1之间，等比例进行偏移，适配的时候很好用。

LinearLayout 相似功能

这两种代表偏移的方向

app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""

spread_inside:两边不留空间，中间间距平分
spread:完全均分
packed:完全不留间距

需要注意的是：要达到上的的chain效果，他们之间必须完全相互约束，同时chain style的设置都是以第一个view为基点。同时默认chain style为spread。

app:layout_constraintHorizontal_weight设置权重

可以通过设置权重，进行控件尺寸的分配

margin

1.Margin 作用对象 : 如果某一边对应的 Margin 属性被设置 , 这些 Margin 会被应用于对应的约束 ;

2.Margin 作用效果 : 设置 Margin 属性会强制在 被约束的边 ( 源边 Source Side ) 和 约束到的位置 之间 填充指定尺寸的空间 ;

3.Margin 属性类型及取值范围 : Margin 属性值是尺寸类型 , 设置 dip , px 等数值属性 , 其值必须大于等于0
4、padding不受影响

goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值，属性如下：

ayout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_gon
MarginTop
layout_gone
MarginRight
layout_goneMarginBottom

只有用于约束的控件消失后，该属性才会生效。

Circle

layout_constraintCircle: 代表约束的view的id
layout_constraintCircleAngle: 代表约束的角度
layout_constraintCircleRadius: 代表约束的半径大小

<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
 ...
 >
 
    <TextView
        android:id="@+id/tv1"
        android:text="tv1"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:text="tv2"
        ...
        app:layout_constraintCircle="@id/tv1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />
 
</android.support.constraint.ConstraintLayout>

尺寸约束

控件的尺寸可以通过四种不同方式指定：

使用指定的尺寸

使用wrap_content，让控件自己计算大小
当控件的高度或宽度为wrap_content时，可以使用下列属性来控制最大、最小的高度或宽度：

android:minWidth 最小的宽度

android:minHeight 最小的高度

android:maxWidth 最大的宽度

android:maxHeight 最大的高度

使用 0dp (MATCH_CONSTRAINT)

官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent

例如

宽度设为0dp，左右两边约束parent的左右两边，并设置左边边距为50dp

宽高比
当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3

app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

Percent dimension(百分比维度)

layout_constraintWidth_percent
layout_constraintHeight_percent 设置为0到1之间的值

一些辅助

Optimizer

可以通过添加属性app:layout_optimizationLevel 来决定ConstraintLayout 中哪些元素需要优化

none : 不使用优化
standard : 默认。只对direct和barrier约束进行优化
direct : 优化直接约束
barrier : 优化屏障约束
chain : 优化链式约束（实验性的）
dimensions : 优化维度测量（实验性的），减少匹配约束元素的测量数量

Barrier屏障

假设有3个控件ABC，C在AB的右边，但是AB的宽是不固定的，这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的

一侧建立一个屏障，如下所示

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

app:barrierDirection为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top
app:constraint_referenced_ids为屏障引用的控件，可设置多个用“,”隔开

Group
Group可以把多个控件归为一组，方便隐藏或显示一组控件

  <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

Placeholder指的是占位符。

在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置。

不管原控件在哪儿，设置后，该控件位置都被约束到Placeholder位置

<android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#cccccc"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#000000"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Guideline
Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。
Guildline的主要属性：

android:orientation 垂直vertical，水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边