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>

可以看到，给 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>

  

  • 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>

  

• 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>

  

  • 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>

• app:layout_constraintHorizontal_chainStyle 一共有三种模式

  • spread
  • spread_inside
  • spacked

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

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

结语

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