Android 隨筆—— ConstraintLayout 實戰經驗

QuincySx發表於2019-03-25
AndroidAI

這篇文章呢我們談一談，約束佈局常用的一些需求和坑

一、如果我想讓一個控制元件在父佈局裡左右填充怎麼辦（上下填充，上下左右都填充同理）
  1. match_parent 方式
<View
        android:id="@+id/a"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light" />
複製程式碼
  1. 相對佈局的方式（android:layout_width="0dp" 是關鍵）
<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
複製程式碼

ConstraintLayout 沒有 match_parent 所以推薦使用第二種方式，雖然看效果是沒啥事，但是官方的坑我表示不踩

image.png

二、替代百分比佈局

有時候想把控制元件按照比例填充父佈局，Android 螢幕適配這麼複雜，好像不容易實現 這時候約束佈局有兩個屬性 layout_constraintWidth_percent layout_constraintHeight_percent 這豈不是把一直不溫不火的百分比佈局給革命了

<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_percent="0.3" />
複製程式碼

image.png
我只放這麼一段程式碼大家應該就知道怎麼用了，我也就不多了說了。

預設是居中的如果想調整位置請結合 app:layout_constraintHorizontal_bias="0.3" 食用

三、控制元件寬度一定，我想左右居中顯示怎麼辦（上下居中同理）
<View
        android:id="@+id/a"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
複製程式碼

與左右填充相似，只不過寬度固定了而已，兩條繩子拉著一個控制元件居中

image.png

四、控制元件寬度一定，左右按百分比顯示怎麼辦，我就是不想居中（上下同理）
<View
        android:id="@+id/a"
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
複製程式碼

app:layout_constraintHorizontal_bias="0.3" 一個屬性就搞定了

image.png

上下使用 app:layout_constraintVertical_bias 來實現

五、我想兩個控制元件左右平分空間，對沒錯就是搶 LinearLayout 的飯碗（上下居中同理）
<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/b" />

<View
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintLeft_toRightOf="@+id/a"
        app:layout_constraintRight_toRightOf="parent" />
複製程式碼

image.png
因為有個約束鏈的存在所以這個稍微有點複雜，先來一張約束示意圖看一下，約束鏈下邊在講

image.png

六、我想兩個控制元件左右按比例平分空間，平分多沒有意思啊（上下同理）
<View
        android:id="@+id/a"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_red_light"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/b" />

<View
        android:id="@+id/b"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:background="@android:color/holo_blue_light"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/a"
        app:layout_constraintRight_toRightOf="parent" />
複製程式碼

上面的例子是 1：2 看寫法是不是和 LinearLayout 的權重寫法簡直一毛一樣

上下權重設定 app:layout_constraintVertical_weight="" 一定記得 android:layout_width="0dp" 是 0dp

image.png

坑點

  1. 寬高在需要自動控制長度的時候一定是設定為 0dp，不然沒什麼效果，甚至達不到預期，我也推薦約束佈局中只是用 0dp 、wrap_content 、固定的值。切記 match_parent 是沒啥卵用，雖然看著有效果，但是我也不敢碰，說多了都是淚。

  2. 切記只有約束過的邊設定 margin 才能看出效果，注意我說的是能看出，雖然設定了 margin 也是有意義的但是看不出來

  3. 平時我們摞控制元件的時候一定記得處理右邊和底部的約束，好多人控制元件顯示不全就是這個問題

相關文章