一、居中
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
app:layout_constraintBottom_toBottomOf="@id/layout_a" 底部与控件layout_a的底部对齐
app:layout_constraintEnd_toEndOf="parent" 右侧父布局的右侧对齐
app:layout_constraintStart_toStartOf="parent" 左侧
app:layout_constraintTop_toTopOf="parent" 顶部
二、横向左侧占比，纵向顶部占比
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.25" />
</android.support.constraint.ConstraintLayout>
app:layout_constraintHorizontal_bias="0.25" 横向占比 控件距左侧距离加上控件距右侧距离，进行4等分，左侧占一份
app:layout_constraintVertical_bias="0.25" 纵向占比 控件距顶部距离加上控件距底部距离，进行4等分，顶部占一份
三、辅助线Guideline
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.Guideline
android:id="@+id/guide_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="40dp"
android:text="hellohellohellohellohello"
app:layout_constraintBottom_toTopOf="@id/guide_line"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
四、chainStyle
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="a"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tv_b" />
<TextView
android:id="@+id/tv_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="b"
app:layout_constraintStart_toEndOf="@id/tv_a"
app:layout_constraintEnd_toStartOf="@+id/tv_c" />
<TextView
android:id="@+id/tv_c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="c"
app:layout_constraintStart_toEndOf="@id/tv_b"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
五、constraintDimensionRatio 宽高比
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="123dp"
android:layout_height="0dp"
android:src="@color/pb_blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:3"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
六、constraintBaseline_toBaselineOf 中线对齐
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/baseline_1"
android:layout_width="wrap_content"
android:layout_height="50dp"
app:layout_constraintVertical_bias="0.3"
app:layout_constraintHorizontal_bias="0.2"
android:background="@color/pb_blue"
android:gravity="center"
android:text="baseline1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/baseline_2"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginLeft="20dp"
android:background="@color/pb_blue"
app:layout_constraintDimensionRatio="1:1"
android:gravity="center"
android:text="baseline2"
app:layout_constraintBaseline_toBaselineOf="@id/baseline_1"
app:layout_constraintStart_toEndOf="@id/baseline_1" />
</android.support.constraint.ConstraintLayout>
七、android.support.constraint.Group 把相关控件放到一个组里统一控制隐藏或显示
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/profile_image"
android:layout_width="123dp"
android:layout_height="0dp"
android:src="@color/pb_blue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="5:3"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/profile_name"
android:layout_width="123dp"
android:layout_height="0dp"
android:text="hello"
app:layout_constraintDimensionRatio="5:3"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Group
android:id="@+id/profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:constraint_referenced_ids="profile_name,profile_image" />
</android.support.constraint.ConstraintLayout>
八、layout_constrainWidth_percent layout_constrainHeight_percent
这两个属性的作用就是指定当前控件的宽度或高度是父控件的百分之多少。可设置的值在 0 - 1 之间，1 就是 100%。
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent="0.8"
app:layout_constraintDimensionRatio="5:3"
android:src="@color/pb_blue"
app:layout_constraintTop_toTopOf="parent" />
九、android.support.constraint.Placeholder
Placeholder（占位符）是一个虚拟对象，作用和它的名字一样，就是占位。
当放置好 Placeholder 后，可以通过 setContentId() 方法将占位符变为有效的视图。如果视图已经存在于屏幕上，那么视图将会从原有位置消失。
除此之外，还可以通过 setEmptyVisibility() 方法设置当视图不存在时占位符的可见性。
下面的例子演示了占位符的使用，当点击顶部头像时，顶部头像会消失并在占位符处显示：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:padding="16dp"
tools:context="com.github.airsaid.constraintlayoutdemo.MainActivity">
<ImageView
android:id="@+id/avatar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_avatar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Placeholder
android:id="@+id/placeholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
avatar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
TransitionManager.beginDelayedTransition(constraintLayout);
placeholder.setContentId(view.getId());
}
});
十、android.support.constraint.Barrier
当我们在布局时，有时候就会遇到布局会随着数据的多少而改变大小的情况。以下图为例：
以前的做法是把A，B外包一个Layout，然后C设置在Layout的右侧
通过上图就可以发现，当在 A、B 控件的大小都不确定的情况下，C 以谁作为约束对象都不对。如果以 A 作为约束对象，那么当 B 的宽度过宽时就会被遮挡，同理以 B 作为约束也是如此。
那么此时，Barrier（屏障）就派上用场了。这是个非常好用的东东，和 GuideLine 一样，它是一个虚拟的 View，对界面是不可见的。目的就是辅助布局。
对 Barrier 可以使用的属性有：
barrierDirection：设置 Barrier 所创建的位置。可设置的有：bottom、end、left、right、start、top。
constraint_referenced_ids：设置 Barrier 引用的控件。可设置多个，设置的方式是：id, id。（无需加 @id/）
barrierAllowsGoneWidgets：默认为 true，即当 Barrier 引用的控件被 GONE 掉时，则 Barrier 默认的创建行为是在已 GONE 掉控件的已解析位置上进行创建。如果设置为 false，则不会将 GONE 掉的控件考虑在内。
说再多不如看代码，还是以上图为例，来看看 Barrier 是如何解决的：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="This is a descriptive text."
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/title" />
<android.support.constraint.Barrier
android:id="@+id/barrier"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:barrierDirection="end"
app:constraint_referenced_ids="title, desc" />
<TextView
android:id="@+id/content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="This is a piece of content that is very long and long very long and long ..."
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/barrier"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
