ConstraintLayout使用

一、ConstraintLayout概述

ConstraintLayout约束布局和其他布局容器一样，都是继承自ViewGroup的，所以他也拥有其他布局的一些公用属性，与其他布局不同的是他是通过约束规则来实现布局的，所以他还新增了一些他特有的属性（后面再详说），虽然是在Android Studio2.2之后才有这个工具，但是向下兼容到Android版本2.3，官网中对它的描述就一句话：它允许您以灵活的方式定位和设置小部件。主要体现在可以以拖拽的方式来定义约束规则从而实现复杂的布局，当然你也可以通过原始的方式自己设置对应的属性。

二、使用

1. 相对定位Relative positioning

对定位Relative positioning和中心定位Centering positioning是将给定的子View相对于另一个子View在水平和垂直轴上约束，其实和RelativeLayout差不多。简单的理解为把其中一个子View当成参照物，另一个参照它布局，对应的属性。

1. layout_constraintLeft_toLeftOf
2. layout_constraintLeft_toRightOf
3. layout_constraintRight_toLeftOf
4. layout_constraintRight_toRightOf
5. layout_constraintTop_toTopOf
6. layout_constraintTop_toBottomOf
7. layout_constraintBottom_toTopOf
8. layout_constraintBottom_toBottomOf

拿layout_constraint==Left==_to==Left==Of，代表的是当前控件的左侧与相对控件的左侧对齐。

2. 中心定位Centering positioning

1. layout_constraintBaseline_toBaselineOf 基于baseline对齐
2. layout_constraintStart_toEndOf 当前控件开始位置和相对控件结束位置对齐
3. layout_constraintStart_toStartOf 当前控件开始位置和相对控件开始位置对齐
4. layout_constraintEnd_toStartOf 当前控件结束位置和相对控件开始位置对齐
5. layout_constraintEnd_toEndOf 当前控件结束位置和相对控件结位置对齐

属性名	含义
layout_constraintLeft_toLeftOf	左边缘和xx左边缘对齐
layout_constraintLeft_toRightOf	左边缘和xx右边缘对齐
layout_constraintRight_toLeftOf	右边缘和xx左边缘对齐
layout_constraintRight_toRightOf	右边缘和xx右边缘对齐
layout_constraintTop_toTopOf	上边缘和xx上边缘对齐
layout_constraintTop_toBottomOf	上边缘和xx下边缘对齐
layout_constraintBottom_toTopOf	下边缘和xx上边缘对齐
layout_constraintBottom_toBottomOf	下边缘和xx下边缘对齐
layout_constraintBaseline_toBaselineOf	基于baseline对齐
layout_constraintStart_toEndOf	起始边缘和xx结束边缘对齐
layout_constraintStart_toStartOf	起始边缘和xx起始边缘对齐
layout_constraintEnd_toStartOf	结束边缘和xx起始边缘对齐
layout_constraintEnd_toEndOf	结束边缘和xx结束边缘对其

3.隐藏空间设置边距

可以和可见性已被设为View.GONE的控件设置边距，常用于在相对布局中保持各个控件的位置。因为我们在开发中常常遇到一个空间被设为GONE之后，和他有相对关联的控件的位置会发生改变，影响了原有的布局，导致UI混乱，用以下属性可以保持原有设计：

1. layout_goneMarginStart
2. layout_goneMarginEnd
3. layout_goneMarginLeft
4. layout_goneMarginTop
5. layout_goneMarginRight
6. layout_goneMarginBottom

4.居中定位和偏移

ayout_constraintHorizontal_bias

layout_constraintVertical_bias

下面可以实现整个页面居中

<TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

5.圆弧定位

1.1版本最新特性，可以根据两个空间的中心位置形成约束关系，以当前组件中心为圆心设置半径和角度来设置约束条件。

属性名	含义
layout_constraintCircle	引用另一个控件id
layout_constraintCircleRadius	到xx中心位置的距离，即圆周半径
layout_constraintCircleAngle	xx所在圆周的角度（0-360）

实现代码：

 <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="100dp"
        android:layout_marginTop="100dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="TextView2" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView3"
        app:layout_constraintCircle="@+id/textView2"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="50dp" />

实现样式：

6.Percent dimension 百分比维度

可以设置控件相对于父布局尺寸的百分比，0-1之间。需要注意：

• 控件的width和height要被设置为0dp
• 默认宽高属性要被设置为percent(1.1版本之后将无需设置，自动识别）*

<TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="TextView4"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

效果：

7.Ratio 比例 layout_constraintDimensionRatio

可以定义一个控件宽高尺寸比例，这样可以固定控件的尺寸关系，形成一种约束，减少出现UI混乱被挤压的情况，可以形成自适应。但是要注意的事，控件的两个维度height和width中至少要有一个设置为0或者MATCH_CONSTRAINT。

 <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="TextView4"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="1:5" />

layout_constraintDimensionRatio按照w:h

同样，也可以只限制其中一个维度（height或width）随另一个维度的变化的比例。
如果一个维度固定，只需要在比例前面加上“H”或者”W”表示想要对哪个维度进行限制。

   <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@color/colorAccent"
        android:text="TextView4"
        app:layout_constraintDimensionRatio="H,1:2"
        app:layout_constraintTop_toTopOf="parent" />