android ConstraintLayout 實現(xiàn)一個簡單登錄界面布局
android studio新建工程已經(jīng)使用ConstraintLayout來作為默認布局了却舀。作為一個android小菜鳥饭聚，這兩天學習了一下新的布局浙垫。
ConstraintLayout是基于約束的布局谨垃，有點類似ios的autolayout。下面我們用一個很簡單的登錄界面來學習一下android的ConstraintLayout。
這是一個簡單的登錄界面敦捧。既然ConstraintLayout是基于約束的布局，那么我們在布局之前就要考慮一下布局界面需要哪些約束碰镜。以上圖的登錄界面為例兢卵，基本的約束有用戶名標簽和密碼標簽右對齊，用戶名輸入框和密碼輸入對齊绪颖，用戶名標簽和用戶名輸入框基線對齊秽荤，密碼標簽和密碼輸入框基線對齊，登錄和注冊按鈕水平居中對其柠横。
下面我們介紹一下如何在xml中配置這些約束窃款。首先我們設置一條參考線（GuideLine）用來作為布局的頂部參考，對應右側藍圖中的虛線
<pre>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.15"
android:id="@+id/hLine1"
android:orientation="horizontal"
/>
</pre>
我們創(chuàng)建了一條水平參考線滓鸠，距離頂部距離為0.15倍（也可以使用dp）雁乡。
接下來我們配置一下用戶名標簽的約束。左邊和父視圖對齊糜俗，右邊和輸入框對齊踱稍，上邊和我們添加的水平參考線對其曲饱，然后我們調(diào)整了一下各個方向的margin。
<pre>
<TextView
android:id="@+id/userNameText"
android:layout_width="100dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp"
android:text="@string/userName"
android:gravity="end"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/userNameEdit"
app:layout_constraintTop_toTopOf="@+id/hLine1"
/>
</pre>
用戶輸入框的約束和用戶名標簽的類似珠月，只是添加了一種新的基線對齊約束扩淀。
<pre>
<EditText
android:id="@+id/userNameEdit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@+id/userNameText"
app:layout_constraintTop_toTopOf="@+id/hLine1"
app:layout_constraintBaseline_toBaselineOf="@+id/userNameText"
android:hint="@string/usernameHint"
android:layout_marginTop="15dp"/>
</pre>
密碼標簽和密碼輸入框的約束和上面的約束類似。
下面我們來布局一下登錄和注冊按鈕啤挎。我們要求的效果是登錄按鈕和注冊按鈕都是水平居中的驻谆。有兩種方案，一種是使用guideline庆聘，我們添加一條垂直的的參考線胜臊，percent設置為0.5，然后注冊按鈕的right和登錄按鈕的left對齊參考線伙判。另一種方案是使用ConstraintLayout的鏈式風格象对。使用參考線的方式來對齊我們已經(jīng)用過了，下面我們嘗試使用chainStyle來布局宴抚。
<pre>
<Button
android:id="@+id/regButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/register"
android:layout_marginTop="40dp"
android:layout_marginEnd="30dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toBottomOf="@id/userPasswordEdit"
app:layout_constraintRight_toLeftOf="@+id/loadButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.5"
/>
<Button
android:id="@+id/loadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/load"
app:layout_constraintTop_toTopOf="@id/regButton"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@id/regButton"
/>
</pre>
上圖為官方文檔中幾種鏈式風格的介紹勒魔。對于我們的登錄界面我們需要用到Packed Chain風格，確保注冊和登錄按鈕的左右margin相等菇曲。
<pre>
<Button
android:id="@+id/regButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/register"
android:layout_marginTop="40dp"
android:layout_marginEnd="30dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintTop_toBottomOf="@id/userPasswordEdit"
app:layout_constraintRight_toLeftOf="@+id/loadButton"
app:layout_constraintLeft_toLeftOf="parent"
/>
<Button
android:id="@+id/loadButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/load"
app:layout_constraintTop_toTopOf="@id/regButton"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="@id/regButton"
/>
</pre>
關于鏈式風格的詳細介紹冠绢，可以查閱官方文檔developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html。與之前創(chuàng)建的約束不一樣的地方在于我們在注冊按鈕中設置鏈風格為packed常潮。packed（我暫且稱為包式風格）弟胀，這種布局會把它和鏈上的組件包裹在一起，對外就像一個整體喊式。我們把注冊按鈕和登錄按鈕打包邮利，然后這個包的左右邊界就分別變?yōu)榱烁敢晥D的左右邊界，因為我們的寬度屬性設為wrap_content垃帅，所以這個包整體水平居中了，我們調(diào)整一下按鈕間的margin即可剪勿。
至此贸诚，我們完成了一個簡單的登錄界面的布局。個人認為有點費解的就是鏈式風格厕吉，本文中只展示了packed風格酱固，剩余的幾種風格，可以查閱android cn官方文檔即可头朱。
頭一次寫筆記运悲，可能寫的很雜亂，個人水平有限项钮，有不足之處還望各位大牛多多指點班眯。
