ConstraintLayout使用

概述

约束布局，是google推出的用于最大化解决布局嵌套问题，同时减少布局渲染时间，提升性能的布局。与相对布局Relativelayout有些类似，约束布局的原理与相对布局是一样的，都是根据视图与视图之间的相互依赖，相对父级布局的位置来进行布局的。但是比Relativelayout更加的灵活，功能更加强大。

1. 入门

1.1 添加依赖

implementation ‘com.android.support.constraint:constraint-layout:2.0.0-beta2’

1.2 入门前先认识基本方法

• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf

通过方法名字很好理解，就是定义两个控件直接的相对关系。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintLeft_toRightOf="@id/btn1"
        app:layout_constraintTop_toBottomOf="@id/btn1"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintRight_toLeftOf="@id/btn1"
        app:layout_constraintTop_toBottomOf="@id/btn1"/>

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4"
        app:layout_constraintBottom_toTopOf="@id/btn1"
        app:layout_constraintRight_toLeftOf="@id/btn1"/>

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
        app:layout_constraintBottom_toTopOf="@id/btn1"
        app:layout_constraintLeft_toRightOf="@id/btn1"/>


    <TextView
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:gravity="center"
        android:background="@android:color/holo_green_dark"
        android:textColor="@android:color/white"
        android:text="居中对齐按钮1"
        app:layout_constraintBaseline_toBaselineOf="@id/btn1"
        app:layout_constraintLeft_toRightOf="@id/btn1"/>

</android.support.constraint.ConstraintLayout>

效果图如上所述，设置Button1居中显示，Button 2,3,4,5分别以Button1作为参照对象定位，TextView以按钮1中心线为基准对齐。

2. 进阶

2.1 Chains
链条是什么？简单说就是一条链将同一轴（水平或者垂直）上面给连接起来，使他们能够统一行动。

• Spread Chain 链模式
  Chain 链的默认模式就是 spread 模式，它将平分间隙让多个 Views 布局到剩余空间。
• Spread Inside Chain 链模式
  把两边最边缘的两个 View 到外向父组件边缘的距离去除，然后让剩余的 Views 在剩余的空间内平分间隙布局
• Packed Chain 链模式
  将所有 Views 打包到一起不分配多余的间隙(不包括通过 margin 设置多个 Views 之间的间隙），然后将整个组件组在可用的剩余位置居中

2.2 Guidelines
android.support.constraint.Guideline该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。

• layout_constraintGuide_begin
• layout_constraintGuide_end
• layout_constraintGuide_percent

通过以上三个属性可以确定辅助线的位置，效果如下。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        app:layout_constraintGuide_percent="0.3"
        android:orientation="horizontal"
        android:layout_height="wrap_content"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        app:layout_constraintGuide_begin="50dp"
        android:orientation="horizontal"
        android:layout_height="wrap_content"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        app:layout_constraintGuide_end="300dp"
        android:orientation="horizontal"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

2.3 Barrier

• 如下图所示布局，使用GuideLine基线，输入框在基线右边。
  
• 当姓名长度改变时，长度超过辅助线
  
• 使用Barriar替换GuideLine

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:padding="15dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:text="user account name"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv2"
        android:layout_width="100dp"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        app:layout_constraintLeft_toLeftOf="parent"
        android:padding="15dp"
        android:text="手机号"
        android:layout_height="wrap_content"/>

    <android.support.constraint.Barrier
        android:id="@+id/guideline"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv1,tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:padding="15dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/guideline"
        android:text="hello john"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content"
        android:padding="15dp"
        app:layout_constraintTop_toBottomOf="@id/name"
        app:layout_constraintLeft_toRightOf="@id/guideline"
        android:text="13522222222"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

2.4 Group

• 当我们使用了constraintlayout之后, 很多本来需要放在LinearLayout或者RelativeLayout 中的若干控件会以"零散"的形式存在, 当需要对一组的view进行Visiable或者Gone操作的时候, 为了避免进行挨个设置, Constrainlayout提供了一个group控件进行, 可以对view分组进行统一设置.

  	<android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tv1,tv2"/>