布局篇之一：ConstraintLayout的使用

方法

1.layout_constraintXXX_toXXXOf

前一个xxx是该控件所在边，后一个xxx是其他控件的所在边即后面填写的id控件

<img src = 'https://img.haomeiwen.com/i4987670/665466298d9d46a7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/762/format/webp' width = '300' height = "200" />

2. 在父控件的位置

• 横向居中用1.6
• 纵向居中用3.8
• 居中用1,3,6,8
• 横向偏移用1.6.9(1.6必须是使用9才能生效)
• 纵向偏移用3.8.10(3.8必须使用10才能生效)

3.控件的相对位置

利用1.2.3.4.5.6.7.8进行混合使用

4. 控件gone

如果该控隐藏了，该参考控件会变成一个锚点，宽，高，margin会失效，但是它的constrain等方法仍然有效，别的控件仍然可以以它为锚点。

5.控件的尺寸

1. 如果在宽、高设置wrap_content或者0dp都是包裹内容
2. 11.是控制该控件的尺寸,必须使layout_width,layout_height为0dp,并且必须使用1.6或者3.8

• spread：控件所有约束空间
• percent：必须配合12.使用，控件所在约束空间的大小百分比
• wrap：包裹内容

3. 13.用于控制控件的宽高比，但是必须里面首先包含1-10的一个或几个条件才会生效，同时令其中宽或者高为0dp

1.app:layout_constraintLeft_toLeftOf="parent|控件id"
2.app:layout_constraintLeft_toRightOf="parent|控件id"
3.app:layout_constraintTop_toTopOf="parent|控件id"
4.app:layout_constraintTop_toBottomOf="parent|控件id"
5.app:layout_constraintRight_toLeftOf="parent|控件id"
6.app:layout_constraintRight_toRightOf="parent|控件id"
7.app:layout_constraintBottom_toTopOf="parent|控件id"
8.app:layout_constraintBottom_toBottomOf="parent|控件id"
9. app:layout_constraintHorizontal_bias="0.0~1.0" //横向偏移量从左到右
10. app:layout_constraintVertical_bias="0.0~1.0" //纵向偏移量从上到下
11.app:layout_constraintWidth_default="spread|percent|wrap" 尺寸
12.app:layout_constraintWidth_percent="0.0-1.0"
13.app:layout_constraintDimensionRatio="1" //宽高比

6. 链

• spread: 将剩余空间平均分配为n+2个空间
• spread inside:将剩余空间分配为n-1个空间（即去掉第一和最后一个相对父布局的空间位置）
• packed:将剩余空间分配给第一个和最后一个相对父布局的左右两边缘的空间
• 剩余空间左右分配问题：在packed模式，可以通过 app:layout_constraintHorizontal_bias="0.0-1",其他模式下是没有人任何效果的
• 链式情况下的控件权重分配：app:layout_constraintHorizontal_weight=""设置该方法后链的style样式失效，因为没有了剩余分配空间，这时候与linearlayout中权重用法一样。

//必须一一对应关系，才能形成chain，即A控件必须对父布局和相对B布局，B控件相对A、C布局，C控件相对B,父布局，否则layout_constraintHorizontal_chainStyle="spread"无效

<android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/a"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="A"
            app:layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/b" />

        <TextView
            android:id="@+id/b"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="B"
            app:layout_constraintLeft_toRightOf="@+id/a"
            app:layout_constraintRight_toLeftOf="@+id/c" />

        <TextView
            android:id="@+id/c"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="C"
            app:layout_constraintLeft_toRightOf="@+id/b"
            app:layout_constraintRight_toRightOf="parent" />
    </android.support.constraint.ConstraintLayout>
    

7.圆形布局

从时钟12点为0，顺时针旋转角度进行旋转（可以用来设置卫星菜单布局）

 <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/a"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:text="A"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/b"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorPrimary"
            android:gravity="center"
            android:text="B"
            app:layout_constraintCircle="@id/a"
            app:layout_constraintCircleAngle="300"
            app:layout_constraintCircleRadius="100dp" />

        <TextView
            android:id="@+id/c"
            android:layout_width="80dp"
            android:layout_height="40dp"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            android:text="C"
            app:layout_constraintCircle="@id/a"
            app:layout_constraintCircleAngle="80"
            app:layout_constraintCircleRadius="100dp" />
    </android.support.constraint.ConstraintLayout>

GuidLine（基准线）

1. guidline只是虚拟的线，即使添加了宽高，背景也不会显示出来
2. 基准线的位置可以有两个方式来确定 app:layout_constraintGuide_percent="0.33"、 app:layout_constraintGuide_begin="130dp"
3. 控件对在该基准线上进行位置确定

   <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guideline2"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="130dp" />

    <TextView
        android:id="@+id/a"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="A"
        app:layout_constraintLeft_toLeftOf="@id/guideline1"
        app:layout_constraintTop_toBottomOf="@id/guideline2" />

group

1. 虚拟分组控件，可以指定指引的id,从而对该组控件进行操作，从而统一处理，从而不需要对控件一个个做操作
2. 多个group，如果多个group含有相同id,那么以下面为主。

  <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="a,c"
        android:visibility="gone"/>
        
  <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="a,d"
        android:visibility="gone"/>


    <TextView
        android:id="@+id/a"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="A" />

    <TextView
        android:id="@+id/b"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="B"
        app:layout_constraintTop_toBottomOf="@id/a" />

    <TextView
        android:id="@+id/c"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="C"
        app:layout_constraintTop_toBottomOf="@id/b" />

    <TextView
        android:id="@+id/d"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="D"
        app:layout_constraintTop_toBottomOf="@id/c" />

Placeholder

1.占位布局，本身不绘制任何内容，通过设置app:content="id",将原来id绘制在这个位置上，原来的view被gone掉了。

    <TextView
        android:id="@+id/a"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="A" />

    <TextView
        android:id="@+id/b"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="B"
        app:layout_constraintTop_toBottomOf="@id/a" />

    <android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="40dp"
        app:content="@+id/b"
        app:layout_constraintTop_toBottomOf="@id/b" />

    <TextView
        android:id="@+id/c"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="C"
        app:layout_constraintLeft_toRightOf="@id/placeholder"
        app:layout_constraintTop_toTopOf="@+id/placeholder" />

    <TextView
        android:id="@+id/d"
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="D"
        app:layout_constraintTop_toBottomOf="@id/c" />

Barrier

1.其中在a,b上做障碍，c相对barrier位置，这样可以解决控件遮蔽问题，可以用于用户密码和用户姓名输入框的对齐。

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="a,b" />

    <TextView
        android:id="@+id/a"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="Abababababababa" />

    <TextView
        android:id="@+id/b"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="Bfafafafafafafafafafafafafafafafafafaf"
        app:layout_constraintTop_toBottomOf="@id/a" />


    <TextView
        android:id="@+id/c"
        android:layout_width="80dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        android:gravity="center"
        android:text="C"
        app:layout_constraintLeft_toLeftOf="@+id/barrier" />

参考

• ConstraintLayout 用法全解析
• ConstraintLayout基础之Chains链