ConstraintLayout 使用总结

前言

• 首先来看下官方文档的介绍：

  A ConstraintLayout is a ViewGroup which allows you to position and size
  widgets in a flexible way。

  可以把 ConstraintLayout 理解为 RelativeLayout 的升级版

• 优势

  ConstraintLayout 可以大大的减少布局嵌套，在测量/布局阶段的性能比 RelativeLayout 大约高 40%

  参考文章：
  解析 ConstraintLayout 的性能优势

• 准备工作

  • AndroidStudio 的版本请升级到 2.2 及以上

  • 在 app 下的 build.gradle 添加以下依赖

    compile 'com.android.support.constraint:constraint-layout:1.0.2'

实践

• 在 xml 文件中添加一个居中显示的 Button

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout ...>
  
      <Button
          android:id="@+id/btnA"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="A"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"/>
  
  </android.support.constraint.ConstraintLayout>
  

01.png

可以看到，给 Button 的 上下左右 都添加了约束，并且是相对 parent 的约束。如果一个控件没有添加任何约束，运行之后自动位于屏幕的左上角

• 在 ButtonA 的上方添加一个 ButtonB ，左侧对齐，间隔 10 dp

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android" ...>
  
      <Button
          android:id="@+id/btnA"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="A" .../>
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="10dp"
          android:text="B"
          app:layout_constraintBottom_toTopOf="@id/btnA"
          app:layout_constraintLeft_toLeftOf="@id/btnA"/>
  
  </android.support.constraint.ConstraintLayout>
  

02.png

app:layout_constraintLeft_toLeftOf 约束 ButtonB 的左侧和 ButtonA
的左侧对齐，和 RelativeLayout 的 android:layout_alignLeft 效果一样

app:layout_constraintBottom_toTopOf 约束 ButtonB 的底部在 ButtonA 的顶部，和 RelativeLayout 的 android:layout_above 效果一样

相信你对 ConstraintLayout 的属性有一定的理解了，下面简单的将 ConstraintLayout 和 RelativeLayout 的常用属性做一个对比

RelativeLayout	ConstraintLayout
android:layout_toLeftOf	app:layout_constraintRight_toLeftOf
android:layout_toRightOf	app:layout_constraintLeft_toRightOf
android:layout_above	app:layout_constraintBottom_toTopOf
android:layout_below	app:layout_constraintTop_toBottomOf
android:layout_alignLeft	app:layout_constraintLeft_toLeftOf
android:layout_alignRight	app:layout_constraintRight_toRightOf
android:layout_alignTop	app:layout_constraintTop_toTopOf
android:layout_alignBottom	app:layout_constraintBottom_toBottomOf
android:layout_alignBaseline	app:layout_constraintBaseline_toBaselineOf

其实这些属性所显示的效果是一样的，那么我们为什么还要费力气学习这个布局了，下面介绍下这个布局自己独有的属性：

• Bias

  Bias 即偏压的意思，可以设置约束偏相某一侧的压力。属性如下:

  app:layout_constraintVertical_bias
  app:layout_constraintHorizontal_bias

  取值范围为 0 ~ 1，尝试使用这个两个属性，在屏幕的右下方添加一个 FloatingActionButton

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android" ...>
  
      <android.support.design.widget.FloatingActionButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintHorizontal_bias="0.9"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.9"/>
  
  </android.support.constraint.ConstraintLayout>
  

03.png

• Guideline

  Guideline 为辅助线，不会在界面上显示，用于辅助布局。其属性

  android:orientation 取值为 vertical 或 horizontal

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"...>
  
      <android.support.constraint.Guideline
          android:id="@+id/guideline_v"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical"
          app:layout_constraintGuide_percent="0.5"/>
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="LEFT"
          app:layout_constraintRight_toLeftOf="@id/guideline_v"
          app:layout_constraintTop_toTopOf="parent"/>
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="RIGHT"
          app:layout_constraintLeft_toRightOf="@id/guideline_v"/>
  
  </android.support.constraint.ConstraintLayout>
  

0.4.png

app:layout_constraintGuide_percent 的意思为占父容器 宽度 或 高度 的比例。除此之外，Guideline 还有以下两个属性：

app:layout_constraintGuide_begin 距离父容器 左侧 或 顶部 的距离
app:layout_constraintGuide_end 距离父容器 右侧 或 底部 的距离

• Chain

  Chain链可以通过两两交叉，平分屏幕剩余空间。实现 LinearLayout 的 android:layout_weight 等分效果

   <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"...>
  
        <TextView
            android:id="@+id/tv_a"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#FFDF769A"
            android:gravity="center"
            android:text="A"
            android:textSize="20sp"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/tv_b"/>
  
        <TextView
            android:id="@+id/tv_b"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="#FFD14172"
            android:gravity="center"
            android:text="B"
            android:textSize="20sp"
            app:layout_constraintLeft_toRightOf="@id/tv_a"
            app:layout_constraintRight_toLeftOf="@id/tv_c"/>
  
        <TextView
            android:id="@+id/tv_c"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="C"
            android:textSize="20sp"
            app:layout_constraintLeft_toRightOf="@id/tv_b"
            app:layout_constraintRight_toRightOf="parent"/>
  
    </android.support.constraint.ConstraintLayout>
  

05.png

app:layout_constraintHorizontal_chainStyle 一共有三种模式

spread

spread_inside

packed

套用官方的一张图一看便知

chains-styles.png

给每个 View 添加 app:layout_constraintHorizontal_weight 属性，就可以实现 LinearLayout 的按比例展示，等价于上图的第三条展示效果。

结语

ConstraintLayout 融合了 RelativeLayout 和 LinearLayout 的特性，有效的减少了布局的嵌套。以上就是笔者在日常工作中，对 ConstraintLayout的一些用法。第一次写博，不足之处，欢迎大家指证。