ConstrainLayout 基礎教程2

這是我參與更文挑戰的第13天，活動詳情查看： 更文挑戰

特性詳解

Visibility behavior (可見性的表現)

ConstraintLayout對可見性被標記View.GONE的控件（後稱「GONE控件」）有特殊的處理。通常狀況下，GONG控件是不可見的，且再也不是佈局的一部分，可是在佈局計算上，ConstraintLayout與傳統佈局有一個很重要的區別：

• 傳統佈局下，GONE控件的尺寸會被認爲是0（當作點來處理）
• 在ConstraintLayout中，GONE控件尺寸仍然按其可見時的大小計算，可是其外邊距大小按0計算

這種特殊的行爲讓咱們在無需打亂佈局狀況下，在標記GONE控件的地方構建佈局(如上圖)，這樣的作法對於作簡單的佈局動畫頗有用。

注意:使用的邊距將是B在鏈接到A時定義的邊距（見上圖）。在某些狀況下，這可能不是您想要的餘量（例如A在其容器側面有100dp的邊距，B只有16dp到A，A標記爲已消失，B對容器的邊距爲16dp）。所以，您能夠指定在鏈接到標記爲已刪除的窗口小部件時要使用的備用邊距值

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

Dimensions constraints (尺寸約束)

Minimum and maximum dimensions on ConstraintLayout (最大最小尺寸)

ConstraintLayout自己能夠定義本身的最大/最小尺寸：

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

這些最小尺寸當ConstraintLayout被設置爲WRAP_CONTENT時有效。

Widgets dimension constraints (控件尺寸約束)

控件的尺寸能夠經過android:layout_width和android:layout_height來設置，有三種方式：

• 使用固定值(文字值如123dp或 Dimension reference)
• 使用WRAP_CONTENT
• 使用0dp（至關於MATCH_CONSTRAINT）

前兩種方式和其餘佈局的用法相同，最後一種是經過填充約束來從新設置控件的尺寸（如上圖 ，(a)是wrap_content，(b)是0dp。代碼案例以下：

<Button android:layout_width="0dp" // 這裏對寬度設置MATCH_CONSTRAINT，結合3、4兩行實現約束 android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>
複製代碼

若是設置了邊距，那麼外邊距就會在尺寸計算中被考慮進去 如上圖（c）中的0dp）

劃重點:0dp並非相似於之前的MATCH_PARENT,它match的是約束。 如上圖(b) 他的左右約束是parent,因此他設置0dp就鋪滿父寬度,可是(c),他的左邊有個約束爲margin,右邊約束到parent,因此這個0dp就是從左約束(那個margin值)到最右邊(parent)

**重點：**對於ConstraintLayout中包含的控件，不建議使用MATCH_PARENT。能夠經過使用MATCH_CONSTRAINT來定義相似的行爲，其中相應的左/右或上/下約束被設置爲parent。

Enforcing constraints(強制約束)

此屬性在1.1版本添加

在 1.1 版本以前，若是將控件的尺寸設置爲了 WRAP_CONTENT，那麼對控件設置約束（如：minWidth 等）是不起做用的。那麼強制約束（Enforcing constraints）的做用就是，在控件被設置 WRAP_CONTENT 的狀況下，使約束依然生效。

• app:layout_constrainedWidth=」true|false」
• app:layout_constrainedHeight=」true|false」

下面的例子演示了沒有設置強制約束和設置了強制約束的對比：

<ImageView android:id="@+id/imageViewA" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:src="@drawable/demo" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="96dp" app:layout_constrainedWidth="false" app:layout_constraintWidth_max="80dp" />

<ImageView android:id="@+id/imageViewB" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" android:src="@drawable/demo" app:layout_constraintTop_toBottomOf="@id/imageViewA" android:layout_marginTop="16dp" app:layout_constrainedWidth="true" app:layout_constraintWidth_max="80dp" />
複製代碼

如圖所示,一樣設置了最大寬度,imageViewB起做用,imageViewA沒有起做用

MATCH_CONSTRAINT dimensions

此屬性在1.1版本添加

當尺寸設置爲MATCH_CONSTRAINT(０dp,默認行爲是使結果大小佔用全部可用空間)時。1.1版本以後，還有幾個額外的修飾符：

• layout_constraintWidth_min and layout_constraintHeight_min : 指定當前控件的最小寬度或高度
• layout_constraintWidth_max and layout_constraintHeight_max : 指定當前控件的最大寬度或高度
• layout_constraintWidth_percent and layout_constraintHeight_percent : 指定當前控件的寬度或高度是父控件的百分之多少。可設置的值在 0 - 1 之間，1 就是 100%

<ImageView android:id="@+id/imageViewA" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

<ImageView android:id="@+id/imageViewB" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewA" app:layout_constraintWidth_percent="0.5" />

<ImageView android:id="@+id/imageViewC" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewB" app:layout_constraintWidth_max="100dp" app:layout_constraintHeight_min="80dp" />
複製代碼

A設置爲0dp,因此鋪滿整個寬度 B加了個50%的百分比,因此寬度爲一半 C限制了最大寬度和最小高度 效果以下圖

Min and Max:

爲min和max指示的值能夠是dp，也能夠是「wrap」(它將使用與WRAP_CONTENT相同的值)

Percent dimension:

To use percent, you need to set the following:

• The dimension should be set to MATCH_CONSTRAINT (0dp)
• The default should be set to percent app:layout_constraintWidth_default="percent" or app:layout_constraintHeight_default="percent"
• Then set the layout_constraintWidth_percent or layout_constraintHeight_percent attributes to a value between 0 and 1

Ratio (比例)

這裏的比例指的是寬高比，經過設置比例，讓寬高的其中一個隨另外一個變化。爲了實現比例，須要讓控件寬或高受約束，且尺寸設置爲0dp（也能夠是MATCH_CONSTRAINT），eg：

<ImageView android:id="@+id/imageViewA" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />

    <ImageView android:id="@+id/imageViewB" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:src="@drawable/demo" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewA" app:layout_constraintDimensionRatio="1:1"/>
複製代碼

上圖中，imageViewB的寬度知足受約束且設置爲0dp的條件，因此其尺寸會按照比例隨高度調整。

比例的設置有兩種格式：

• 寬度與高度的比，可理解爲受約束的一方尺寸:另外一方尺寸
• 浮點值，表示寬度和高度之間的比率

若是寬高都設置爲MATCH_CONSTRAINT（0dp），您也可使用比率。**在這種狀況下，系統設置知足全部約束的最大尺寸並保持指定的縱橫比。**要根據另外一個的尺寸約束一個特定邊，能夠預先附加W或H，分別約束寬度或高度。例如，若是一個尺寸受兩個目標約束（例如，寬度爲0dp而且以父對象爲中心）你能夠經過在比率前添加字母W（用於約束寬度）或H（用於約束高度）來指示哪一邊應該被約束，用逗號分隔 (谷歌翻譯)

<ImageView android:id="@+id/imageViewA" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintDimensionRatio="H,2:1"/>
    
    <ImageView android:id="@+id/imageViewB" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@id/imageViewA" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginTop="32dp" app:layout_constraintDimensionRatio="W,1:3" />
複製代碼

如上圖,imageViewA將按照2:1的寬高比設置按鈕的高度，而按鈕的寬度將匹配父項的約束(0dp即鋪滿)

imageViewB將按照1:3的寬高比設置按鈕的寬度，而按鈕的高度將匹配父項的約束(即鋪滿imageViewA下面32dp到parent底部)

參考

官方文檔

細細品讀！深刻淺出，官方文檔看ConstraintLayout

爲何ConstraintLayout代替其餘佈局?

Android 約束佈局（ConstraintLayout）1.1.0 版詳解

Android 約束佈局（ConstraintLayout）詳解

將來佈局之星——ConstraintLayout

ConstraintLayout之Barrier

ConstraintLayout 之 Guideline、Barrier、Chains和Groups

約束佈局（ConstraintLayout）1.1.2 版本的新特性

Constraint Layout 1.1.x帶來了哪些新東西？

ConstraintLayout 用法全解析