title: ConstraintLayout 使用小結
date: 2017-09-19 12:18:12
tags: [Layout]
category: android

使用 ConstraintLayout 代替 RelativeLayout

兩者之間相似的屬性對應表：

在 ConstraintLayout 用一個 id=parent 的對象表示當前控件的父控件

實現空間相對父空間居中 (layout_centerInParent=”true”)

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

同時需要設置控件的固定寬高或者 wrap_content

當 View 設置成 wrap_content 的時候，View 和其父控件一樣大，于設置成 match_parent ,0dp 的結果一樣; TextView 設置成 wrap_content 正常。

居中實現方法2:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.5"

使用 ConstraintLayout 代替 LinearLayout

加權鏈 實現 weigth

鏈的默認行為是在可用空間中平均分配位置。 如果一個或多個元素使用MATCH_CONSTRAINT，它們將使用剩余的空白空間（在它們之間相等）

屬性 layout_constraintHorizontal_weight, layout_constraintVertical_weight 定義控件在剩余空間中能分到的位置。

demo

    <View
        android:id="@+id/chain_view_0"
        android:layout_width="40dp"
        android:background="@android:color/holo_green_dark"
        android:layout_height="40dp"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/chain_view_1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="2"
        />

    <View
        android:id="@+id/chain_view_1"
        android:layout_width="0dp"
        android:background="@color/colorPrimary"
        android:layout_height="40dp"

        app:layout_constraintLeft_toRightOf="@id/chain_view_0"
        app:layout_constraintRight_toLeftOf="@+id/chain_view_2"
        app:layout_constraintHorizontal_weight="1"/>


    <View
        android:id="@+id/chain_view_2"
        android:layout_width="0dp"
        android:background="@android:color/holo_purple"
        android:layout_height="40dp"

        app:layout_constraintLeft_toRightOf="@+id/chain_view_1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="1"/>

chain_weight

bias

通過 layout_constraintHorizontal_bias 和 layout_constraintVertical_bias 兩個屬性，可以簡單直觀的完成間距比例的設置。

設置控件 固定比例寬高

例子：

<!--layout_constraintDimensionRatio的H/W表示被動調整的是高(H)或是寬(W)-->

app:layout_constraintDimensionRatio="H,4:3"

按照寬高比4:3展示，寬為固定邊，高為被動邊

GoneMargin

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

其中一方Visibility == Gone時，另外一方將會根據layout_goneMargin系列屬性的值重新規劃自己的間距。

chain

chain 是 ConstraintLayout 中加入的控件與控件間的關系。組成 chain 的多個控件，可以在同一方向上更加方便的完成復雜的布局要求。

組成 chain

兩個控件組成 chain 需要滿足的條件：

1. 控件間的布局存在相互依賴關系（你依賴我布局，我也依賴你布局）
2. 兩個以上的控件，相互依賴關系需要保持在同一個方向上（都是水平方向上的依賴：Left_toRightOf / Right_toLeftOf；或者都是垂直方向上的依賴：Top_toBottomOf / Bottom_toTopOf）

設置 chain style

chain style

demo 1 chain style

    <View
        android:id="@+id/chain_view_0"
        android:layout_width="40dp"
        android:background="@android:color/holo_green_dark"
        android:layout_height="40dp"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/chain_view_1"
        app:layout_constraintHorizontal_chainStyle="spread"/>

    <View
        android:id="@+id/chain_view_1"
        android:layout_width="40dp"
        android:background="@color/colorPrimary"
        android:layout_height="40dp"

        app:layout_constraintLeft_toRightOf="@id/chain_view_0"
        app:layout_constraintRight_toLeftOf="@+id/chain_view_2"/>


    <View
        android:id="@+id/chain_view_2"
        android:layout_width="40dp"
        android:background="@android:color/holo_purple"
        android:layout_height="40dp"

        app:layout_constraintLeft_toRightOf="@+id/chain_view_1"
        app:layout_constraintRight_toRightOf="parent"/>

chain_style_spread

chain_style_spread_inside

chain_style_spread_packed

參考：

• https://mp.weixin.qq.com/s/X01KpEbegR47Qnl9TmUd5w