ConstraintLayout简要说明书

1.添加依赖

在app/build.gradle文件中添加ConstraintLayout的依赖

 implementation 'com.android.support.constraint:constraint-layout:1.1.3'

2.相对定位

常用属性：（layout_相对于当前控件的位置_相对于依赖控件的位置）

layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintTop_toTopOf layout_constraintTop_toBottomOf layout_constraintBottom_toTopOf layout_constraintBottom_toBottomOf layout_constraintStart_toEndOf layout_constraintStart_toStartOf layout_constraintEnd_toStartOf layout_constraintEnd_toEndOf 

layout_constraintBaseline_toBaselineOf 
baseline指的是文本基线

<TextView
    android:id="@+id/TextView1"
    ……
    android:text="TextView1"/>
<TextView
    android:id="@+id/TextView2"
    ……
    android:text="TextView2"
    app:layout_constraintLeft_toRightOf="@+id/TextView1"
    app:layout_constraintBaseline_toBaselineOf="@+id/TextView1"/>

3.角度定位

app:layout_constraintCircle="@+id/TextView1"

app:layout_constraintCircleAngle="120"（角度）

app:layout_constraintCircleRadius="150dp"（距离）

指的是TextView2的中心在TextView1的中心的120度，距离为150dp

                                                                 

4.边距

4.1 常用margin

与其他布局的差别：必须先约束该控件在ConstraintLayout里的位置

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

    <TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" />

</android.support.constraint.ConstraintLayout>

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

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp" 
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

TextView1没有约束在ConstraintLayout里的位置，所以是不生效的。TextView2生效

并且margin只能大于或等于0

4.2 goneMargin

goneMargin主要用于约束的控件可见性被设置为gone的时候使用的margin值。

属性如下： layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop layout_goneMarginRight layout_goneMarginBottom

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

    <TextView
        android:id="@+id/TextView1"
        .../>

    <TextView
        android:id="@+id/TextView2"
        ...
        app:layout_constraintLeft_toRightOf="@+id/TextView1"
        app:layout_goneMarginLeft="10dp"
        />

</android.support.constraint.ConstraintLayout>

在TextView1隐藏的时候，TextVIew2会有一个10dp的左边距出现。

4.3 居中和偏移

居中：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

偏移：

 layout_constraintHorizontal_bias 水平偏移

 layout_constraintVertical_bias 垂直偏移

 

<TextView
        android:id="@+id/TextView1"
        ...
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

4.4 尺寸约束

方式一：指定尺寸

方式二：使用wrap_content

               可以控制最大最小的宽度高度

方式三：不推荐使用match_parent.

              设置0dp配合约束代替match_parent

宽高比设置：

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

除此之外，在设置宽高比的值的时候，还可以在前面加W或H，分别指定宽度或高度限制。 例如： app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3

app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

4.5 链

两个或两个以上的控件约束一起

一条链的第一个控件是这条链的链头，通过设置链头的layout_constraintHorizontal_chainStyle来改变样式

CHAIN_SPREAD —— 展开元素 (默认)；

CHAIN_SPREAD_INSIDE —— 展开元素，但链的两端贴近parent；

CHAIN_PACKED —— 链的元素将被打包在一起

权重：

layout_constraintHorizontal_weight(constraintVertical为纵向)

5. Barrier

                             

在多个控件的一侧建立一个屏障

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/TextView1" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/barrier" />

6. Group 

把多个控件设为一组，方便隐藏或显示一组控件

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

<TextView
        android:id="@+id/TextView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@+id/TextView1" />

<TextView
        android:id="@+id/TextView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toRightOf="@id/TextView2" />

<android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />