ConstraintLayout知识记录

一、准备工作

　　1．  确保SDK Tools已经下载了ContraintLayout的支持库。

　　2．  gradle中增加对ConstraintLayout的依赖。

compile ‘com.android.support.constraint:constraint-layout:1.0.2’

　　3．  在使用到ConstraintLayout的xml文件头部添加标签

xmlns:app=”http://schemas.android.com/apk/res-auto”

二、RelativeLayout（RL）与ConstraintLayout（CL）属性对应部分

CL属性	RL属性
layout_constraintLeft_toLeftOf	layout_alignLeft
layout_constraintLeft_toRightOf	layout_toRightOf
layout_constraintRight_toLeftOf	layout_toLeftOf
layout_constraintRight_toRightOf	layout_alignRight
layout_constraintTop_toTopOf	layout_alignTop
layout_constraintTop_toBottomOf	layout_below
layout_constraintBottom_toTopOf	layout_above
layout_constraintBottom_toBottomOf	layout_alignBottom
layout_constraintBaseline_toBaselineOf	layout_alignBaseline
layout_constraintStart_toEndOf	layout_toEndOf(API 17)
layout_constraintStart_toStartOf	layout_alignStart(API 17)
layout_constraintEnd_toStartOf	layout_toStartOf(API 17)
layout_constraintEnd_toEndOf	layout_alignEnd(API 17)

　　相对于父布局的相对布局属性，CL的规则是：将父布局当做一个id=”parent”的对象来对待。

CL属性	RL属性
layout_constraintTop_toTopOf=”parent”	layout_alignParentTop=”true”
layout_constraintBottom_toBottomOf=”parent”	layout_alignParentBottom=”true”
layout_constraintLeft_toLeftOf=”parent”	layout_alignParentLeft=”true”
layout_constraintRight_toRightOf=”parent”	layout_alignParentRight=”true”
layout_constraintStart_toStartOf=”parent”	layout_alignParentStart=”true”
layout_constraintEnd_toEndOf=”parent”	layout_alignParentEnd=”true”
layout_constraintLeft_toLeftOf=”parent” layout_constraintRight_toRightOf=”parent”	layout_centerHorizontal=”true”
layout_constraintTop_toTopOf=”parent” layout_constraintBottom_toBottomOf=”parent”	layout_centerVertical=”true”
layout_constraintLeft_toLeftOf=”parent” layout_constraintRight_toRightOf=”parent” layout_constraintTop_toTopOf=”parent” layout_constraintBottom_toBottom=”parent”	layout_centerInParent=”true”

三、固定比例间距

　　在设置了各类属性居中属性的基础上，通过layout_constraintHorizontal_bias和layout_constraintVertical_bias两个属性，可以简单直观的完成间距比例的设置。

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

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

四、固定比例宽高

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


    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginLeft="100dp"
        android:layout_marginRight="100dp"
        android:background="@color/colorPrimary"
        app:layout_constraintDimensionRatio="H,4:3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>

　　Layout_width和layout_height都设置为0dp，0dp在CL布局中等同于MATCH_CONSTRANT，

　　MATCH_CONSTRANT是CL的一个新属性常量。在CL中，子View/ViewGroup无法使用match_parent属性。

　　MATCH_CONSTRAINT搭配不同的属性有不同的意义：

　　　　（1）设置layout_constraintDimensionRatio属性的情况下，代表该边长度由layout_constraintDimensionRatio动态调整；

　　　　（2）weighted chain中，代表该边长度由layout_constraintHorizontal_weight或layout_constraintVertical_weight动态调整;

　　　　（3）其他情况下，等同于match_parent，代表该边长度由各margin动态调整。

五、GoneMargin

　　layout_goneMarginStart, layout_goneMarginEnd, layout_goneMarginLeft, layout_goneMarginRight, layout_goneMarginTop, layout_goneMarginBottom。

　　layout_goneMargin系列是CL中新加入的属性。相对布局的两个空间，其中一方Visibility==Gone时，另外一方将会根据layout_goneMargin系列属性的值重新规划自己的间距。比较常用于在相对布局中保持各个控件的位置。

六、Chain

　　Chain是CL中新加入的控件与控件间的关系。组成chain的多个控件，可以在同一方向上更加方便的完成复杂的布局要求。

1.组成chain

　　多个控件组成chain需要满足以下条件：

　　　　（1）控件间的布局存在相互依赖的关系（你依赖我布局，我也依赖你布局）；

　　　　（2）两个以上的空间，相互依赖关系需要保持在同一个方向上（都是水平方向上的依赖：Left_toRightOf/Right_toLeftOf;或者都是垂直方向上的依赖：Top_toBottomOf/Bottom_toTopOf）;

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

    <TextView
        android:id="@+id/text_a"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintRight_toLeftOf="@id/text_b" />

    <TextView
        android:id="@+id/text_b"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        app:layout_constraintLeft_toRightOf="@id/text_a" />

    <TextView
        android:id="@+id/text_c"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="50dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintLeft_toRightOf="@id/text_b" />
</android.support.constraint.ConstraintLayout>

2.设置chain style

　　水平方向chain最左边的空间和垂直方向chain最顶端的空间被称为head chain。通过对head chain添加chainStyle属性，可以设置该条chain在水平或垂直方向上的chainStyle：

　　　　（1）layout_constraintHorizontal_chainStyle

　　　　（2）layout_constraintVertical_chainStyle

　　chainStyle属性一共有三种：spread、spread_inside、packed。在配合其他属性，最终可以组成5中chain style：

chain style	设置方式
Spread Chain	chainstyle=”spread”
Spread Inside Chain	chainStyle=”spread_inside”
Packed Chain	chainStyle=”packed”
Packed Chain with Bias	chainStyle=”packed” layout_constraintHorizontal_bias layout_constraintVertical_bias
Weighted Chain	chainStyle=”spread” layout_constraintHorizontal_weight layout_constraintVertical_weight layout_width=”0dp” layout_height=”0dp”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

    <TextView
        android:id="@+id/chain_a"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="0.33"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/chain_b" />

    <TextView
        android:id="@+id/chain_b"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        app:layout_constraintHorizontal_weight="0.33"
        app:layout_constraintLeft_toRightOf="@id/chain_a"
        app:layout_constraintRight_toLeftOf="@id/chain_c" />

    <TextView
        android:id="@+id/chain_c"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimaryDark"
        app:layout_constraintHorizontal_weight="0.33"
        app:layout_constraintLeft_toRightOf="@id/chain_b"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

　　　　（1）chain head设置chainStyle为spread；

　　　　（2）chain中空间设置了layout_constraintHorizontal_weight参数；

　　　　（3）chain中空间都需要将layout_weight设置为0dp;

　　除此之外，Weighted Chain还有以下特征：

　　　　（1）Weighted Chain中的控件也允许在chain方向上使用wrap_content自适应控件宽/高，且布局时优先满足设置为wrap_content的控件；

　　　　（2）Weighted Chain中的控件既不设置constraint_weight，也不在chain方向上将边设置为wrap_content，那么该控件将被隐藏；

　　　　（3）如果Weighted Chain中的空间在chain方向上设置了margin，margin的距离将计算入该控件实际占有的布局范围；

 

代码地址：https://github.com/ZhangMiao147/UseBaseViewDemo/tree/master/constraintlayoutdemo

参考文章：https://mp.weixin.qq.com/s/X01KpEbegR47Qnl9TmUd5w