android开发笔记之约束布局ConstraintLayout

ConstraintLayout 简介

约束布局ConstraintLayout 是一个ViewGroup，可以在Api 9以上的Android系统使用它，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件。从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout。

如：

使用其，需要在app/build.gradle文件中添加ConstraintLayout的依赖：

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

ConstraintLayout的优势：
避免布局嵌套过多的问题，并且使用起来比RelativeLayout更灵活，性能更出色。ConstraintLayout还可以按照比例约束控件位置和尺寸，能够更好地适配屏幕大小不同的机型。

Android Demo

Relative positioning 相对定位

我们要显示这个效果图的布局：

布局代码：

事实上，我们一看代码主会明白代码的具体含义，都不需要做说明了。
下面来看看相对定位的常用属性：
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

这其中，一个剧中的组合：

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

Circular positioning 角度定位

具体的原理如图：

代码为：

我们布局一个如下图的UI界面：

布局代码：

Margins 边距

边距常用属性如下：

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

我们要显示如下UI：

布局文件为：

Centering positioning and bias 居中和偏移

简单的控件居中：

除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。 例如：
app:layout_constraintDimensionRatio=“H,2:3” 指的是 高:宽=2:3
app:layout_constraintDimensionRatio=“W,2:3” 指的是 宽:高=2:3

我们要显示一个1：1的textView01和高度为2：3的textView02 UI如图：

显示代码：

Chains 链

Creating a chain:

Chain heads:

Chain Style:
When setting the attribute layout_constraintHorizontal_chainStyle or layout_constraintVertical_chainStyle on the first element of a chain, the behavior of the chain will change according to the specified style (default is CHAIN_SPREAD).

Weighted chains 显示大小比例：

layout_constraintHorizontal_weight 
layout_constraintVertical_weight

我们要显示如图UI，TextView01:TextView02:TextView03=2:4:8，

显示代码：

Optimizer

当我们使用 MATCH_CONSTRAINT 时，ConstraintLayout 将对控件进行 2 次测量，ConstraintLayout在1.1中可以通过设置 layout_optimizationLevel 进行优化，可设置的值有：
none：无优化
standard：仅优化直接约束和屏障约束（默认）
direct：优化直接约束
barrier：优化屏障约束
chain：优化链约束
dimensions：优化尺寸测量

Barrier

Barrier可以在多个控件的一侧建立一个屏障：
如下UI效果图：

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

Group

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

现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性，如下所示：

效果如下：

Placeholder

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

新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content="@+id/textview"，这时TextView会跑到屏幕的左上角。效果如下：

Guideline

Guildline像辅助线一样，在预览的时候帮助你完成布局（不会显示在界面上）。
Guildline的主要属性：
android:orientation 垂直vertical，水平horizontal
layout_constraintGuide_begin 开始位置
layout_constraintGuide_end 结束位置
layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

参考资料

1.约束布局ConstraintLayout看这一篇就够了
https://www.jianshu.com/p/17ec9bd6ca8a
2.ConstraintLayout 官网
https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout