還在用Android正經布局來寫頁面嗎?

點擊上方藍字關注 👆👆

來源：24K純帥

https://github.com/24Kshign/ConstraintLayoutTest

ConstraintLayout布局出來已經很久了，剛出來那會兒就想嘗試一下的，結果半天都沒適應，前兩天看到一篇ConstraintLayout實戰的文章，看完之後發現這布局賊雞兒好用啊，日常開發中的大多數布局使用它都可以完成，而且也不需要嵌套。

介紹

ConstraintLayout又稱約束布局，是谷歌在2016年開發者大會上推出的，之後在Android Studio上成為了默認布局，該布局能減少布局的層級嵌套，我們都知道，View嵌套的越多，在加載的過程中解析起來就越費時間，該布局幾乎能做到LinearLayout和RelativeLayout嵌套完成的任何布局，下面跟著一波小demo來深入了解谷歌推薦的ConstraintLayout。

用法簡介1、xxx_toyyyOf屬性

xxx是當前的控制項，yyy是指定控制項，這個指定控制項也可以是容器本身（parent）

ConstraintLayout中有以下多種這樣的屬性：

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_constraintStart_toEndOf

layout_constraintStart_toStartOf

layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf

參照上圖給出的解釋，以上屬性都可以這樣用，有點類似RelativeLayout中的toLeftOf，toRightOf，上面的屬性中還有一個關於Baseline的，我們通過另外一張圖來了解一下：

Baseline是控制項中文字的基準線，這裡可以理解為參照某個控制項中的文字底部對齊，來看看樣式：

如果不加基準線對齊的話，那麼ButtonA的位置就在容器的左上角。

2、設置margin邊距

邊距，和傳統的布局是一樣的用法，但是這裡要注意的是，必須要設置自己的相對位置（先要指定自己在容器中的位置，可以是相對容器的，也可以是相對某個控制項的），如果不設置的話，那麼設置margin是無效的，大家可以試試，在一個ConstraintLayout布局中放一個按鈕，除了邊距之外什麼都不設置，這樣是沒有效果的，因為你沒有在布局中給它設置相對位置。

3、隱藏空間設置邊距

ConstraintLayout中有以下多種這樣的屬性：

layout_goneMarginStart

layout_goneMarginEnd

layout_goneMarginLeft

layout_goneMarginTop

layout_goneMarginRight

layout_goneMarginBottom

平常我們在開發過程中會遇到這樣一個問題，當一個控制項被設置成gone之後，與之關聯的控制項的位置常常也會發生改變，來看看樣式：

平常我們寫標題欄的時候應該都遇到過右邊放兩個按鈕的情況，而且是可以控制顯示隱藏的，當最右邊的按鈕隱藏之後，左邊的按鈕也要距離右邊有一個邊距，這種情況下我們就可以使用上面這些屬性來配置布局。

4、居中和偏移

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

這個很好理解，設置與容器的左邊和右邊分別對齊，這樣的話就能讓控制項水平居中了，同理垂直居中和中心對齊也是這樣。可能有人會吐槽了，寫這麼多還不如我用LinearLayout和RelativeLayout寫一句代碼來的快呢？老鐵還真是個急性子，接著往下看。

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

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

下面來實現一個這樣的功能，讓一個控制項在距離左邊和距離右邊的比例是1:3，來看看正經寫法：

<LinearLayout>

    <View
       android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <Button
        android:layout_width="100dp"
       android:layout_height="match_parent" />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="3" />

</LinearLayout>

相信大多數老鐵都會這麼寫，那麼我們現在來看看不正經的寫法：

<android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/button"
        app:layout_constraintHorizontal_bias="0.33"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

看到這個是不是驚呆了，一行代碼就搞定了，簡直不要太簡潔。

5、CircleRadius角度定位（在版本1.1中加入）

官網給出的解釋是，你可以以角度和距離約束窗口小部件中心相對於另一個窗口小部件中心。可能有些人看不太懂，我也沒看懂（哈哈，LZ你是來搞笑的嗎），但是看官網給出的圖我大概明白是什麼意思了，簡單來說就是可以根據兩個控制項的中心來形成約束關係，然後可以通過設置角度來控制這個約束關係（還看不懂的話那就來實踐一把）

layout_constraintCircle表示相對某一指定控制項，上圖中表示相對ButtonA；layout_constraintCircleRadius表示該控制項的中心點到指定控制項的中心點的距離（兩點之間，直線最短）；layout_constraintCircleAngle表示該控制項的中心點在指定控制項垂直方向上的角度（範圍是0-360），具體看上圖中標示的。

6、尺寸約束

在ConstraintLayout布局中，你可以設置布局的最大和最小尺寸，而且你可通過三種方式來設置控制項的大小：

注意：match_parent官方不建議在ConstraintLayout布局中使用，可以通過設置MATCH_CONSTRAINT（真實數值是0dp）配合約束來定義布局

下面我們來看一個例子：

ButtonA是固定寬度且靠左，給ButtonB設置了約束，剛開始預期的是設置ButtonB的寬度慢慢增大，超過ButtonA之後不管設置多大都像ButtonC和ButtonD一樣，但是ButtonA卻把ButtonB覆蓋了，顯然這不是我們需要的，這時候MATCH_CONSTRAINT的作用就能體現出來了，怎麼理解這個MATCH_CONSTRAINT，我們可以理解成為了配合約束布局而代替了match_parent

7、設置寬高比例

在使用百分比布局時，有兩種形式可以設置：

8、Chains（鏈）

鏈條在同一方向上（水平或者垂直）為一組互相關聯的控制項作統一管理，並且鏈由鏈頭（鏈的第一個元素）設置的屬性控制，鏈頭是水平鏈的最左側的元素，是垂直鏈的最頂部的元素。我們來看看一些鏈的樣式：

我們只需要設置layout_constraintHorizontal_chainStyle或者layout_constraintVertical_chainStyle的屬性就好了，而這個屬性有以下幾種配置：

CHAIN_SPREAD模式：元素將展開（默認樣式）

加權鏈CHAIN_SPREAD模式：如果給元素的寬或者高設置了MATCH_CONSTRAINT(0dp)，它們將分割寬高方向上的可用空間

CHAIN_SPREAD_INSIDE模式：類似於SPREAD，但鏈的端點不會分散

`CHAIN_PACKED`模式：鏈條的元素將被捆綁在一起。然後，子項的水平或垂直偏差屬性將影響該鏈元素的定位

9、輔助布局Guildline

這是ConstraintLayout布局特有的功能，你可以用它來輔助你完成布局，類似於高中數學圖形學中的輔助線，只不過這條輔助線只有兩個方向，水平和垂直：

我們來看看Guildline的樣式（需要注意的是，輔助線是不可見的，只有在預覽的時候才能通過滑鼠選中可見）：

Guildline有三個常用的屬性，用來控制輔助線的位置：

layout_constraintGuide_begin：指定輔助線距離左邊或者頂部的距離

layout_constraintGuide_end：指定輔助線距離右邊或者底部的距離

`layout_constraintGuide_percent`：指定在父控制項中的寬度或高度的百分比

代碼

以上demo的代碼全都上傳至

Github：
https://github.com/24Kshign/ConstraintLayoutTest

最強布局解析，有興趣的童鞋可以自行下載看看。

-END-

資源推薦

向大家推薦一個南京大學的Python數據分析公開課，由淺入深，非常適合入門，每章都配有代碼和練習題！

課程大綱

視頻及課件B站：
https://www.bilibili.com/video/BV1Y7411o7JP/

  1. 掃描下方二維碼（非本號）

  2. 回復關鍵詞：P90

（建議複製關鍵詞）