本文講的是使用約束控件創(chuàng)建界面，

如果你是剛剛接觸約束控件——支持庫中與 Android Studio 2.2 可視化 UI 編輯器緊密結(jié)合的新布局——我建議首先觀看上面的介紹視頻或者瀏覽我們的代碼庫。

視頻和代碼庫簡(jiǎn)明扼要地介紹了布局編輯器中的一些處理方式、約束和 UI 控制的基本概念，了解這些有助于你快速在可見的方式下搭建界面。

本文中，我將著重講解最近在 Android Studio 2.3 (Beta) 中約束控件的新增內(nèi)容：鏈條和比率，同時(shí)也會(huì)寫一些普通約束控件中的一些建議和技巧。

鏈條

創(chuàng)建鏈條是一項(xiàng)新的特性，讓你能夠沿著一個(gè)坐標(biāo)軸（水平或垂直）布置組件，從概念上來看有點(diǎn)類似線性布局。在約束控件中的實(shí)現(xiàn)中，鏈條是一系列通過雙向連接聯(lián)系起來的組件。

要想在視圖編輯器中創(chuàng)建鏈條，你只需選擇目標(biāo)組件并右擊，點(diǎn)擊“Center views horizontally“（或“Center views vertically”）。

這就在組件之間建立了必不可少的關(guān)聯(lián)。此外，當(dāng)你選擇鏈條中任何一個(gè)元素時(shí)，都會(huì)出現(xiàn)一個(gè)新的按鈕，你可以在三種鏈條模式之間切換：分布式（Spread）、內(nèi)分布式（Spread Inside）和密集式（Packed）鏈條。

有兩個(gè)額外的技巧可以用來更方便地操作鏈條：

如果你創(chuàng)建了一個(gè)分布式或者內(nèi)分布式鏈條，并且所有的組件尺寸都被設(shè)置成 MATCH_CONSTRAINT（或者“0dp”），其余的鏈條空間將會(huì)根據(jù)在 layout_constraintHorizontal_weight 或則 layout_constraintVertical_weight 中定義的值平均分布。

如果你創(chuàng)建了一個(gè)密集式鏈條，你可以通過調(diào)整水平（或者垂直）焦點(diǎn)來使鏈條元素左右（或者上下）移動(dòng)。

比率

比率大致上能夠?qū)崿F(xiàn)和百分比布局相同的效果，IE 中可以通過設(shè)定比率來限制 View 的寬高，而不用在 ViewGroup 的層次上增加額外開銷。

在約束控件中為組件設(shè)置比率：

確保至少一個(gè)約束尺寸可變，也就是說，不允許設(shè)置為“Fixed”和“Warp Content”。

點(diǎn)擊左上角的“Toggle aspect ratio constraint”。

按照寬度：高度的格式輸入你想要的比率，比如：16:9 。

輔助線

輔助線是用來幫助你布置其他組件的可視的組件。它們?cè)谶\(yùn)行時(shí)并不會(huì)可見，但同樣可以用來添加約束，可以從下拉項(xiàng)中創(chuàng)建垂直或者水平的輔助線。

點(diǎn)擊選擇新添加的輔助線，拖動(dòng)到合適的位置。

點(diǎn)擊組件的頂部（或左部）標(biāo)志可以切換輔助線對(duì)其模式：固定距離的左/右（或者上/下）對(duì)齊模式和相對(duì)父元素的百分比寬/高對(duì)齊模式。

處理 View.GONE

與相對(duì)布局相比，在約束控件布局中你將能更好地控制組件的 View.GONE 可見性。最重要的一點(diǎn)，任何設(shè)置為 GONE 的組件，其尺寸和外邊距約束將縮小為零，但仍然參與約束的計(jì)算。

許多情況下，如圖所示的一系列通過約束聯(lián)系起來的組件只會(huì)在一個(gè)組件被設(shè)置為 GONE 時(shí)生效。

還有一個(gè)方法可以為約束綁定在 GONE 移除時(shí)的組件設(shè)置特定的外邊距，使用?layout_goneMarginStart?(…Top, …End, 和 …Bottom) 屬性來實(shí)現(xiàn)。

這樣可以處理更復(fù)雜的情況，正如上如所示，我們可以設(shè)置特定的組件消失而不用改變代碼。

不同類型的居中對(duì)齊

在約束控件布局的鏈條屬性中，我已經(jīng)提到過一種居中方式了。當(dāng)你選擇一組組件時(shí)，點(diǎn)擊“Center horizontally”（或者“center vertically”）來創(chuàng)建一個(gè)鏈條。

你也可以使用相同的選項(xiàng)，使一個(gè)組件居中對(duì)齊在其相鄰的組件中間：

?如果要忽略其他組件，在父元素內(nèi)居中對(duì)齊，使用“Center horizontally/vertically in parent”選項(xiàng)。需要注意的一點(diǎn)是，通常你會(huì)對(duì)一個(gè)單獨(dú)的元素使用這個(gè)選項(xiàng)，并且這不會(huì)創(chuàng)建鏈條。

有時(shí)，你需要兩個(gè)不同尺寸的組件中心對(duì)齊，不妨這樣：當(dāng)不同約束把一個(gè)組件拉向兩個(gè)不同的方向時(shí)，它會(huì)穩(wěn)定在兩個(gè)約束的中間位置（每個(gè)方向 50% 偏心距）。

我們可以使用相同的方法，通過設(shè)置兩個(gè)相同方式的關(guān)聯(lián)，使一個(gè)組件相對(duì)于另一個(gè)組件的一邊居中對(duì)齊。

使用 Space 實(shí)現(xiàn)負(fù)外邊距

約束控件布局中不支持負(fù)的外邊距，然而，有個(gè)小技巧可以使你獲得相同的效果，通過插入 Space（實(shí)質(zhì)上是一個(gè)空組件）并且設(shè)置尺寸為理想外邊距的大小。如下所示：

什么時(shí)候使用自動(dòng)生成

當(dāng)你在工具欄中選擇“自動(dòng)生成布局（Infer constraints）”命令時(shí)，編輯器會(huì)找出約束控件布局中缺少的組件約束，并且會(huì)自動(dòng)添加。它也可以從一個(gè)沒有任何約束的視圖開始設(shè)置，但由于很難創(chuàng)建一個(gè)完全正確的視圖，你可能會(huì)得到很混亂的結(jié)果。這也是我建議通過這兩種方式來使用約束界面：

首先是盡可能多地手動(dòng)創(chuàng)建約束，這樣你的布局能夠最大化地得到實(shí)現(xiàn)并且具有功能可靠。然后，點(diǎn)擊自動(dòng)生成來為一些沒有約束的組件創(chuàng)建約束，這樣能節(jié)省你一點(diǎn)工作量。

另一個(gè)方法就是，將組件置于編輯器中不創(chuàng)建任何約束，使用自動(dòng)生成命令，然后修改預(yù)覽設(shè)備的分辨率。查看有哪些尺寸和位置錯(cuò)誤的組件并修正這些約束，然后換一個(gè)分辨率重復(fù)操作。

這歸根到底取決于你的喜好，每個(gè)人為布局創(chuàng)建約束的方式各有千秋，當(dāng)然也包括有些人喜歡純手工地實(shí)現(xiàn)巧奪天工的布局。

不支持適應(yīng)父元素

使用 match_constraint（0 dp）來替代，并且可以根據(jù)意愿給父元素設(shè)置約束，配合正確的外邊距處理方式可以實(shí)現(xiàn)相同的效果，不應(yīng)在約束布局中使用“Match parent”。

原文發(fā)布時(shí)間為：2016年12月29日
本文來自云棲社區(qū)合作伙伴掘金，了解相關(guān)信息可以關(guān)注掘金網(wǎng)站。

總結(jié)

以上是生活随笔為你收集整理的使用约束控件创建界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。