轉自：Android ConstraintLayout詳解

1. 概述

在本篇文章中，你會學習到有關ConstraintLayout -- 一種構建於彈性Constraints（約束）系統的新型Android Layout。最終你將會在Android Studio中編輯與構建一個相對複雜的Layout。

收穫

• 新Layout Manager所使用的Constraints系統
• 建立Constraints來構建彈性高效的Layouts
• 新Layout編輯器的各種功能

需求

• Android Studio 2.2 preview
• Android 示例程式碼

2. 獲取示例程式碼

• 直接下載zip檔案

• 使用Git

$ git clone https://github.com/googlecodelabs/constraint-layout.git

3. 執行示例程式碼

1. 開啟Android Studio，選擇 File>New>Import Project，選擇步驟2下載的示例程式碼的資料夾constraint-layout-start。
2. 點選Gradle sync按鈕。
3. 在Project�面板內開啟 res/layout/activity_main_done.xml
4. 選擇Design
   選項顯示最終的layout編輯介面
5. 在編輯器左上角選擇Virtual Device to render the layout with為Nexus 5x
6. 完工

4. Constraints 系統概覽

Layout引擎使用Contraints指定每個widget來決定他們在layout中的位置。你可以使用Android Studio Layout編輯器介面來手動或者自動指定約束。要更好的理解他，需要我們瞭解一下他對一個選中的widget的基本控鍵。

Constraints

Constraints幫助你保持widgets對齊。你可以使用箭頭來決定各widgets的對齊規則。例如（�圖示 A），從button 2

左側控鍵設定一個constraint到button 1的右側控鍵意味著：button 2會放置於button 1右側56dp處

圖示 A

控鍵型別

圖示 B：不同型別的控鍵

• 調整尺寸控鍵 - 類似於其他設計/繪圖應用，該控鍵允許你調整widget尺寸

  

   

• 側約束控鍵 - 該控鍵讓你指定widget的位置。例如，你可以使用widget的左側控鍵到其他widget的右側控鍵相隔24dp。

  

   

• 基線約束控鍵 - 該控鍵幫助你對齊任意兩個widget的文字部分，與widget的大小無關。例如你有兩個不同尺寸的widget但是你想要他們的文字部分對齊。

  

   

---

《ConstraintLayout從入門到放棄》

太長；別讀

5. ConstraintLayout應用

一）開啟

現在，讓我們開始來構建你自己的Constraint Layout。

從左側導航欄開啟 res/layout/activity_main_start.xml。

• 載入constraint-layout依賴
  constraint-layout依賴構建在一個分離的支援庫裡，該依賴支援從Android2.3（Gingerbread）到最新的版本。這個專案在app/build.gradle裡已經包含了該依賴

dependencies {
  ...
  compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha2'
}

• **回到 res/layout/activity_main_start.xml **

  該layout已經有了一個空的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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

在編輯器底部轉換到Design選項

 

• 新增ImageView
  新增一個ImageView到layout。在編輯器內，找到ImageView拖到layout內。

 

ImageView一旦拖到layout中，UI會提示需要resource。constraint-layout-start已經包含了resources，請選擇@drawable/singaporeresource。
一旦選中ImageView，你可以點選並按住調整尺寸控鍵來調整圖片大小。

 

• 新增TextView
  找到TextView並拖到layout內。

  

  
  我們會看到一些警告，因為在ImageView以及TextView內沒有contentDescription屬性。內容描述（Content Description）屬性對於構建可訪問應用非常重要。讓我們為該屬性新增@string/dummy。
  在右側，Inspector面板可以改變已選擇widget的各種屬性。

1. 選擇ImageView並新增@string/dummy到contentDescription屬性
2. 在Inspector面板，你可以看到ImageView的其他屬性。修改scaleType為centerCrop。
3. 接著，我們選擇TextView，使用該面板修改text值為@string/singapore。

二）手動建立Constraints

建立一個約束，你需要在widget的某個控鍵上點選並按住，然後拖到兩一個widget的約束控鍵內。一旦顯示綠色，你就可以鬆手了最終約束就會被建立。

注意：該部分講有關手動建立約束的，需要將左上角的自動建立約束按鈕關閉

 

在開始之前，確保ImageView和TextView在layout內。我們的目標是在容器、ImageView以及TextView之間建立約束。

假設我們想要TextView置於ImageView下方。我們可以在TextView的頂部控鍵與ImageView的底部控鍵建立一個約束，如圖：

 

移除約束：移除某個約束只需點選指定約束的控鍵；移除全部約束需要點選如下按鈕：

 

下一步，建立ImageView跟容器頂部的約束

 

最後，建立ImageView左右兩側的約束

89f057b3a8ea3e0b.png

 

建立基線約束 - 連線widget的基線控鍵到另一個的基線

 

三）熟悉Inspector

在此部分，我們會了解一下Inspector。它在UI編輯器的右側。附帶有已選擇widget的各種相關屬性，而且還顯示了該檢視是如何對齊與約束的。

• 移除TextView
• 新增ImageView底部約束

此時,UI構建起如下圖：

 

以下部分描述了不同的元素和他們的使用方法：

Margins - widget的外圍上下左右為margins。你可以點選按鈕設定不同的值來改變margins。在上邊截圖中，margins設定為16dp

移除constraint - 在Inspector內點選連線widget與container的線，可以移除約束。當然也可以點選已設定約束的控鍵來移除。

相對於約束來放置widget - 當在一個widget有至少兩個相對的連線，比如說頂部和底部，或者左側和右側，然後就可以使用滑動條來調節widget在連結中的位置。你還可以改變螢幕方向來進一步調整方位。

 

控制widget內部尺寸 - Inspector內部的線讓你可以控制widget內部尺寸。

 

**Fixed** - 可以調整widget的寬度和高度

 

**AnySize** - 使得widget佔據所有可用的控鍵來滿足約束

**AnySize**應用之前

 

**AnySize**應用之後

**Wrap Content** - 含有text或者drawable的widget擴大到填滿整個容器

四）自動建立Constraints

Autoconnect自動建立widgets之間的連線。開始之前

• 開啟res/layout/activity_main_autoconnect.xml
• 開啟Autoconnect（譯註：小磁鐵圖示）

接下來，選中ImageView並且拖到layout的中心，如下圖所示：

 

下一步，下方的動圖展示了以下幾個步驟

 

10210fd273ea1a86.png

1. ImageView對齊頂部並使用Inspector（AnySize）來確保他擴充套件到兩側
2. 放置兩個button在右下角。使用Inspector面板來修改最右邊button的text為@string/upload以及左側改為@string/discard
3. 將一個TextView和一個Plain Text放到layout中。
4. 調整TextView和Plain Text為48dp。並自動建立約束。
5. 同樣的選中上傳button放置到右側。
6. 最後放置取消button離上傳button32dp的位置

五）使用Inference建立Constraints

（譯註：待更新）

---

FAQ: (感謝Little_Mango提供的問題)

1. 兄弟控制元件對齊方式只有top left bottom right，無x，y中心點對齊，這樣兩個View依然無法做到水平方向中點對齊。
   使用chains

2. 父子控制元件間寬高約束過於簡單，只有wrap_content，fixed，match，即包裹內容，匹配父容器，和絕對數值，無法做到類似子控制元件的寬度等於父控制元件的寬度的的1/4的需求。
   使用Guidelines（新版的指南好像沒有介紹）

3. 兄弟、父子之間寬高屬性之間無約束，比如A控制元件寬度等於螢幕寬度的1/4，A控制元件的高度等於自身的寬度。B控制元件的寬等於A控制元件的寬度，B控制元件的高度等於A控制元件的高度的1/2.
   a. 參考 2
   b. 使用ratios
   c. 參考 b

4. 不清楚是否能通過程式碼動態修改約束，如果不支援這種操作，那麼類似容器垂直方向圖片張數不一致這種需求也無法動態修改。
   使用 barriers

5. 這個佈局是否有佈局的動畫支援？如果沒有，那麼動畫如何修改？通過修改控制元件的height和width是否會和約束衝突？
   動畫支援

---

原文連結：Using ConstraintLayout to design your views

---

• 如有翻譯有誤或者不理解的地方，請評論指正
• 待更新的譯註之後會做進一步修改翻譯
• 翻譯：田浩浩
• 郵箱：[email protected]