ConstraintLayout 約束布局

　　約束布局ConstraintLayout

　　這種布局方式出現已經有一段時間了，剛出現的時候一直以為這種布局只是針對拖拽使用的布局，最近在新項目里看到了這種布局，又重新學習了這種布局，才發現以前真的是圖樣圖森破啊，這種新的布局方式真的太好用了！

1.引入

使用之前需要添加這種布局的依賴

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

 

2.使用

2.1基本布局方式：

• 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_constraintBaseline_toBaselineOf

舉個栗子：

layout_constraintLeft_toLeftOf="parent"  //大概意思就是這個控件的左邊跟父控件的左邊對齊

layout_constraintRight_toLeftOf="xxx"  //該控件的右邊跟xxx的左邊對齊

就像這里栗子說的一樣，用這些約束方式就可以約束一個控件的具體位置

這里大家發現這種布局方式跟RelativeLayout是很相似的

 

2.2 圓形定位

layout_constraintCircle ：引用另一個小部件ID
layout_constraintCircleRadius ：到其他小部件中心的距離
layout_constraintCircleAngle ：小部件應該在哪個角度（度數，從0到360）

 

2.3 width設置為0的用法：

當設置width為0 的時候可以使該控件填充剩余空間，

那么我們想使用LL的權重特性該怎么辦呢？ConstraintLayout同樣也是支持的

layout_constraintHorizontal_weight="1"

約束布局里也提供了權重的方法約束寬度，在使用上一定要注意使用權重的控件一定要約束完整，注意：相互約束的控件有Visible差異並不影響約束的完整，使用權重的控件width一定要設置為0

 <Button
        android:id="@+id/btn_01"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="01"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/btn_02"
        app:layout_constraintTop_toBottomOf="@id/textView" />

    <Button
        android:id="@+id/btn_02"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="02"
        android:visibility="gone"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/btn_01"
        app:layout_constraintRight_toLeftOf="@id/btn_03"
        app:layout_constraintTop_toBottomOf="@id/textView" />

    <Button
        android:id="@+id/btn_03"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="03"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/btn_02"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textView" />

這里發現這種布局方式跟LinearLayout是有相似的地方

這里就是這種布局方式的優勢所在了

 

2.4 DimensionRatio比例屬性

app:layout_constraintDimensionRatio="W,16:9"
app:layout_constraintDimensionRatio="H,16:9"

這個功能就很牛逼了，過去我們想要指定控件的寬高比例只能在代碼中指定寬高，在約束布局中直接使用“尺寸比例”的參數可以直接設置比例

 

2.5 bias偏移屬性

app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintVertical_bias="0.9"

 

    <TextView
        android:id="@+id/textView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/theme"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9" />

這個屬性在合理約束的時候可以使控件實現偏移，中間為0.5，取值范圍為[0,1]

2.6 比例布局

app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.8"

在寬高設置為0的時候可以使用這兩個屬性直接設置控件的百分比

2.7 總結：

//基本定位
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_constraintCircle ：引用另一個小部件ID
layout_constraintCircleRadius ：到其他小部件中心的距離
layout_constraintCircleAngle ：小部件應該在哪個角度（度數，從0到360）

layout_constraintBaseline_toBaselineOf

# 與left,right類似
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

# margin不需要解釋
android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

#當2個view有相對位置的依賴關系,當其中一個view設置1位gone時,這個比較有意思,比方說假設A設置為gone，后，B需要距離父布局的左側200dp，
怎么辦？這時候，goneMargin屬性就派上用場啦，只要設置B的layout_goneMarginLeft=200dp即可。這樣，A不為gone的時候，
B距離A 為android:layout_marginLeft ，A為gone時，B距離父布局左側layout_goneMarginLeft200dp。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

layout_constraintHorizontal_bias
layout_constraintVertical_bias

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

layout_constraintVertical_weight

app:layout_constraintHeight_percent
app:layout_constraintWidth_percent

android:minWidth 設置布局的最小寬度
android:minHeight 設置布局的最小高度
android:maxWidth 設置布局的最大寬度
android:maxHeight 設置布局的最大高度

可以看出ConstraintLayout 是很全面的一種布局，集合了相對布局，線性布局的特點，同時能使用偏移和百分比的特性，所以省去了嵌套的麻煩，是布局達到了扁平化，省下了很多資源

 

by Jungle軼