Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

我與bug不得不說的故事發表於2019-04-11
AndroidMaterial Design控制元件AI


本章節將分為兩個模組給大家推送，覺得不錯的可以關注下哦

介紹

Android ConstraintLayout是谷歌推出替代PrecentLayout的元件。

支援相對佈局、線性佈局、幀佈局，看來更像是FrameLayout 、LinearLayout、`RelativeLayout·三者的結合體，並且比這三者更強大的是實現了百分比佈局。

大家都知道安卓碎片嚴重，使用百分比適配，那麼將徹底解決適配問題

總結：我最近也是剛學，學完之後，發現這個佈局已經將上述的所有佈局的特點全部融合在一起了，使用起來簡單方便的不要不要的，就是學習的屬性有點多啊。

不過，多也是正常的，畢竟融合了五大布局的所有特點，學完這個佈局，各種介面UI都難不倒我們了

新增依賴

implementation 'com.android.support.constraint:constraint-layout:1.1.3'
複製程式碼

我使用的是Android Studio3.0.1版本，已經自動匯入了，預設使用的就是這個佈局

屬性及對應的方法

我們先了解一下一些基本的概念

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局
這裡提一下，start和left其實都是指控制元件的左邊，end和right都事指控制元件的右邊

基本屬性

注意，這裡的屬性都得使用名稱空間來才能使用
複製程式碼

寬高屬性與之前的layout相同，wrap_content和match_parent，但除此之外，還多出了一種，名為match contraint

實際上，這個多出來的相當於0dp，如果之前使用過LinearLayout的權重的話，應該對0dp有印象.

這裡，約束佈局應該是繼承了Linearlayout的特性，之後我們設定權重與Linearlayout的操作也是類似，具體的請往後面看，這可是實現了百分比佈局的強大布局。

屬性值為控制元件id

  • layout_constraintLeft_toLeftOf 當前控制元件的左邊依賴於屬性控制元件的左邊

  • layout_constraintLeft_toRightOf 當前控制元件的左邊依賴於屬性控制元件的右邊

  • layout_constraintRight_toLeftOf

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

示例：


Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"

    android:layout_height="match_parent">
    <Button
        android:id="@+id/btnA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    <Button
        android:id="@+id/btnB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
複製程式碼

A左邊依賴總佈局的左邊，頂部則是依賴總佈局的頂部，B則是左邊依賴於A的右邊，頂部依賴父佈局的頂部

其他的就不一一列舉了，舉一反三，挺容易的

mragin 邊距

只有在設定了依賴，之後設定邊距才會效果

這個屬性不需要使用app開頭，屬於原本的屬性

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

  • android:layout_marginStart 設定左邊的邊距

  • android:layout_marginEnd

  • android:layout_marginLeft

  • android:layout_marginTop

  • android:layout_marginRight

  • android:layout_marginBottom

例如：

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"

android:layout_height="match_parent">

<Button
    android:id="@+id/btnA"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="50dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>
<Button
    android:id="@+id/btnB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="60dp"
    android:text="B"
    app:layout_constraintStart_toEndOf="@id/btnA"/>
</android.support.constraint.ConstraintLayout>
複製程式碼

示例：

使控制元件B與A垂直對齊

B的左邊依賴A的左邊，B的右邊依賴A的右邊即可

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
    
        android:layout_height="match_parent">
    
        <Button
            android:id="@+id/btnA"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="124dp"
            android:layout_marginTop="16dp"
            android:text="A"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    
        <Button
            android:id="@+id/btnB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginTop="8dp"
            android:text="B"
            app:layout_constraintEnd_toEndOf="@+id/btnA"
            app:layout_constraintStart_toStartOf="@+id/btnA"
            app:layout_constraintTop_toBottomOf="@+id/btnA"/>
             </android.support.constraint.ConstraintLayout>
複製程式碼

輔助類或屬性使用

1. Barrier 屏障 控制元件

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

     <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="right"
        app:constraint_referenced_ids="TextView1,TextView2" />
        
複製程式碼

app:barrierDirection為屏障所在的位置，可設定的值有：bottom、end、left、right、start、top

app:constraint_referenced_ids為屏障引用的控制元件，可設定多個(用“,”隔開)

2. Gruop 組 控制元件

Group可以把多個控制元件歸為一組，方便隱藏或顯示一組控制元件，舉個例子：

      <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />
複製程式碼

3. Placeholder 佔位符 控制元件

設定好佔位符控制元件的位置，之後呼叫setContent，把指定id的控制元件放在佔位符的位置

app:content=

4. Guideline 輔助線 控制元件

可以使用這個控制元件達到百分比佈局的效果,或者是當前的控制元件沒有符合條件的參照物的情況使用

Guideline還有三個重要的屬性，每個Guideline只能指定其中一個：

  • layout_constraintGuide_begin，指定左側或頂部的固定距離，如100dp，在距離左側或者頂部100dp的位置會出現一條輔助線

  • layout_constraintGuide_end，指定右側或底部的固定距離，如30dp，在距離右側或底部30dp的位置會出現一條輔助線

  • layout_constraintGuide_percent，指定在父控制元件中的寬度或高度的百分比，如0.8，表示距離頂部或者左側的80%的距離。

  • android:orientation 設定垂直或者是水平

Guideline是隱藏的，不用我們進行多餘的設定，雖然外面在預覽皮膚可以死看到它的存在

例子：使一個按鈕的長度佔滿螢幕一半

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineBegin"
        app:layout_constraintGuide_percent="0.5"
        android:orientation="vertical"/>

    <Button
        android:text="Button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
        app:layout_constraintTop_toTopOf="parent" />
複製程式碼

Radio 比例 屬性

方便快捷調整控制元件的寬高比，結合Guideline使用更佳

例子：


Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局

app:layout_constraintDimensionRatio

想要寬度與總佈局一樣，但高度是寬度的三分之一

寬高比為3:1

    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="3:1"/>
        
        
複製程式碼

Chain 鏈 屬性

可以把這個當做成一個加強版的LinearLayout

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局
由上圖，很好的知道了A與B的約束，A的左邊是父控制元件的左邊，右邊則是B，B的左邊是A，B的右邊的是父控制元件的右邊

chainstyle有三種屬性，分別是spread,spread_inside,pack，效果如下圖

  • spread 元素將展開（預設）

  • spread_inside 元素展開，但鏈的端點不會展開

  • pack 鏈中的元素將包裹在一起。子控制元件的水平或垂直方向的偏置bias屬性會影響包裹中元素的位置

Android Material Design控制元件使用（一）——ConstraintLayout 約束佈局
剩下的兩種則是通過新增屬性實現的

weighted chain是在spread chain的基礎上，而packed chain with bias則是在weight chain的基礎上

style為spread的，使用layout_constraintHorizontal_weight或layout_constraintVertical_weight來設定weigh權重

style為pack的，使用layout_constraintHorizontal_bias或layout_constraintVertical_bias進行偏移設定，屬性值0-1，也是百分比，改第一個元素

這裡需要說明的是，除了水平，還可以是垂直排列，不過，不能通過屬性來更改，而是通過約束來更改,把左邊改為頂端，右邊改為底部

如果是水平的，使用屬性layout_constraintHorizontal_chainStyle進行chainstyle屬性的更改

垂直的則是使用layout_constraintVertical_chainStyle

例子：

三個按鈕平分寬度（只需要將寬度設定為0dp就可以達到目的）

    <Button
        android:id="@+id/btn"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintEnd_toStartOf="@id/btn1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>
    <Button
        android:id="@+id/btn1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@id/btn"
        app:layout_constraintEnd_toStartOf="@id/btn2"/>
    <Button
        android:id="@+id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@id/btn1"
        app:layout_constraintEnd_toEndOf="parent"/>
複製程式碼

總結：大概就是這樣的，有問題歡迎留言討論；


相關文章