翻譯By Leelion6。關(guān)于 ConstraintLayout 的文章其實(shí)已經(jīng)不少了，不過看到這篇文章寫的很有趣拙毫，以及在翻譯的過程中，感受到了不同文化環(huán)境下棺禾，寫作思維的不同缀蹄。最關(guān)鍵的是，這篇文章的內(nèi)容很細(xì)致膘婶，對(duì)初學(xué)者比較友好缺前，所以翻譯過來以供需要的開發(fā)者去學(xué)習(xí)。如果需要進(jìn)階的用法歡迎去看郭霖等大神更深入一些的相關(guān)文章悬襟。
在本教程中衅码，你將會(huì)使用
ConstraintLayout從頭開始構(gòu)建一個(gè)登錄界面，從中學(xué)習(xí)創(chuàng)建Android 視圖相關(guān)的基礎(chǔ)知識(shí)脊岳。
作者：Fuad Kamal
原文鏈接：https://www.raywenderlich.com/9193-constraintlayout-tutorial-for-android-getting-started
所需材料及源碼下載：https://koenig-media.raywenderlich.com/uploads/2019/01/RazeGalactic-1.zip
發(fā)布日期：2019年1月30日
一款優(yōu)秀的Android應(yīng)用程序逝段，需要的不僅僅是美觀的UI界面垛玻，同時(shí)還要有良好的性能表現(xiàn)。在繪制頁面的時(shí)候奶躯，你需要把控視圖在用戶屏幕上的何處出現(xiàn)帚桩，以及它出現(xiàn)的方式。
Android提供了多種布局類型嘹黔，這些布局中確定子View的方式都是不同的朗儒。所有布局都來自ViewGroup類。
構(gòu)建Android UI常用的布局有FrameLayout, LinearLayout 和RelativeLayout.
這些布局易于使用参淹，但當(dāng)視圖結(jié)構(gòu)變得復(fù)雜時(shí)醉锄，它們每個(gè)都有其局限性和一些性能問題：
-
FrameLayout只能通過設(shè)置相對(duì)于父View的Gravity屬性來定位子View -
LinearLayout不允許各View相互重疊。大多數(shù)情況下浙值，你必須使用多個(gè)LinearLayout進(jìn)行嵌套 -
RelativeLayout需要的性能較多恳不，因?yàn)樗偸菚?huì)做兩次布局測(cè)量
將包含 layout_weight屬性的 LinearLayout 同 RelativeLayout一起嵌套使用，將會(huì)指數(shù)級(jí)地增加布局性能成本开呐。這時(shí)就需要 ConstraintLayout 約束布局來進(jìn)行拯救了烟勋。
在較新版本的Android Studio中，ConstraintLayout已經(jīng)作為默認(rèn)布局存在了筐付，并且提供了許多放置對(duì)象的方法：可以相對(duì)于它們的容器本身進(jìn)行約束卵惦、相對(duì)于其他對(duì)象約束或者彼此之間進(jìn)行約束、以及相對(duì)于你自己創(chuàng)建的guileline(輔助線)進(jìn)行約束瓦戚。這些方法可以讓你在同一層次中創(chuàng)建大型沮尿、復(fù)雜、動(dòng)態(tài)和響應(yīng)式的視圖较解，甚至還能支持動(dòng)畫畜疾！
Raze Galactic - 一款星際旅行應(yīng)用程序
您可以使用該應(yīng)用程序預(yù)定行星之間的旅行，計(jì)劃周末在空間站的度假印衔，并在您抵達(dá)后預(yù)定月球車啡捶。
在本教程中，你將通過從頭開始構(gòu)建星際旅行應(yīng)用程序的登錄界面UI奸焙，以了解ConstraintLayout的基本功能瞎暑。
在此過程中，你將學(xué)習(xí)：
- 如何添加和刪除約束
- 如何在界面上相對(duì)于其他元素動(dòng)態(tài)定位UI元素
注意：本教程假設(shè)你熟悉 Android 和 Android Studio 的基礎(chǔ)知識(shí)与帆。如果你不熟悉 Android 開發(fā)了赌，請(qǐng)先查看我們的 Android入門教程 系列。
入門
打開Android Studio 3.2.1或更高版本鲤桥，通過從啟動(dòng)界面選擇 Start a new Android Studio project 來創(chuàng)建新的Android Studio項(xiàng)目揍拆。
在下一個(gè)界面中，輸入 Raze Galactic 作為 Application name (應(yīng)用程序名稱）茶凳。
對(duì)于 Company domain (公司域名)嫂拴，你可以輸入任意你喜歡的內(nèi)容播揪。該示例使用 raywenderlich.com 。
對(duì)于 Project location (項(xiàng)目位置)筒狠，請(qǐng)選擇計(jì)算機(jī)上對(duì)你來說有意義的地址猪狈，并確保地址路徑中沒有空格。你可以點(diǎn)擊項(xiàng)目位置字段右側(cè)的省略號(hào) ... 以直接選擇計(jì)算機(jī)上的目錄辩恼。
最后雇庙，確保已選中 Include Kotlin support (添加Kotlin語言支持) 并點(diǎn)擊 Next (下一步) 按鈕。
譯者注：勾選Kotlin語言支持在本文章中并非必要灶伊，后續(xù)的內(nèi)容沒有直接使用到Kotilin疆前，所以如果你是純粹的JAVA語言開發(fā)者或者不想使用Kotlin，這里不勾選也完全OK聘萨。
在接下來的界面中竹椒，進(jìn)行Android設(shè)備選擇，你需要選擇 Phone and Tablet (手機(jī)和平板電腦)米辐，然后選擇 API 28: Android 9.0 (Pie) 并點(diǎn)擊Next胸完。
譯者注：API部分可以按自己習(xí)慣選擇，不一定非要到Android9.0這么高的版本翘贮。
在“Add an Activity to Mobile” (為移動(dòng)設(shè)備添加活動(dòng)) 界面赊窥，選擇 Empty Activity (空活動(dòng))。在之后你將向這個(gè)空活動(dòng)中添加UI元素狸页，以了解Android中的布局操作锨能。
接下來———你猜對(duì)了———點(diǎn)擊Next！
在最后一個(gè)向?qū)ы摚?strong>Configure Activity(配置活動(dòng)),保留所有默認(rèn)配置肴捉，需要按Finish即可完成項(xiàng)目配置腹侣。
檢查ConstraintLayout版本
在開始創(chuàng)建新布局之前叔收，你需要檢查ConstraintLayout是否需要版本更新齿穗。
你可以在app模塊的構(gòu)建Gradle文件中找到此信息。在Andoird Studio中饺律，打開 app ? build.gradle 并查看其中的 dependencies { … }部分窃页。
在各種構(gòu)建依賴項(xiàng)中，你應(yīng)該能找到 implementation 'com.android.support.constraint:constraint-layout:x'复濒，其中x是項(xiàng)目中ConstraintLayout所使用的版本脖卖。
要完成本教程，你需要ConstraintLayout 1.1.3或更高版本巧颈。為了確保你擁有最新版本的ConstraintLayout庫畦木，請(qǐng)從菜單中選擇 Tools ? SDK Manager 。
單擊 SDK Tools (SDK工具) 選項(xiàng)卡砸泛，在 Support Repository (支持的庫) 下查看 ConstraintLayout for Android 十籍，如果顯示 installed (已安裝)蛆封，則表示你使用的是最新版本
接下來挑胸，選中名為 Show Package Details (顯示包詳情) 的復(fù)選框晦款，以查看項(xiàng)目中包含的庫的版本，Gradle文件中的版本號(hào)需要與 SDK manager (SDK 管理器) 中安裝的版本相匹配收厨。
通過配置 Android Studio 的設(shè)計(jì)界面以實(shí)現(xiàn)高效的約束布局開發(fā)
在繼續(xù)學(xué)習(xí)本教程之前围俘，請(qǐng)?jiān)O(shè)置Android Studio視圖顯示方式砸讳，以便更輕松地添加和查看約束以及其相關(guān)元素。
首先打開 activity_main.xml 界牡，然后單擊工具欄中的 Select Design Surface (選擇設(shè)計(jì)界面) 圖標(biāo)簿寂，并選擇 Design + Blueprint (設(shè)計(jì)+藍(lán)圖)。
現(xiàn)在你在工作時(shí)就能看到設(shè)計(jì)預(yù)覽界面旁邊的藍(lán)圖界面了宿亡。
藍(lán)圖視圖可以幫助你更清晰地查看約束和 guidelines (輔助線)陶耍，而不會(huì)被內(nèi)容或背景分散注意力。
在開發(fā) APP UI 時(shí)她混，你可以在代碼視圖 (Text tab) 和設(shè)計(jì)視圖 (Design tab) 之間來回切換烈钞。
代碼視圖允許你查看和編輯布局背后的XML，而設(shè)計(jì)視圖對(duì)于可視化操作UI元素非常有用坤按。設(shè)計(jì)視圖還提供了 Component Tree (組件樹) , 它能讓你查看和選擇節(jié)目中存在的所有UI元素毯欣。
當(dāng)你處于代碼視圖中，能夠看到視覺預(yù)覽和藍(lán)圖是很有用的臭脓。這樣酗钞，當(dāng)你在預(yù)覽界面中選擇任何元素時(shí)，XML中相應(yīng)的代碼塊將變成高亮顯示来累。
如果你在代碼視圖中沒有看到預(yù)覽界面砚作，請(qǐng)單擊右側(cè)的 Preview (預(yù)覽) 選項(xiàng)卡。
從頭開始創(chuàng)建新的ConstraintLayout
對(duì)于接下來的這一步嘹锁，請(qǐng)打開 activity_main.xml 并切換到代碼視圖以查看該文件的源代碼：
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
請(qǐng)注意葫录，此布局的默認(rèn)根元素是android.support.constraint.ConstraintLayout。另外领猾，帶有 “Hello World米同！” 文本的TextView元素已經(jīng)有了一些約束屬性，例如app:layout_constraintBottom_toBottomOf="parent"摔竿，它的作用是將此視圖的底部約束到其父容器的底部面粮。
在相對(duì)其父容器頂部、底部继低、左側(cè)還有右側(cè)都約束后熬苍，包含 “Hello World！”的 TextView便處于了屏幕的中心袁翁。
切換到設(shè)計(jì)視圖并將鼠標(biāo)光標(biāo)移到包含 “Hello World柴底！” 的TextView上钱磅， 可以看到有四條波浪線將TextView連接到其父容器上，這些線表示TextView已經(jīng)應(yīng)用了約束規(guī)則似枕。
如果沒有出現(xiàn)這些線盖淡，請(qǐng)單擊TextView，然后它們就會(huì)出現(xiàn)凿歼。如果已選中 Show Constraints (顯示約束) 視圖選項(xiàng)褪迟，則無需使用鼠標(biāo)光標(biāo)懸停或選擇任何視圖答憔，就可以看到所有約束味赃。
向APP中添加圖像
對(duì)于下一步，你將需要在本教程開頭的應(yīng)用程序屏幕截圖中看到的火箭圖像虐拓。使用教程開頭的“ 下載材質(zhì)”按鈕下載本教程的材料心俗，或者點(diǎn)此下載。你可以在 RazeGalactic-starter 文件夾中找到 track_icon.png 蓉驹。
獲取 track_icon.png 并將其添加到項(xiàng)目的 drawable 文件夾中城榛。您可以通過在Mac上使用 command-C 或在Windows上使用 control-C 進(jìn)行復(fù)制，然后右鍵單擊Android項(xiàng)目中的 drawable 文件夾并使用Mac上的 command-V 或Windows上的 control-V 粘貼圖像到項(xiàng)目中态兴。
您可以將UI元素從 Palette (調(diào)色板) 拖放到設(shè)計(jì)界面中狠持。如果沒有看到 Palette ，請(qǐng)單擊垂直 Palette 選項(xiàng)卡圖標(biāo)瞻润。
刪除“Hello World喘垂！”，然后將以下UI元素拖到 Palette 中的視圖中：
-
1個(gè)
ImageView, 提示選擇圖像時(shí)選擇火箭圖像绍撞。image 3個(gè)
Button3個(gè)
TextView
更改UI元素的文本并將其拖動(dòng)到屏幕周圍正勒，以使它們看起來像本教程開頭的最終布局預(yù)覽。不要過分在意視圖的尺寸傻铣、間距或?qū)R的精度章贞。
接下來，你需要添加android:textAppearance="@style/TextAppearance.AppCompat.Headline"到 Raze Galactic TextView以獲得合適的樣式矾柜。
請(qǐng)注意阱驾，當(dāng)你在屏幕上拖動(dòng)視圖時(shí)，這些小對(duì)齊線是能幫助到你的怪蔑，這些線條可以很容易地將視圖們相互排列。
測(cè)試視圖放置的位置
現(xiàn)在丧荐，構(gòu)建并運(yùn)行你的應(yīng)用程序缆瓣。
天了嚕！視圖沒有按你在設(shè)計(jì)視圖中分配好的位置排列虹统！一切都在屏幕的左上角蜷縮著弓坞，這是腫么回事隧甚？
嗯..好吧，Android得到如何放置UI元素的這部分信息渡冻，因?yàn)槟闾砑拥囊晥D沒有任何已定義的約束戚扳。所以你需要解決這個(gè)問題。
回到Android Studio族吻，可以看到 Component Tree (組件樹) 中的每個(gè)新視圖現(xiàn)在都有一系列錯(cuò)誤帽借。要查看錯(cuò)誤的完整文本，請(qǐng)單擊Component Tree (組件樹)中的紅色感嘆號(hào)超歌。
錯(cuò)誤如下：
此視圖不受約束砍艾。它僅包含在剛添加時(shí)的位置，所以它會(huì)在運(yùn)行時(shí)放置于(0,0)的位置巍举，除非你添加約束脆荷。
切換回代碼視圖以檢查布局XML的源代碼。請(qǐng)注意懊悯，任何視圖的源代碼都有一些帶tools前綴的屬性蜓谋，例如：
<ImageView
android:id="@+id/imageView"
android:layout_width="46dp"
android:layout_height="46dp"
app:srcCompat="@drawable/track_icon"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="16dp" />
布局編輯器允許你將小部件放在畫布上的任何位置，并使用tools前綴屬性記錄當(dāng)前位置炭分。這些屬性在實(shí)際運(yùn)行時(shí)并不會(huì)被應(yīng)用孤澎，請(qǐng)記住這一點(diǎn)。
譯者補(bǔ)充:
tools前綴的屬性都是服務(wù)于布局編輯器中的欠窒，只在XML的預(yù)覽視圖中起作用覆旭，實(shí)際運(yùn)行時(shí)是沒有用的。
開始了解布局編輯工具欄
切換回布局的設(shè)計(jì)視圖岖妄，你可以在布局預(yù)覽得上方看到一堆小控件型将。如果將鼠標(biāo)懸停在每個(gè)控件上，可以閱讀該控件的簡要說明荐虐。
自動(dòng)連接
單擊工具欄中的磁鐵圖標(biāo)以啟用 Autoconnect (自動(dòng)連接) 七兜，將任何視圖拖動(dòng)到父視圖角落附近的區(qū)域，此時(shí)Android Studio將自動(dòng)為你創(chuàng)建新約束福扬。
請(qǐng)注意腕铸，這僅適用于在UI元素及其父視圖之間創(chuàng)建約束，而不是在UI元素之間創(chuàng)建約束铛碑，因此 Autoconnect 的用處非常有限狠裹。大多數(shù)情況下，你還是關(guān)閉 Autoconnect 吧汽烦。
自動(dòng)連接（推測(cè)約束）
接下來涛菠，單擊 Infer Constraints (推測(cè)約束) 按鈕，Android Studio會(huì)自動(dòng)添加布局中缺少的約束。
再次構(gòu)建并運(yùn)行您的應(yīng)用俗冻，會(huì)發(fā)現(xiàn)現(xiàn)在這些組件不在角落礁叔，而是出現(xiàn)在你放置它們的位置了。
這是添加約束的最簡單方法迄薄，但也可能是最不好的琅关。因?yàn)锳ndroid Studio布局的意圖往往和你實(shí)際的意圖不同。
使用自動(dòng)連接在特定大小的情況下布局可能是正常的讥蔽，但在不同的屏幕大小或屏幕方向上涣易，可能就不會(huì)像你所希望的樣子布局了。
清除所有約束
如果約束混亂勤篮，你可以清除所有約束并從頭開始重新添加約束都毒。具體方法是，點(diǎn)擊 Clear All Constraints (清楚所有約束) 按鈕清除當(dāng)前頁面所有約束碰缔。
添加和刪除個(gè)別約束
Android提供了多種選項(xiàng)账劲，可以將UI元素限制在屏幕的不同部分，讓你靈活地設(shè)計(jì)布局金抡。
在本教程的這一部分中瀑焦，你將學(xué)習(xí)如何將對(duì)象約束到其容器，刪除單個(gè)約束以及將對(duì)象約束到另一個(gè)對(duì)象以達(dá)到動(dòng)態(tài)布局的效果梗肝。
將對(duì)象約束到其容器
請(qǐng)注意榛瓮，當(dāng)你單擊ImageView時(shí)，它會(huì)突出顯示巫击，并且視圖的頂部禀晓，底部，左側(cè)和右側(cè)會(huì)出現(xiàn)小圓圈坝锰。這些圓圈是你的約束錨點(diǎn)粹懒。
當(dāng)你將鼠標(biāo)懸停在其中一個(gè)約束錨點(diǎn)上時(shí)，它將閃爍綠色顷级。Android Studio會(huì)提示你創(chuàng)建約束連接凫乖。
單擊元素左側(cè)的圓圈并將其拖動(dòng)到左側(cè)。在拖動(dòng)時(shí)弓颈，將出現(xiàn)帶箭頭的線條帽芽，在UI元素的左側(cè)和要將其連接到的元素之間創(chuàng)建約束。
將圓拖動(dòng)到視圖的左側(cè)翔冀，并將圓圈ImageView的 左側(cè)約束到父視圖的左部导街。對(duì)圓圈ImageView的頂部重復(fù)此操作，將其約束到父視圖頂部橘蜜。您現(xiàn)在已將ImageView的約束限制在視圖的左上角菊匿。
將圖像向下拖動(dòng)一點(diǎn)付呕，Android Studio將在頂部創(chuàng)建一個(gè)邊距计福。通過在代碼視圖中編輯XML代碼或在設(shè)計(jì)視圖的 Attributes (屬性) 檢查器中對(duì)其進(jìn)行編輯跌捆，將頂部邊距設(shè)置為30dp。
接下來象颖，選擇 Raze Galactic TextView, 將左約束錨點(diǎn)拖動(dòng)到父視圖的左側(cè)佩厚，將右約束錨點(diǎn)拖動(dòng)到父視圖的右側(cè)。通過將此UI元素約束到左側(cè)和右側(cè)说订，Android明白你是想將其達(dá)到居中的效果抄瓦。
刪除個(gè)別約束
接下來，將鼠標(biāo)光標(biāo)放在已設(shè)置約束的約束錨點(diǎn)之一上陶冷，表示箭頭的圓圈現(xiàn)在應(yīng)該閃爍紅色钙姊，約束也會(huì)以紅色突出顯示。
單擊錨點(diǎn)就會(huì)刪除約束」÷祝現(xiàn)在先不要單擊煞额，并將約束錨點(diǎn)保留在原位，但如果以后需要?jiǎng)h除約束沾谜，請(qǐng)記住該操作膊毁。
現(xiàn)在你知道如何將UI元素約束到其父容器的邊框，接下來到了學(xué)習(xí)如何將UI元素相互約束的時(shí)候了基跑。
將對(duì)象彼此之間進(jìn)行約束
在本教程的這一步中婚温，你將實(shí)現(xiàn) Raze Galactic TextView始終與火箭圖像對(duì)齊。
要做到這一點(diǎn)媳否，你需要把 Raze Galactic TextView的頂部錨點(diǎn)約束到ImageView的頂部錨點(diǎn)栅螟，同時(shí)將TextView底部錨點(diǎn)固定到ImageView的底部錨點(diǎn)。兩個(gè)視圖便會(huì)垂直對(duì)齊篱竭。
現(xiàn)在力图，如果你按住火箭上下拖動(dòng)，你將看到 Raze Galactic 隨著圖像上下移動(dòng)室抽。
稍后搪哪，你將看到如何使用對(duì)齊菜單創(chuàng)建這樣的對(duì)齊。但是坪圾，該方法并不總是完美無缺的晓折，所以知道如何手動(dòng)完成它也是一件好事。
切換到Android Studio中的代碼視圖兽泄，并檢查剛才添加約束的視圖的代碼：
<ImageView
android:id="@+id/imageView2"
android:layout_width="46dp"
android:layout_height="46dp"
android:layout_marginStart="16dp"
android:layout_marginTop="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/track_icon"/>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="Raze Galactic"
android:textAppearance="@style/TextAppearance.AppCompat.Headline"
app:layout_constraintBottom_toBottomOf="@+id/imageView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/imageView2"/>
現(xiàn)在你已經(jīng)添加了一些約束漓概，帶有tools前綴的屬性已經(jīng)消失，因?yàn)锳ndroid Studio現(xiàn)在不再需要僅設(shè)計(jì)時(shí)生效的這些屬性了病梢。
你添加的每個(gè)約束都會(huì)在代碼中提現(xiàn)胃珍，比如app:layout_constraintTop_toTopOf="parent"梁肿，代表該元素的頂部約束到了父布局的頂部。
你可以看到Android Studio為你設(shè)置了一些邊距觅彰，也許你并沒有想過去添加吩蔑。這些邊距可能看起來像android:layout_marginStart="16dp"。
繼續(xù)往下看填抬，在 Raze Galactic TextView中 刪除邊距屬性后切換回設(shè)計(jì)視圖烛芬，現(xiàn)在你會(huì)發(fā)現(xiàn)， Raze Galactic TextView應(yīng)該與火箭圖像對(duì)齊了飒责。
這兩個(gè)視圖不會(huì)再有錯(cuò)誤出現(xiàn)了赘娄，因?yàn)橐呀?jīng)滿足了Android Studio放置這兩個(gè)UI元素所需要的信息量下限。
注意：你仍可能會(huì)看到有關(guān)使用硬編碼字符串或丟失的警告
contentDescription宏蛉。不過你現(xiàn)在現(xiàn)在可以忽略這些遣臼。
現(xiàn)在，你應(yīng)該將 ** Login** (登錄)按鈕與 Sign Up (注冊(cè)) 按鈕對(duì)齊拾并，就像將 Raze Galactic TextView與火箭圖像對(duì)齊一樣揍堰。為此，你將需要設(shè)置三個(gè)約束：
“登錄”按鈕的頂部錨點(diǎn)位于“注冊(cè)”按鈕的頂部辟灰。
“登錄”按鈕的底部錨點(diǎn)位于“注冊(cè)”按鈕的底部个榕。
“登錄”按鈕的左側(cè)錨點(diǎn)位于“注冊(cè)”按鈕的右部，并設(shè)置從左起30dp的起始邊距以在它們之間留出一些空間芥喇。
應(yīng)用對(duì)齊約束
選擇 Raze Galactic TextView并單擊右側(cè)錨點(diǎn)以刪除這些約束西采。然后，在TextView仍然選中時(shí)继控，單擊工具欄中的 Align (對(duì)齊)工具械馆，然后在選擇 Horizontally in Parent (水平布局)。
這會(huì)自動(dòng)將Raze Galactic TextView相對(duì)父容器進(jìn)行居中布局武通。這與你在手動(dòng)添加約束時(shí)之前實(shí)現(xiàn)的效果相同霹崎。
事實(shí)上，如果你切換到代碼視圖并仔細(xì)檢查Raze Galactic TextView冶忱，你會(huì)注意到Android Studio添加了以下約束屬性：
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
這時(shí)你可能問了尾菇，Android Studio中自動(dòng)添加的layout_constraintHorizontal_bias是什么？
Constraint Bias(約束偏差)
當(dāng)視圖在水平或垂直方向上受到約束時(shí)囚枪，無論是父視圖還是其他視圖派诬，默認(rèn)情況下它具有0.5或50％的約束偏差。換句話說链沼，視圖保持在它受約束的兩條邊之間的中心默赂。
約束偏差范圍從0.0（0％）到1.0（100％），水平約束偏差從左到右增長括勺，而垂直約束偏差從上到下增長缆八。約束偏差對(duì)于為不同的屏幕尺寸動(dòng)態(tài)定位視圖很有用曲掰。
要更輕松地了解約束偏差的工作原理，請(qǐng)切換回設(shè)計(jì)視圖奈辰。選中 Raze Galactic TextView栏妖，在右側(cè)查看 view inspector (視圖查看器) 以及各種 Attributes(屬性)。
視圖查看器左側(cè)的垂直滑塊控制垂直約束偏差冯挎，底部的垂直滑塊控制水平約束偏差底哥。拖動(dòng)每個(gè)滑塊以查看約束偏差的工作原理：
在繼續(xù)下一步之前咙鞍，將水平和垂直約束的偏差重置為50％房官。
對(duì)齊左邊緣并垂直分布
接下來，同時(shí)選擇所有TextView续滋， Google Sign-In(從谷歌登錄) 和 Sign-Up (注冊(cè)) 按鈕翰守。你可以按住Shift鍵單擊每個(gè)UI元素依次全部選中它們。然后疲酌，從工具欄中單擊 Align (對(duì)齊) 并選擇 Left Edges (左邊緣) 蜡峰。
這是應(yīng)用左對(duì)齊后的布局：
你注意到這里有什么問題了嗎？ Raze Galactic TextView的水平約束變不見了朗恳。
左邊緣將視圖與所選擇的最左側(cè)視圖對(duì)齊湿颅，它實(shí)際上做的是按降序從一個(gè)視圖創(chuàng)建左約束依賴關(guān)系，以最底部的視圖充當(dāng)錨點(diǎn)粥诫。
因此油航，要使 Left Edges (左邊緣)命令起作用，它必須刪除其余所選視圖的現(xiàn)有水平約束怀浆。
要反轉(zhuǎn)約束依賴關(guān)系順序谊囚，請(qǐng)?jiān)俅螒?yīng)用 Left Edges (左邊緣)命令。您可以看到約束箭頭現(xiàn)在指向上方执赡。
現(xiàn)在镰踏，使用與上一步驟中選擇的相同UI元素，單擊 Pack (包) 菜單并選擇 Distribute Vertically (垂直分布) 沙合。
垂直分布后奠伪，你的屏幕將如下所示：
同樣，你可能已經(jīng)注意到與上述類似的問題：連接火箭圖標(biāo)底部和 Raze Galactic TextView的約束屬性已經(jīng)消失首懈。
約束依賴性按降序排列绊率，就像在第一個(gè) Left Edges (左邊緣) 命令之后一樣。不幸的是猜拾，沒有簡單的方法來解決這個(gè)問題即舌，因此您必須手動(dòng)創(chuàng)建垂直分布式約束。
本教程將介紹如何在下一部分中執(zhí)行此操作挎袜，因此請(qǐng)繼續(xù)并撤消 Distribute Vertically (垂直分布) 命令顽聂。
注意：Align 和 Pack 命令可能無法正常工作肥惭。它們可能會(huì)刪除現(xiàn)有的約束，并且可能不會(huì)移動(dòng)某些受約束的視圖紊搪。在應(yīng)用這些命令之前和之后蜜葱，請(qǐng)務(wù)必檢查受影響視圖的約束。
使用默認(rèn)邊距
要?jiǎng)?chuàng)建垂直分布式約束耀石，只需連接具有相同邊距的約束即可牵囤。快速完成此操作的一個(gè)技巧是使用 Default Margin (默認(rèn)邊距) 工具滞伟。
現(xiàn)在揭鳞，單擊 Default Margin (默認(rèn)邊距) 按鈕并設(shè)置值為60dp，然后將Google登錄按鈕的頂部約束連接到 Raze Galactic TextView的底部梆奈。你會(huì)發(fā)現(xiàn)Google登錄按鈕會(huì)自動(dòng)變換位置野崇，在它與 Raze Galactic TextView之間留出60dp的間距。
魔法 ：]
創(chuàng)建其余的垂直約束亩钟，如上面的GIF所示乓梨。最后，將到 Raze Galactic TextView的左側(cè)約束到火箭圖標(biāo)的右側(cè)清酥，邊距為30dp扶镀。
檢查組件樹以查看是否存在其他錯(cuò)誤。如果沒有錯(cuò)誤焰轻，恭喜臭觉！
構(gòu)建并運(yùn)行你的應(yīng)用程序，現(xiàn)在所有內(nèi)容應(yīng)該在模擬器中以適當(dāng)?shù)牟季诛@示了鹦马。
接下來做什么胧谈？
你可以使用本教程頂部的下載材質(zhì)按鈕下載此項(xiàng)目的最終版本。
ConstraintLayout 在布局編輯器中構(gòu)建UI 可能會(huì)令人沮喪荸频，因?yàn)槟承┕ぞ卟粔蛑悄芰庑ぁ５牵绻绻阒廊绾握_的去使用旭从，則可以節(jié)省大量時(shí)間稳强。
本教程中未提及其他布局編輯器工具，你可以去使用它們來了解它們的工作原理和悦⊥艘撸看看谷歌ConstraintLayout的文檔上，以了解更多信息鸽素。
有關(guān)更復(fù)雜的ConstraintLayout示例褒繁，請(qǐng)參閱我們的后續(xù)文章ConstraintLayout Android教程：復(fù)雜布局。
要查看更多ConstraintLayout的示例馍忽，請(qǐng)查看我們的 Android Apprentice 一書棒坏，該書使用ConstraintLayout作為所有頁面的布局燕差。
你現(xiàn)在已經(jīng)掌握了ConstraintLayout基本的概念，要了解更多高級(jí)功能并獲得處理復(fù)雜布局的提示坝冕，請(qǐng)繼續(xù)關(guān)注我們即將推出的構(gòu)建復(fù)雜布局的教程ConstraintLayout Android教程：復(fù)雜布局徒探，你將在其中為 Raze Galactic 旅行應(yīng)用程序構(gòu)建更復(fù)雜的約束視圖，然后為其制作動(dòng)畫喂窟！
如果你有任何問題或意見测暗，歡迎在下方留言討論~
