ConstraintLayout，约束布局
A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.
这是Google官方API的介绍
ConstraintLayout是Android Studio 2.2中主要的新增功能之一，也是Google在2016年的I/O大会上重点宣传的一个功能。在Android Studio 2.3开始，IDE默认生成的Activity布局都是以ConstraintLayout做为根布局。
ConstraintLayout提供了可视化的方式来编写界面，但是在实际使用中，因为我们的布局复杂，很难用可视化操作去精准布局，所以我们还是倾向于手动去写xml。
ConstraintLayout的优点
1.对比RelativeLayout
实际开发中，我们最常用的layout是RelativeLayout，ConstraintLayout某种意义上可以认为是RelativeLayout的升级版。 举一个简单的例子
上图中一个button在RelativeLayout的右下方，当我们希望这个RelativeLayout的高度自适应的时候，我们去设置RelativeLayout的layout heiht为wrap content，我们会看到如下图结果，显然不是我们需要的。
但是如果用ConstraintLayout，可以轻松实现这个需求
2.扁平化
我们都知道，我们在实现界面布局的时候，强调尽量少的嵌套，因为嵌套多会导致需要更多的时间去绘制view。为了减少嵌套，我们经常会使用RelativeLayout代替LinearLayout，但是RelativeLayout会对子View做两次measure。
相关view的绘制流程以及RelativeLayout和LinearLayout的性能对比，贴一个文章Android中RelativeLayout和LinearLayout性能分析
我们看一个例子可以清晰看到ConstraintLayout减少嵌套
如上图的UI如果我们用原先的RelativeLayout实现，层次图如下
但是如果我们用ConstraintLayout实现，层次图会变的扁平化如下图
另外关于ConstraintLayout的性能分析，可以参考Google的文章解析ConstraintLayout的性能优势
3.应对需求多变性
还是刚才那个例子，如果ui需求修改成如下图
如果用RelativeLayout我们可能需要很大程度上去修改原来的布局结构，但是用ConstraintLayout，我们只需要把不需要的那个Textview置为GONE就能达到UI效果。
当然，不是所有需求变动我们都能很方便去实现。
贴一下这个UI的ConstraintLayout的实现代码
<?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:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="64.5dp"
android:background="@drawable/item_background_selector_white">
<tv.chushou.zues.widget.fresco.FrescoThumbnailView
android:id="@+id/iv_image"
android:layout_width="@dimen/subc_user_thumb_width"
android:layout_height="@dimen/subc_user_thumb_width"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
fresco:actualImageScaleType="centerCrop"
fresco:placeholderImageScaleType="fitXY"
fresco:roundAsCircle="true"
fresco:roundingBorderColor="@color/transparent_5_black"
fresco:roundingBorderWidth="0.5dp" />
<ImageView
android:id="@+id/iv_sex"
android:layout_width="14dp"
android:layout_height="14dp"
android:src="@drawable/user_female_big"
app:layout_constraintBottom_toBottomOf="@+id/iv_image"
app:layout_constraintRight_toRightOf="@+id/iv_image" />
<com.kascend.chushou.widget.ImgRightTextView
android:id="@+id/img_text_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2.5dp"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
app:layout_constraintBottom_toTopOf="@+id/tv_bottom"
app:layout_constraintEnd_toStartOf="@+id/tv_game"
app:layout_constraintLeft_toRightOf="@+id/iv_image"
app:layout_constraintRight_toLeftOf="@+id/tv_game"
app:layout_constraintStart_toEndOf="@+id/iv_image"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_goneMarginRight="105dp"
app:magin_left="5dp" />
<TextView
android:id="@+id/tv_game"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_marginBottom="2.5dp"
android:layout_marginEnd="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="10dp"
android:ellipsize="end"
android:gravity="right"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="@color/download_content_color"
android:textSize="12.5sp"
app:layout_constraintBottom_toTopOf="@+id/tv_state"
app:layout_constraintEnd_toStartOf="@+id/iv_detail"
app:layout_constraintLeft_toRightOf="@+id/img_text_name"
app:layout_constraintRight_toLeftOf="@+id/iv_detail"
app:layout_constraintStart_toEndOf="@+id/img_text_name"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/tv_bottom"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
android:layout_marginTop="2.5dp"
android:ellipsize="end"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="@color/kas_littlegray"
android:textSize="@dimen/fontsize_12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/tv_state"
app:layout_constraintLeft_toRightOf="@+id/iv_image"
app:layout_constraintRight_toLeftOf="@+id/tv_state"
app:layout_constraintStart_toEndOf="@+id/iv_image"
app:layout_constraintTop_toBottomOf="@+id/img_text_name" />
<TextView
android:id="@+id/tv_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="10dp"
android:layout_marginStart="30dp"
android:layout_marginTop="2.5dp"
android:ellipsize="end"
android:gravity="top|right"
android:includeFontPadding="false"
android:singleLine="true"
android:textColor="@color/friend_state"
android:textSize="@dimen/fontsize_9sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/iv_detail"
app:layout_constraintLeft_toRightOf="@+id/tv_bottom"
app:layout_constraintRight_toLeftOf="@+id/iv_detail"
app:layout_constraintStart_toEndOf="@+id/tv_bottom"
app:layout_constraintTop_toBottomOf="@+id/tv_game" />
<ImageView
android:id="@+id/iv_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="14dp"
android:layout_marginRight="14dp"
android:src="@drawable/bg_in_playlive"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="0dp"
android:layout_height="1px"
android:layout_marginLeft="14dp"
android:layout_marginStart="14dp"
android:background="@color/c_page_diliver_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/iv_image"
app:layout_constraintStart_toEndOf="@+id/iv_image" />
</android.support.constraint.ConstraintLayout>
使用ConstraintLayout
关于可视化操作，可以参考动态图解&实例 ConstraintLayout Chain和Android新特性介绍，ConstraintLayout完全解析
手动写xml，可以参考ConstraintLayout 属性详解 和Chain的使用和ConstraintLayout 完全解析 快来优化你的布局吧以及译文ConstraintLayout (这到底是什么)
几个要点
- Chains
- Guidelines
- ConstraintSet
更新
Constraint Layout 1.1.x带来了哪些新东西？
关于坑
ConstraintLayout嵌套会出现显示不全的问题
其他暂时还未碰到
关于引用
文中贴了链接的文章都有参考，致谢。
