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

作者：田浩浩_DockOne
鏈接：https://www.jianshu.com/p/a8b49ff64cd3
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。