ConstraintLayout学习笔记

android ConstraintLayout 实现一个简单登录界面布局

android studio新建工程已经使用ConstraintLayout来作为默认布局了。作为一个android小菜鸟，这两天学习了一下新的布局。

ConstraintLayout是基于约束的布局，有点类似ios的autolayout。下面我们用一个很简单的登录界面来学习一下android的ConstraintLayout。

这是一个简单的登录界面。既然ConstraintLayout是基于约束的布局，那么我们在布局之前就要考虑一下布局界面需要哪些约束。以上图的登录界面为例，基本的约束有用户名标签和密码标签右对齐，用户名输入框和密码输入对齐，用户名标签和用户名输入框基线对齐，密码标签和密码输入框基线对齐，登录和注册按钮水平居中对其。

下面我们介绍一下如何在xml中配置这些约束。首先我们设置一条参考线（GuideLine）用来作为布局的顶部参考，对应右侧蓝图中的虚线

 
 
 
 
android:layout_width="wrap_content"
 
 
android:layout_height="wrap_content"
 
 
app:layout_constraintGuide_percent="0.15"
 
 
android:id="@+id/hLine1"
 
 
android:orientation="horizontal"
 
 
/>
 
 

我们创建了一条水平参考线，距离顶部距离为0.15倍（也可以使用dp）。

接下来我们配置一下用户名标签的约束。左边和父视图对齐，右边和输入框对齐，上边和我们添加的水平参考线对其，然后我们调整了一下各个方向的margin。

 
 
 
 
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"
 
 
/>
 
 

用户输入框的约束和用户名标签的类似，只是添加了一种新的基线对齐约束。

 
 
 
 
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"/>
 
 

密码标签和密码输入框的约束和上面的约束类似。

下面我们来布局一下登录和注册按钮。我们要求的效果是登录按钮和注册按钮都是水平居中的。有两种方案，一种是使用guideline，我们添加一条垂直的的参考线，percent设置为0.5，然后注册按钮的right和登录按钮的left对齐参考线。另一种方案是使用ConstraintLayout的链式风格。使用参考线的方式来对齐我们已经用过了，下面我们尝试使用chainStyle来布局。

 
 
 
 
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"
 
 
/>
 
 
 
 
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"
 
 
/>
 
 

上图为官方文档中几种链式风格的介绍。对于我们的登录界面我们需要用到Packed Chain风格，确保注册和登录按钮的左右margin相等。

 
 
 
 
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"
 
 
/>
 
 
 
 
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"
 
 
/>
 
 

关于链式风格的详细介绍，可以查阅官方文档developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html。与之前创建的约束不一样的地方在于我们在注册按钮中设置链风格为packed。packed（我暂且称为包式风格），这种布局会把它和链上的组件包裹在一起，对外就像一个整体。我们把注册按钮和登录按钮打包，然后这个包的左右边界就分别变为了父视图的左右边界，因为我们的宽度属性设为wrap_content，所以这个包整体水平居中了，我们调整一下按钮间的margin即可。

至此，我们完成了一个简单的登录界面的布局。个人认为有点费解的就是链式风格，本文中只展示了packed风格，剩余的几种风格，可以查阅android cn官方文档即可。

头一次写笔记，可能写的很杂乱，个人水平有限，有不足之处还望各位大牛多多指点。