Android Material Design控件使用（一）——ConstraintLayout 約束布局

參考文章：
約束布局ConstraintLayout看這一篇就夠了
ConstraintLayout - 屬性篇

介紹

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

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

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

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

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

添加依賴

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

我使用的是Android Studio3.0.1版本，已經自動導入了，默認使用的就是這個布局

屬性及對應的方法

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

這里提一下，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

示例：

<?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:layout_marginStart 設置左邊的邊距

• android:layout_marginEnd

• android:layout_marginLeft

• android:layout_marginTop

• android:layout_marginRight

• android:layout_marginBottom

例如：

<?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的右邊即可

	<?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.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.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使用更佳

例子：

app:layout_constraintDimensionRatio

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

寬高比為3:1

	<Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="3:1"/>

Chain 鏈 屬性

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

由上圖，很好的知道了A與B的約束，A的左邊是父控件的左邊，右邊則是B，B的左邊是A，B的右邊的是父控件的右邊

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

• spread 元素將展開（默認）

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

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

剩下的兩種則是通過添加屬性實現的

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"/>