Android ConstraintLayout (约束布局) 是 Android Studio 2.3+ 创建 activity_main.xml 的默认布局方式

在上一章节中我们学习了 Android ConstraintLayout 中的 边距 ( Margins ) 约束布局，本章我们就来学习 居中定位和偏向(centering positioning and bias)**

居中定位和偏向 (centering positioning and bias)

Android ConstraintLayout 约束布局最有用的一个地方就是它可以处理 "不可能" 的约束

例如，我们可以写一个如下的布局代码

<android.support.constraint.ConstraintLayout >
    <Button android:id="@+id/signup"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout />

按照第一小节讲的属性值，这段代码的意思是，Button 的左边和父控件的左边对齐，Button 的右边和父控件的右边对齐

可是控件是 wrap_content 的，它如果不铺满父控件要如何能满足这两个约束呢？

我们写一个范例来看看结果如何

1. 创建一个 空的 Android 项目 cn.twle.android.ConstraintLayout

2. 修改 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"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
   
       <Button
           android:id="@+id/signup"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           app:layout_constraintLeft_toLeftOf="parent"
           app:layout_constraintRight_toRightOf="parent"
           android:text="Sign Up"/>
   
   </android.support.constraint.ConstraintLayout>
   

运行范例，显示结果如下

哇，按钮竟然 垂直居中 了，这是因为这两个约束作用类似于水平方向上，有相反的力 去拉控件，最终控件会居中显示

倾向 ( Bias )

ConstraintLayout 布局这种居中的特性搭配 bias，能使约束偏向某一边

倾向 ( Bias ) 提供了两个属性用于设置偏向到的程度

上面的 Sign Up 会水平居中，就是因为这个偏向是 0.5，如果我们改成其它值呢，比如 0.9

试一试吧

修改 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/signup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_bias="0.9"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="Sign Up"/>

</android.support.constraint.ConstraintLayout>

运行范例，显示结果如下

我们发现 Sign Up 按钮在水平方向上向右偏移至 90% 左右

参考文档

1. Android ConstraintLayout Guideline

2. Android ConstrantLayout