簡(jiǎn)書(shū)MarkDown支持有點(diǎn)問(wèn)題，請(qǐng)?zhí)D(zhuǎn)到我博客查看該篇博客：http://weiyf.cn/2017/03/10/Build%20a%20Responsive%20UI%20with%20ConstraintLayout/

ConstraintLayout允許你使用平面view層次結(jié)構(gòu)去創(chuàng)建一個(gè)大而復(fù)雜的布局(沒(méi)有嵌套的view groups)。它類似于RelativeLayout，其中所有的view都是根據(jù)兄弟views和父布局之間的關(guān)系來(lái)布局的，但是它比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的所有功能都可以從布局編輯器的可視化工具中直接獲得，因?yàn)椴季諥PI和布局編輯器是專為彼此構(gòu)建的。因此，你可以通過(guò)更容易的拖放來(lái)代替編輯XML使用ConstraintLayout構(gòu)建你的布局。

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庫(kù)中使用。本頁(yè)提供了再Android Sutdio2.3或更高版本中使用ConstraintLayout構(gòu)建布局的指南。如果你想了解有關(guān)布局編輯器本身的更多信息，請(qǐng)參閱Android Studio指南使用布局編輯器構(gòu)建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創(chuàng)建的各種布局，請(qǐng)查看GitHub上的約束布局示例項(xiàng)目

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至少添加一個(gè)水平和垂直的約束。每一個(gè)約束表示到另一個(gè)view，父布局，或者不可見(jiàn)的參考線的連接或者對(duì)齊。每個(gè)約束定義view沿垂直或水平軸的位置；因此沒(méi)衣蛾view必須對(duì)每一個(gè)軸至少有一個(gè)約束，但是通常需要更多是很必要的。

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.

當(dāng)你拖動(dòng)一個(gè)view到布局編輯器中，它會(huì)停留在你放開(kāi)它的地方，即使它沒(méi)有任何約束。然而，這只是為了更容易編輯；如果當(dāng)你在設(shè)備上運(yùn)行你的布局時(shí)，一個(gè)view沒(méi)有任何約束，則會(huì)在位置【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，在布局編輯器上看起來(lái)不錯(cuò)，但是在view C上沒(méi)有垂直約束。當(dāng)這個(gè)布局在設(shè)備上繪制的時(shí)候，view C與view A的左邊緣和右邊緣水平對(duì)齊，但它會(huì)出現(xiàn)在屏幕的頂部，因?yàn)樗鼪](méi)有垂直約束。

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，但沒(méi)有垂直約束

圖2.viewC現(xiàn)在垂直限制在view A下方

雖然缺少約束，但不會(huì)導(dǎo)致編譯錯(cuò)誤，布局編輯器會(huì)將缺少的約束作為一個(gè)錯(cuò)誤顯示在工具欄中。要查看錯(cuò)誤和其他警告，點(diǎn)擊 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添加到您的項(xiàng)目(Add ConstraintLayout to your project)

要在你的項(xiàng)目中使用ConstraintLayout，操作如下：

To use ConstraintLayout in your project, proceed as follows:

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

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

你下載的庫(kù)版本可能會(huì)更高，因此請(qǐng)確保此處指定的值與你第3步中的版本相匹配。

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

現(xiàn)在你已經(jīng)準(zhǔn)備好實(shí)用ConstraintLayout來(lái)構(gòu)建布局了。

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

轉(zhuǎn)換布局(Convert a layout)

要將現(xiàn)有布局轉(zhuǎn)換為約束布局，請(qǐng)按照下列步驟操作：

1. 在Android Sutdio打開(kāi)你的布局然后點(diǎn)擊在編輯器窗口底部的 Design 選項(xiàng)卡。
2. 在 Component Tree 窗口，右擊布局然后點(diǎn)擊 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.將布局轉(zhuǎn)換為ConstraintLayout的菜單

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

要啟動(dòng)新的約束布局文件，請(qǐng)按照下列步驟操作：

1. 在 Porject 窗口右擊模塊文件夾然后選擇 File > New > XML > Layout XML。
2. 為這個(gè)布局文件輸入一個(gè)名字和在** Root Tag** 輸入"android.support.constraint.ConstraintLayout"。
3. 點(diǎn)擊 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)

通過(guò)將view從布局編輯器選項(xiàng)板中拖動(dòng)到編輯器中開(kāi)始。當(dāng)你添加一個(gè)view到ConstraintLayout，它會(huì)顯示一個(gè)邊框，每個(gè)角上都有方形調(diào)整大小的手柄，每邊都有圓形的約束手柄。

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選中它，然后單擊并按住其中一個(gè)約束句柄，并將該線拖動(dòng)到可用的定位點(diǎn)(另一個(gè)view的邊緣，布局的邊緣或者參考線)。當(dāng)你釋放的時(shí)候，就會(huì)建立約束，使用默認(rèn)的邊距來(lái)分隔兩個(gè)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.

創(chuàng)建約束時(shí)，請(qǐng)記住以下規(guī)則：

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

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.

要?jiǎng)h除約束，選中view然后點(diǎn)擊約束句柄。或者通過(guò)選擇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

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

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.

你可以使用約束來(lái)實(shí)現(xiàn)不同類型的布局行為，如一下各章節(jié)所述。

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的左側(cè)被約束到父布局的左側(cè)

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

父布局位置(Parent position)

將view的邊限制到布局的相應(yīng)邊。

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

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

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.對(duì)父布局的水平約束

規(guī)則位置(Order position)

定義兩個(gè)view的垂直或水平出現(xiàn)的規(guī)則。

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

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

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.水平和垂直約束

對(duì)齊(Alignment)

將view的邊緣與另一個(gè)view的相同邊緣對(duì)齊。

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

在圖6，B的左側(cè)與A的左側(cè)對(duì)齊。如果你要對(duì)齊view的中心，請(qǐng)?jiān)趦蓚?cè)分別創(chuàng)建約束。

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.

你可以通過(guò)從約束想內(nèi)拖動(dòng)view來(lái)偏移對(duì)齊。例如，圖7示出了具有24dp偏移量對(duì)齊的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.

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

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

in the toolbar to select the alignment type.

基線對(duì)齊(Baseline alignment)

將view的文本基線與另一個(gè)view的文本基線對(duì)齊。

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

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

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

。然后點(diǎn)擊本文基線并將該線拖動(dòng)到另外一個(gè)基線。

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.

基線對(duì)齊約束

參考線約束(Constrain to a guideline)

你可以添加可以約束view的垂直或者水平的參考線，并且該參考線對(duì)于應(yīng)用用戶而言是不可見(jiàn)的。你可以根據(jù)相對(duì)于布局邊緣的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.

要?jiǎng)?chuàng)建參考線，請(qǐng)單擊工具欄中的 參考線

To create a guideline, click Guidelines

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

拖動(dòng)虛線來(lái)重新定位它，并單擊參考線邊緣處的圓圈來(lái)切換測(cè)量模式。

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

view的參考線約束

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

當(dāng)向view的兩側(cè)添加約束時(shí)(并且相同尺寸的view的大小為“Fixed”或“Wrap Content”)，默認(rèn)情況下，view將在兩個(gè)約束之間居中，偏差為50%。你可以通過(guò)拖動(dòng)“屬性”窗口中的偏移滑塊或拖動(dòng)view來(lái)調(diào)整偏移，如視頻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.調(diào)整約束偏差

調(diào)整view大小(Adjust the view size)

你可以使用拐角手柄來(lái)調(diào)整view大小，但這樣會(huì)硬編碼大小，因此view不會(huì)調(diào)整為不同的內(nèi)容或屏幕尺寸大小。要選擇不同的大小調(diào)整模式，請(qǐng)單擊view并打開(kāi)編輯器右側(cè)的 屬性

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檢查器，他包括多個(gè)布局屬性的控件，如圖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).

你可以通過(guò)單擊圖10中標(biāo)注<span class="callout">3</span>所示的符號(hào)來(lái)更改計(jì)算高度和寬度的方式。這些符號(hào)表示尺寸模式如下：

• Wrap Content: view根據(jù)需要進(jìn)行擴(kuò)展以適合其內(nèi)容。
• Match Constraints: 該view根據(jù)需要擴(kuò)展以滿足其在考慮邊際之后的約束的定義。但是，如果給定尺寸只有一個(gè)約束，則view將擴(kuò)展以適合其內(nèi)容。在高度或?qū)挾壬鲜褂么四Ｊ揭苍试S您設(shè)置尺寸比例。
• Fixed: 您可以在下面的文本框中指定特定的尺寸，也可以在編輯器中調(diào)整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.

要在這些設(shè)置之間切換，請(qǐng)單擊視圖檢查器中的符號(hào)。

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

注意：對(duì)于ConstraintLayout中任何view，不應(yīng)使用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>約束偏差的控件。

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

如果至少有一個(gè)view尺寸設(shè)置為“match constraints”(0dp)，則可以將view大小設(shè)置為比例，例如16:9。要啟用比率，請(qǐng)單擊“切換長(zhǎng)寬比約束”(圖10中的編號(hào)<span class="callout">1</span>),然后在出現(xiàn)的輸入框中輸入 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.

如果寬度和高度都設(shè)置為match constraints，你可以單擊 切換長(zhǎng)寬比約束 來(lái)選擇哪個(gè)尺寸基于另一個(gè)比率。視圖檢查器通過(guò)用實(shí)線鏈接相應(yīng)的邊來(lái)指示設(shè)置為比率。

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.

例如，如果你將兩邊設(shè)置為“match constraints”,點(diǎn)擊 切換長(zhǎng)寬比約束 兩次來(lái)將寬度設(shè)置為高度的比率?，F(xiàn)在整個(gè)尺寸由view的高度(其可以以任何方式定義)來(lái)決定，如圖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設(shè)置為16：9，寬度基于高度的比率

調(diào)整view邊距(Adjust the view margins)

，為添加到布局的每個(gè)view選擇默認(rèn)邊距。你對(duì)默認(rèn)邊距所做的任何更改僅適用于你之后添加的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.

您可以通過(guò)單擊表示每個(gè)約束的線上的數(shù)字(在圖10中，標(biāo)注<span class="callout">4</span>顯示底部邊距設(shè)置為28dp)，在 屬性 窗口中控制每個(gè)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.工具欄的邊距按鈕

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

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

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

鏈?zhǔn)怯秒p向位置約束彼此鏈接的一組view。例如，圖13示出了兩個(gè)view，它們都具有彼此的約束，從而創(chuàng)建水平鏈。

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.

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

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

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.一個(gè)只有兩個(gè)view的鏈

圖14.每個(gè)鏈?zhǔn)降睦?/div>

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

，在 spread，spread inside 和 packed 之間切換。

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.

要快速創(chuàng)建view鏈，全選它們，右鍵單擊其中一個(gè)view，然后選擇 Center Horizontally 或 Center Vertically，來(lái)分別創(chuàng)建水平或垂直鏈(參見(jiàn)視頻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).

使用鏈時(shí)要考慮的其他幾件事：

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

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.從操作菜單創(chuàng)建鏈

自動(dòng)創(chuàng)建約束(Automatically create constraints)

當(dāng)您將它們放置在布局中時(shí)，不會(huì)向每個(gè)view添加約束，您可以將每個(gè)view移動(dòng)到所需的位置，然后單擊 Infer Constraints

以自動(dòng)創(chuàng)建約束。

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限制在當(dāng)前位置，同時(shí)允許靈活性。你可能需要進(jìn)行一些調(diào)整，以確保布局響應(yīng)為你在不同的屏幕大小和方向想要的效果。

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.

自動(dòng)連接是一個(gè)單獨(dú)的功能，可以打開(kāi)或關(guān)閉。打開(kāi)時(shí)，它會(huì)在您將每個(gè)view添加到布局時(shí)自動(dòng)為其創(chuàng)建兩個(gè)或多個(gè)約束，但只有在適當(dāng)時(shí)才將view約束到父布局。Autoconnect不會(huì)對(duì)布局中的其他views創(chuàng)建約束。

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.

默認(rèn)情況下禁用Autoconnect。您可以通過(guò)在布局編輯器工具欄中單擊 Autoconnect

來(lái)啟用它。

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

in the Layout Editor toolbar.