使用 ConstraintLayout 來設計 View

</android.support.constraint.ConstraintLayout></code></pre>

• 切換到（在編輯器窗口底部顯示為選項卡的）設計（Design）視圖。(好拗口)

• 為布局添加一個ImageView

  第一個任務是將ImageView添加到布局。 在設計窗口中，在面板上找到ImageView并將其拖動到布局中。

一旦ImageView被拖動到布局里，UI Builder會要求使用一個資源。 constraint-layout-start sample已經包括使代碼方便實現的資源。 繼續選擇@drawable/singapore資源。

選擇后，ImageView將出現在布局上，您可以單擊并按住角落以調整圖像大小，如“約束系統概述”中所述。

• 在布局里添加TextView

  現在，從面板里拖一個TextView到布局里。

我們在UI Builder中看到一些警告，這是由于缺少ImageView上的contentDescription屬性，以及對TextView硬編碼文本。 內容描述屬性對于構建可訪問應用程序很重要。

對于這個codelab，讓我們使用一個已經可用的資源@ string/dummy作為屬性。

在右側，“檢查器”窗格允許您更改所選窗口小部件的各種屬性。

1. 選擇ImageView并將@ string / dummy添加到其contentDescription屬性中。

2. 在“檢查器”窗格中，還可以查看ImageView的其他屬性。 出于此Codelab的目的，將scaleType更改為centerCrop。

3. 接下來，我們選擇TextView并使用Inspector窗格將TextView的文本值修改為@ string / singapore。

此時，我們在布局中有兩個視圖。 在下一節中，我們將了解如何在視圖之間創建約束。

前邊都是小菜一碟，接下來才是本文的重點，要點，新的知識點。

此處是高貴的分割線。

內容主要涵蓋了：

• 創建手動約束

• 使用Autoconnect創建約束。

• 使用推理創建約束。

6.創建手動約束

操作方法：要創建約束，您需要在給定的句柄上單擊并按住鼠標，然后將其拖動到另一個窗口小部件的約束句柄。 一旦錨點為綠色，您可以釋放鼠標以完成約束創建。

重要提示：UI Builder會自動啟動“自動連接”模式。 由于我們在本節學習手動約束，通過單擊操作禁用“自動連接”模式，或確保它已禁用。

在我們開始之前，確保我們在布局中有一個ImageView和一個TextView。 我們的目標是在ImageView，容器和布局上已經有的TextView控件之間創建約束。

讓我們假設我們想要TextView在我們的最終布局中的ImageView下面。 為了實現這一點，我們可以在TextView的頂部錨點和ImageView的底部錨點之間創建一個約束，如圖所示。

刪除一個約束

使用布局中顯示的icon刪除約束按鈕刪除所選窗口小部件上的 所有 約束 。

要刪除 單個 約束，請單擊設置約束的特定錨點。

如果您要刪除整個布局中的 所有約束 ，請使用菜單圖標。

就是這個icon

• 下一步是在ImageView的頂部錨點到布局的頂部之間創建一個約束。

  

  注意：在XML代碼中，ImageView有錯誤提示：

The view is not constrained vertically: at runtime it will jump to the left unless you add a vertical constraint.

也就是說，手動將ImageView拖動到中央是無效的，必須聲明一個垂直居中的約束。

最后，我們還可以使用左右約束將ImageView錨定在布局的中心。

上述操作導致了如下錯誤：

原因是沒有一個組件的ID是constraintLayout。

將文件中的根View，ConstraintLayout，的id設置為constraintLayout即可。

本節介紹了如何通過拖動連接線來創建窗口小部件之間的約束的基礎知識。 此時，您可以通過添加其他元素來瀏覽視圖和UI Builder。 在下一節中，我們將了解檢查器。

7. 熟悉 Inspector

在本節中，我們來看看視圖檢查器。 檢查器位于UI構建器的右側。 除了列出所選窗口小部件的各種屬性之外，它還顯示視圖如何對齊和任何約束。

繼續并從布局中刪除TextView。

在ImageView的底部錨點和容器底部之間創建約束。

UI構建器應如下所示。

檢查器在方塊中心顯示該ImageView。以下部分描述了各種元素及其用途。

邊距：在窗口小部件之外的左，右，頂部和底部是邊距。您可以通過單擊值并將其設置為不同的值來更改邊距。在上面的屏幕截圖中，邊距設置為16dp。

刪除約束：在檢查器中單擊將窗口小部件連接到容器的線，還可以選擇刪除約束。注意，刪除約束也可以通過點擊現有約束句柄來完成。

定位窗口小部件：當窗口小部件上至少有兩個相對的連接（例如頂部和底部，或左右）時，您可以看到一個滑塊，可以調整窗口小部件沿著軸。這也稱為水平或垂直偏置。您可以調整水平和垂直偏置并更改方向以查看偏置是否保持不變。或者，這也可以通過將小部件移動到期望的位置來實現。

繼續，將垂直偏壓改為75％，將水平偏壓改為75％。下面的圖片可以作為指南。

在安卓Studio 2.2版本上，Properties下方還有一個View all Properties的按鈕。可以看到更多屬性。

控制窗口小部件的內部尺寸：窗口小部件中的內部線條可讓您控制尺寸。 您可以單擊特定行以查看它的操作。

這是“檢查器”窗格中窗口小部件的放大視圖。 單擊檢查器窗格小部件的內部線將循環選擇下面提到的選項。

Fixed: 此選項允許您指定窗口小部件的寬度/高度。

AnySize: 這個選項讓部件占據所有可用的空間以滿足該約束。換而言之，這有點像match 約束。但是這與占據父View所有的空間的match_parent有所不同。

Wrap Content: 此選項僅擴展為用所包含的元素（如文本或drawable）填充窗口小部件。

AnySize獨立于容器。 如果ImageView被約束到一個按鈕，AnySize只會展開它，以適應按鈕。(圖文搭配閱讀可有深刻體會)

Figure A:在'AnySize'應用于其寬度 之前 顯示ImageView。

Figure B: 在'AnySize'應用于其寬度 之后 顯示ImageView。

要查看和編輯給定窗口小部件的所有其他屬性，請單擊屬性窗格右上角的icon，上述已經講過這些。

在本節中，我們探討了檢查器。 檢查器的目標是讓您在不離開UI構建器的情況下編輯所有屬性和約束。

8.使用自動連接創建約束

自動連接，顧名思義，自動創建小部件之間的連接。 理解Autoconnect功能嘗試創建到相鄰小部件的連接非常重要。

在開始使用本節之前，請確保：

• 從“項目”窗格中打開res / layout / activity_main_autoconnect.xml。 確保選擇“設計”選項卡。

• 自動連接已啟用

接下來，我們選擇ImageView，并通過拖動它在布局中居中，直到指南顯示。 在它居中后幾秒鐘，自動連接開始，并創建與容器的頂部，左側，底部和右側的約束，如下面的動畫所示。

這里我們在布局上有一個ImageView，我們看到Autoconnect如何創建約束。

以下是本節下一部分的步驟。為了指導，上面的動畫顯示了下面使用的步驟：

1. 對齊要放置在頂部的ImageView，并使用檢查器（AnySize）確保它展開以填充父級的寬度。
2. 在布局的右下角放置兩個按鈕。使用檢查器窗格將最右側按鈕的文本屬性更改為@ string / upload，將其左側的文本屬性更改為@ string / discard。
3. 從調色板中拖動TextView和純文本，并將它們放置在布局上。
   將TextView和純文本字段調整為相差48dp。幾秒鐘后，Autoconnect將為窗口小部件創建約束。
4. 同樣選擇上傳按鈕，并將其放在靠近我們的右邊距，我們讓Autoconnect做剩下的事情。
5. 最后，將discard按鈕32dp遠離upload按鈕。

作為練習，也移動TextView 48dp下面的ImageView。要做到這一點，選擇TextView并移動，直到它的48dp下面的ImageView。

重要的是要理解Autoconnect僅為當前移動的窗口小部件創建約束。

自動連接通過連接到最近的小部件來幫助您，這在許多情況下是有幫助的。有些情況下，Autoconnect不能實現所需的行為，開發人員應該使用手動約束或推理來構建他們的ConstraintLayout。推論將在代碼實驗室的下一步中討論。

9.使用Inference創建約束

Inference引擎通過在布局中添加的元素之間創建約束來幫助開發人員。 Inference創建的約束取決于添加到布局的元素的類型及其大小。

推理和自動連接有什么區別？

推理引擎在布局中的所有元素之間創建約束，而Autoconnect在相鄰元素之間創建約束。

自動連接的目的是創建約束來布置正在操作的窗口小部件，即其他窗口小部件不會被約束到您正在移動的窗口小部件，但是您移動的窗口小部件將被限制到其他窗口小部件。 這是一個重要的區別，因為它意味著自動連接不會修改您的當前約束。

setup

對于這一步，我們從layout/activity_main_inference.xml布局開始。 在設計視圖中打開布局文件。 默認情況下，此文件中的布局定義以下內容：

• @drawable/singapore和@drawable/ic_star的ImageViews。 ic_star圖像已經被約束為具有81％的垂直偏差。 您可以通過選擇包含ic_star的ImageView的垂直偏置，并檢查前面討論的檢查器。
• 大ImageView的底部錨點（@drawable/singapore）被約束到ic_star ImageView的底部錨點，邊距為16dp。
• 除了ImageView之外，還有TextViews for Camera，Settings和ImageView的字幕。

你會學到什么

• 使用菜單上的操作水平和垂直擴展視圖。
• 使用inference按鈕幫助使用inference創建約束。

了解UI Builder圖標操作

由于我們將使用一些這些選項，來看看UI Builder上可用的操作。

刪除所有約束

使用inference創建約束，inference引擎嘗試基于各種因素（例如窗口小部件的位置及其大小）找到并創建最佳連接。

水平擴展窗口小部件以滿足約束。

垂直擴展窗口小部件以滿足約束。

添加占用可用空間的TextView

我們的目標是為圖像的描述添加一個TextView。 我們已經有一個跨越多行的@string/singapore_description。

• 首先，從調色板中拖動一個TextView，并將其放在設置文本視圖下面。
• 使用操作水平擴展視圖以匹配準則。
• 使用操作垂直擴展以填充可用的垂直空間。

  

使用 Inference操作

既然你在布局中有TextView，你就可以看到操作中看到Inference。

單擊推斷constraints 操作以使用推理創建約束。

Inference引擎在布局中的所有視圖之間創建約束。 您的最終布局應如下所示：

創建約束后，您可以通過單擊UI Builder左上角的按鈕來修改“要渲染的虛擬設備”。 選擇其他設備（如Nexus 6P或Nexus 9），以查看布局是否正確呈現。

您現在已經看到了使用約束系統的全部范圍：使用Inference引擎創建手動約束，使用自動連接的約束和約束。

自動連接和推理幫助您通過布局引擎找出如何為您的UI的各種元素創建約束。 然后，您可以自由地進一步修改由自動連接或推理引擎創建的約束。

來自：http://www.jianshu.com/p/7cd35953c422