簡書MarkDown支持有點問題，請跳轉到我博客查看該篇博客：http://weiyf.cn/2017/03/10/Build%20a%20Responsive%20UI%20with%20ConstraintLayout/

ConstraintLayout允許你使用平面view層次結構去創建一個大而復雜的布局(沒有嵌套的view groups)。它類似于RelativeLayout，其中所有的view都是根據兄弟views和父布局之間的關系來布局的，但是它比RelativeLayout更靈活，并且更容易與Android Studio的布局編輯器一起使用。

ConstraintLayout allows you to create large and complex layouts with a flat view hierarchy (no nested view groups). It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor.

ConstraintLayout的所有功能都可以從布局編輯器的可視化工具中直接獲得，因為布局API和布局編輯器是專為彼此構建的。因此，你可以通過更容易的拖放來代替編輯XML使用ConstraintLayout構建你的布局。

All the power of ConstraintLayout is available directly from the Layout Editor's visual tools, because the layout API and the Layout Editor were specially built for each other. So you can build your layout with ConstraintLayout entirely by drag-and-dropping instead of editing the XML.

<video poster="http://o6g3bmfdr.bkt.clouddn.com/Building%20interfaces%20with%20ConstraintLayout%20in%20Android%20Studio.mp4.jpg" controls preload="none" src="http://o6g3bmfdr.bkt.clouddn.com/Building%20interfaces%20with%20ConstraintLayout%20in%20Android%20Studio.mp4">
</video>

ConstraintLayout可在兼容Android Studio2.3(API level 9)及更高版本的API庫中使用。本頁提供了再Android Sutdio2.3或更高版本中使用ConstraintLayout構建布局的指南。如果你想了解有關布局編輯器本身的更多信息，請參閱Android Studio指南使用布局編輯器構建UI。

ConstraintLayout is available in an API library that's compatible with Android 2.3 (API level 9) and higher. This page provides a guide to building a layout with ConstraintLayout in Android Studio 2.3 or higher. If you'd like more information about the Layout Editor itself, see the Android Studio guide to Build a UI with Layout Editor.

要查看使用ConstraintLayout創建的各種布局，請查看GitHub上的約束布局示例項目

To see a variety of layouts you can create with ConstraintLayout, check out the Constraint Layout Examples project on GitHub.

約束布局概述(Constraints overview)

要在ConstraintLayout中定義view的位置，你必須為view至少添加一個水平和垂直的約束。每一個約束表示到另一個view，父布局，或者不可見的參考線的連接或者對齊。每個約束定義view沿垂直或水平軸的位置；因此沒衣蛾view必須對每一個軸至少有一個約束，但是通常需要更多是很必要的。

To define a view's position in ConstraintLayout, you must add at least one horizontal and one vertical constraint for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view's position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.

當你拖動一個view到布局編輯器中，它會停留在你放開它的地方，即使它沒有任何約束。然而，這只是為了更容易編輯；如果當你在設備上運行你的布局時，一個view沒有任何約束，則會在位置【0, 0】(左上角)繪制它。

When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).

在圖1，在布局編輯器上看起來不錯，但是在view C上沒有垂直約束。當這個布局在設備上繪制的時候，view C與view A的左邊緣和右邊緣水平對齊，但它會出現在屏幕的頂部，因為它沒有垂直約束。

In figure 1, the layout looks good in the editor, but there's no vertical constraint on view C. When this layout draws on a device, view C horizontally aligns with the left and right edges of view A, but appears at the top of the screen because it has no vertical constraint.

圖1.編輯器顯示A下面的viewC，但沒有垂直約束

圖2.viewC現在垂直限制在view A下方

雖然缺少約束，但不會導致編譯錯誤，布局編輯器會將缺少的約束作為一個錯誤顯示在工具欄中。要查看錯誤和其他警告，點擊 Show Warnings and Errors

Although a missing constraint won't cause a compilation error, the Layout Editor indicates missing constraints as an error in the toolbar. To view the errors and other warnings, click Show Warnings and Errors

. To help you avoid missing constraints, the Layout Editor can automatically add constraints for you with the Autoconnect and infer constraints features.

將ConstraintLayout添加到您的項目(Add ConstraintLayout to your project)

要在你的項目中使用ConstraintLayout，操作如下：

To use ConstraintLayout in your project, proceed as follows:

1. 確認你擁有最新版本的Constraint Layout庫。
2. 點擊 Tools > Android > SDK Manager。
3. 點擊 SDK Tools 選項卡。
4. 展開 Support Repository 然后檢查 ConstraintLayout For Android 和 Solver for ConstraintLayout。選中 Show Package Details 并記下你要下載的版本。(下面步驟需要)。
5. 點擊OK。
6. 將該庫作為依賴關系添加到模塊機的build.gradle文件中：

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

你下載的庫版本可能會更高，因此請確保此處指定的值與你第3步中的版本相匹配。

6. 在工具欄或者同步通知中，點擊 Sync Project with Gradle Files。

現在你已經準備好實用ConstraintLayout來構建布局了。

1. Ensure you have the latest Constraint Layout library:

1. Click Tools > Android > SDK Manager.
2. Click the SDK Tools tab.
3. Expand Support Repository and then check ConstraintLayout for Android and Solver for ConstraintLayout. Check Show Package Details and take note of the version you're downloading (you'll need this below).
4. Click OK.
5. Add the library as a dependency in your module-level build.gradle file:
`dependencies {`
    `compile 'com.android.support.constraint:constraint-layout:1.0.1'`
`}`
The library version you download may be higher, so be sure the value you specify here matches the version from step 3.
6. In the toolbar or sync notification, click Sync Project with Gradle Files.

Now you're ready to build your layout with ConstraintLayout

轉換布局(Convert a layout)

要將現有布局轉換為約束布局，請按照下列步驟操作：

1. 在Android Sutdio打開你的布局然后點擊在編輯器窗口底部的 Design 選項卡。
2. 在 Component Tree 窗口，右擊布局然后點擊 Convert layout to ConstraintLayout。

To convert an existing layout to a constraint layout, follow these steps:

1. Open your layout in Android Studio and click the Design tab at the bottom of the editor window.
2. In the Component Tree window, right-click the layout and click Convert layout to ConstraintLayout.

圖3.將布局轉換為ConstraintLayout的菜單

創建新的布局(Create a new layout)

要啟動新的約束布局文件，請按照下列步驟操作：

1. 在 Porject 窗口右擊模塊文件夾然后選擇 File > New > XML > Layout XML。
2. 為這個布局文件輸入一個名字和在** Root Tag** 輸入"android.support.constraint.ConstraintLayout"。
3. 點擊 Finish。

To start a new constraint layout file, follow these steps:

1. In the Project window, click the module folder and then select File > New > XML > Layout XML.
2. Enter a name for the layout file and enter "android.support.constraint.ConstraintLayout" for the Root Tag.
3. Click Finish

添加約束(Add a constraint)

通過將view從布局編輯器選項板中拖動到編輯器中開始。當你添加一個view到ConstraintLayout，它會顯示一個邊框，每個角上都有方形調整大小的手柄，每邊都有圓形的約束手柄。

Start by dragging a view from the Palette window into the editor. When you add a view in a ConstraintLayout, it displays a bounding box with square resizing handles on each corner and circular constraint handles on each side.

單擊view選中它，然后單擊并按住其中一個約束句柄，并將該線拖動到可用的定位點(另一個view的邊緣，布局的邊緣或者參考線)。當你釋放的時候，就會建立約束，使用默認的邊距來分隔兩個view。

Click the view to select it. Then click-and-hold one of the constraint handles and drag the line to an available anchor point (the edge of another view, the edge of the layout, or a guideline). When you release, the constraint is made, with a default margin separating the two views.

創建約束時，請記住以下規則：

• 每一個view必須至少有兩個約束：一個水平和一個垂直約束。
• 只能在共享的同一平面的約束句柄和錨點之間創建約束。因此，view的垂直平面(左側和右側)可以僅被約束到另一個垂直平面；并且基線只可以約束其他基線。
• 每個約束句柄只能用于一個約束，但你可以創建多個約束(從不同的view)到同一個定位點。

When creating constraints, remember the following rules:

• Every view must have at least two constraints: one horizontal and one vertical.
• You can create constraints only between a constraint handle and an anchor point that share the same plane. So a vertical plane (the left and right sides) of a view can be constrained only to another vertical plane; and baselines can constrain only to other baselines.
• Each constraint handle can be used for just one constraint, but you can create multiple constraints (from different views) to the same anchor point.

要刪除約束，選中view然后點擊約束句柄?；蛘咄ㄟ^選擇view，然后單擊 清除約束

To remove a constraint, select the view and then click the constraint handle. Or remove all the constraints by selecting the view and then clicking Clear Constraints

如果愛view上添加了相反的約束，約束線會變成像彈簧一樣扭曲來表示相反的力，就像視頻2。當view大小設置為“Fixed”或“Wrap Content”時，效果最明顯，在這種情況下view在約束之間居中。如果你想讓view擴展其大小以滿足約束，切換大小為“match constraints”；或者如果要保留當前大小，但移動view以使其不居中，調整約束偏差。

If you add opposing constraints on a view, the constraint lines become squiggly like a spring to indicate the opposing forces, as shown in video 2. The effect is most visible when the view size is set to "fixed" or "wrap content," in which case the view is centered between the constraints. If you instead want the view to stretch its size to meet the constraints, switch the size to "match constraints"; or if you want to keep the current size but move the view so that it is not centered, adjust the constraint bias.

你可以使用約束來實現不同類型的布局行為，如一下各章節所述。

You can use constraints to achieve different types of layout behavior, as described in the following sections.

<video loop autoplay src="http://o6g3bmfdr.bkt.clouddn.com/studio-constraint-first.mp4"></video>
視頻1.view的左側被約束到父布局的左側

<video loop autoplay src="http://o6g3bmfdr.bkt.clouddn.com/studio-constraint-second.mp4"></video>
視頻2.添加一個與現有約束相反的約束

父布局位置(Parent position)

將view的邊限制到布局的相應邊。

Constrain the side of a view to the corresponding edge of the layout.

在圖4，view的左側連接到父布局的左邊緣。你可以定義從邊緣到邊緣的距離。

In figure 4, the left side of the view is connected to the left edge of the parent layout. You can define the distance from the edge with margin.

圖4.對父布局的水平約束

規則位置(Order position)

定義兩個view的垂直或水平出現的規則。

Define the order of appearance for two views, either vertically or horizontally.

在圖5，B被約束為總是在A的右邊，并且C被約束在A的下面。然而，這些約束并不意味著對齊，所以B仍然可以上下移動。

In figure 5, B is constrained to always be to the right of A, and C is constrained below A. However, these constraints do not imply alignment, so B can still move up and down.

圖5.水平和垂直約束

對齊(Alignment)

將view的邊緣與另一個view的相同邊緣對齊。

Align the edge of a view to the same edge of another view.

在圖6，B的左側與A的左側對齊。如果你要對齊view的中心，請在兩側分別創建約束。

In figure 6, the left side of B is aligned to the left side of A. If you want to align the view centers, create a constraint on both sides.

你可以通過從約束想內拖動view來偏移對齊。例如，圖7示出了具有24dp偏移量對齊的B。偏移由約束view的邊距定義。

You can offset the alignment by dragging the view inward from the constraint. For example, figure 7 shows B with a 24dp offset alignment. The offset is defined by the constrained view's margin.

你還可以選擇所有要對齊的view，然后單擊工具欄中的 對齊

You can also select all the views you want to align, and then click Align

in the toolbar to select the alignment type.

基線對齊(Baseline alignment)

將view的文本基線與另一個view的文本基線對齊。

Align the text baseline of a view to the text baseline of another view.

在圖8，B的第一行與A中的文本對齊。

In figure 8, the first line of B is aligned with the text in A.

。然后點擊本文基線并將該線拖動到另外一個基線。

To create a baseline constraint, select the text view you want to constrain and then click the baseline button

that appears below the view. Then click the text baseline and drag the line to another baseline.

基線對齊約束

參考線約束(Constrain to a guideline)

你可以添加可以約束view的垂直或者水平的參考線，并且該參考線對于應用用戶而言是不可見的。你可以根據相對于布局邊緣的dp單位或者百分百在布局中定位參考線。

You can add a vertical or horizontal guideline to which you can constrain views, and the guideline will be invisible to app users. You can position the guideline within the layout based on either dp units or percent, relative to the layout's edge.

要創建參考線，請單擊工具欄中的 參考線

To create a guideline, click Guidelines

in the toolbar, and then click either Add Vertical Guideline or Add Horizontal Guideline.

拖動虛線來重新定位它，并單擊參考線邊緣處的圓圈來切換測量模式。

Drag the dotted line to reposition it and click the circle at the edge of the guideline to toggle the measurement mode.

view的參考線約束

調整約束偏差(Adjust the constraint bias)

當向view的兩側添加約束時(并且相同尺寸的view的大小為“Fixed”或“Wrap Content”)，默認情況下，view將在兩個約束之間居中，偏差為50%。你可以通過拖動“屬性”窗口中的偏移滑塊或拖動view來調整偏移，如視頻5所示。

When you add a constraint to both sides of a view (and the view size for the same dimension is either "fixed" or "wrap content"), the view becomes centered between the two constraints with a bias of 50% by default. You can adjust the bias by dragging the bias slider in the Properties window or by dragging the view, as shown in video 5.

<video loop autoplay src="http://o6g3bmfdr.bkt.clouddn.com/adjust-constraint-bias.mp4"></video>
視頻5.調整約束偏差

調整view大小(Adjust the view size)

你可以使用拐角手柄來調整view大小，但這樣會硬編碼大小，因此view不會調整為不同的內容或屏幕尺寸大小。要選擇不同的大小調整模式，請單擊view并打開編輯器右側的 屬性

You can use the corner handles to resize a view, but this hard codes the size so the view will not resize for different content or screen sizes. To select a different sizing mode, click a view and open the Properties

window on the right side of the editor.

在屬性窗口頂部附近是view檢查器，他包括多個布局屬性的控件，如圖10所示(這僅適用于約束布局中的view)。

Near the top of the Properties window is the view inspector, which includes controls for several layout properties, as shown in figure 10 (this is available only for views in a constraint layout).

你可以通過單擊圖10中標注<span class="callout">3</span>所示的符號來更改計算高度和寬度的方式。這些符號表示尺寸模式如下：

• Wrap Content: view根據需要進行擴展以適合其內容。
• Match Constraints: 該view根據需要擴展以滿足其在考慮邊際之后的約束的定義。但是，如果給定尺寸只有一個約束，則view將擴展以適合其內容。在高度或寬度上使用此模式也允許您設置尺寸比例。
• Fixed: 您可以在下面的文本框中指定特定的尺寸，也可以在編輯器中調整view大小。

You can change the way the height and width are calculated by clicking the symbols indicated with callout <span class="callout">3</span> in figure 10. These symbols represent the size mode as follows:

• Wrap Content: The view expands as needed to fit its contents.

• Match Constraints: The view expands as needed to meet the definition of its constraints after accounting for margins. However, if the given dimension has only one constraint, then the view expands to fit its contents. Using this mode on either the height or width also allows you to set a size ratio.

• Fixed: You specify a specific dimension in the text box below or by resizing the view in the editor.

要在這些設置之間切換，請單擊視圖檢查器中的符號。

To toggle between these settings, click the symbol in the view inspector.

注意：對于ConstraintLayout中任何view，不應使用match_parent。而是使用“match constraints”(0dp)。

Note: You should not use match_parent for any view in a ConstraintLayout. Instead use "match constraints" (0dp)

“屬性”窗口包括<span class="callout">1</span>大小比例，<span class="callout">2</span>刪除約束，<span class="callout">3</span>高度/寬度模式，<span class="callout">4</span>邊距和<span class="callout">5</span>約束偏差的控件。

將大小設置為比率(Set size as a ratio)

如果至少有一個view尺寸設置為“match constraints”(0dp)，則可以將view大小設置為比例，例如16:9。要啟用比率，請單擊“切換長寬比約束”(圖10中的編號<span class="callout">1</span>),然后在出現的輸入框中輸入 width：height 比例。

You can set the view size to a ratio such as 16:9 if at least one of the view dimensions is set to "match constraints" (0dp). To enable the ratio, click Toggle Aspect Ratio Constraint (callout 1 in figure 10), and then enter the width:height ratio in the input that appears.

如果寬度和高度都設置為match constraints，你可以單擊 切換長寬比約束 來選擇哪個尺寸基于另一個比率。視圖檢查器通過用實線鏈接相應的邊來指示設置為比率。

If both the width and height are set to match constraints, you can click Toggle Aspect Ratio Constraint to select which dimension is based on a ratio of the other. The view inspector indicates which is set as a ratio by connecting the corresponding edges with a solid line.

例如，如果你將兩邊設置為“match constraints”,點擊 切換長寬比約束 兩次來將寬度設置為高度的比率。現在整個尺寸由view的高度(其可以以任何方式定義)來決定，如圖11所示。

For example, if you set both sides to "match constraints", click Toggle Aspect Ratio Constraint twice to set the width be a ratio of the height. Now the entire size is dictated by the height of the view (which can be defined in any way) as shown in figure 11

圖11.view設置為16：9，寬度基于高度的比率

調整view邊距(Adjust the view margins)

，為添加到布局的每個view選擇默認邊距。你對默認邊距所做的任何更改僅適用于你之后添加的view。

To ensure that all your views are evenly spaced, click Margin in the toolbar to select the default margin for each view that you add to the layout. Any change you make to the default margin applies only to the views you add from then on.

您可以通過單擊表示每個約束的線上的數字(在圖10中，標注<span class="callout">4</span>顯示底部邊距設置為28dp)，在 屬性 窗口中控制每個view的邊距。

You can control the margin for each view in the Properties window by clicking the number on the line that represents each constraint (in figure 10, callout 4 shows the bottom margin is set to 28dp).

圖12.工具欄的邊距按鈕

該工具提供的所有邊距默認是8dp，以幫助你的view符合Material Design的8dp方形網格建議。

All margins offered by the tool are factors of 8dp to help your views align to Material Design's 8dp square grid recommendations.

用一個鏈控制線性組(Control linear groups with a chain)

鏈是用雙向位置約束彼此鏈接的一組view。例如，圖13示出了兩個view，它們都具有彼此的約束，從而創建水平鏈。

A chain is a group of views that are linked to each other with bi-directional position constraints. For example, figure 13 shows two views that both have a constraint to each other, thus creating a horizontal chain.

鏈允許您使用以下樣式水平或垂直分發一組view(如圖14所示)：

• <span class="callout">1</span> Spread: view均勻分布(在考慮邊距之后)。這是默認值。
• <span class="callout">2</span> Spread inside: 第一個和最后一個view被附加到鏈的每個端部上的約束，并且其余的是均勻分布的。
• <span class="callout">3</span> Weighted: 當鏈被設置為 Spread 或 Spread inside 時，您可以通過將一個或多個view設置為“match constraints”(0dp)來填充剩余空間。默認情況下，空間均勻分布在設置為“match constraints”的每個view之間，但是你可以使用layout_constraintHorizo??ntal_weight和layout_constraintVertical_weight屬性為每個view分配一個重要性權重。如果你熟悉layout_weight在一個linear layout，它們的工作方式是相同的。因此，具有最高權重值的view獲得最大的空間量;具有相同重量的view獲得相同的空間量。
• <span class="callout">4</span> Packed: view被打包在一起(在考慮邊距之后)。然后，您可以通過更改鏈的頭view偏差來調整整個鏈的偏差(左/右或上/下)。

A chain allows you to distribute a group of views horizontally or vertically with the following styles (as shown in figure 14):

• <span class="callout">1</span> Spread: The views are evenly distributed (after margins are accounted for). This is the default.
• <span class="callout">2</span> Spread inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed.
• <span class="callout">3</span> Weighted: When the chain is set to either spread or spread inside, you can fill the remaining space by setting one or more views to "match constraints" (0dp). By default, the space is evenly distributed between each view that's set to "match constraints," but you can assign a weight of importance to each view using the layout_constraintHorizontal_weight and layout_constraintVertical_weight attributes. If you're familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space; views that have the same weight get the same amount of space.
• <span class="callout">4</span> Packed: The views are packed together (after margins are accounted for). You can then adjust the whole chain's bias (left/right or up/down) by changing the chain's head view bias.

圖13.一個只有兩個view的鏈

圖14.每個鏈式的例子

鏈的“頭部”view(水平鏈中最左側的view和垂直鏈中最頂部的view)在XML中定義為鏈的樣式。但是，您可以通過選擇鏈中的任何view，然后單擊view下方顯示的鏈按鈕

The chain's "head" view (the left-most view in a horizontal chain and the top-most view in a vertical chain) defines the chain's style in XML. However, you can toggle between spread, spread inside, and packed by selecting any view in the chain and then clicking the chain button

that appears below the view.

要快速創建view鏈，全選它們，右鍵單擊其中一個view，然后選擇 Center Horizontally 或 Center Vertically，來分別創建水平或垂直鏈(參見視頻4)。

To create a chain of views quickly, select them all, right-click one of the views, and then select either Center Horizontally or Center Vertically, to create either a horizontal or vertical chain, respectively (see video 4).

使用鏈時要考慮的其他幾件事：

• view可以是水平和垂直鏈的一部分，使得構建靈活的網格布局變得容易。
• 只有鏈的每一端都被約束到同一軸上的另一個對象，鏈才能正常工作，如圖13所示。
• 雖然鏈的取向是垂直或水平的，無論使用哪一個一個方向都不會使該方向上的視圖對齊。因此，請確保包括其他約束，以實現鏈中每個view的正確位置，例如對齊約束。

A few other things to consider when using chains:

• A view can be a part of both a horizontal and a vertical chain, making it easy to build flexible grid layouts.
• A chain works properly only if each end of the chain is constrained to another object on the same axis, as shown in figure 13.
• Although the orientation of a chain is either vertical or horizontal, using one does not align the views in that direction. So be sure you include other constraints to achieve the proper position for each view in the chain, such as alignment constraints.

<video loop autoplay src="http://o6g3bmfdr.bkt.clouddn.com/constraint-chains.mp4"></video>
視頻4.從操作菜單創建鏈

自動創建約束(Automatically create constraints)

當您將它們放置在布局中時，不會向每個view添加約束，您可以將每個view移動到所需的位置，然后單擊 Infer Constraints

Instead of adding constraints to every view as you place them in the layout, you can move each view into the positions you desire, and then click Infer Constraints

to automatically create constraints.

Infer Constraints掃描布局以確定所有view的最有效的約束集合。它盡最大努力將view限制在當前位置，同時允許靈活性。你可能需要進行一些調整，以確保布局響應為你在不同的屏幕大小和方向想要的效果。

Infer Constraints scans the layout to determine the most effective set of constraints for all views. It makes a best effort to constrain the views to their current positions while allowing flexibility. You might need to make some adjustments to be sure the layout responds as you intend for different screen sizes and orientations.

自動連接是一個單獨的功能，可以打開或關閉。打開時，它會在您將每個view添加到布局時自動為其創建兩個或多個約束，但只有在適當時才將view約束到父布局。Autoconnect不會對布局中的其他views創建約束。

Autoconnect is a separate feature that is either on or off. When turned on, it automatically creates two or more constraints for each view as you add them to the layout, but only when appropriate to constrain the view to the parent layout. Autoconnect does not create constraints to other views in the layout.

默認情況下禁用Autoconnect。您可以通過在布局編輯器工具欄中單擊 Autoconnect

Autoconnect is disabled by default. You can enable it by clicking Turn on Autoconnect

in the Layout Editor toolbar.