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

在上一章节中我们学习了 Android ConstraintLayout 中的 相对定位 (Relative positioning) 约束布局

本节我们来学习 边距 ( Margins ) 约束布局

边距 ( Margins )约束

margin 和以往的使用一致，注意 margin 不能为负值 即可

ConstraintLayout (约束布局) 中，如果设置了侧边距，它们将应用于相应的约束条件 (如果存在的话)，将边距作为目标和源侧之间的空间执行

下表列出了可用约束的属性列表

注意： 这些属性的值只能是大于等于 0 的数值，且必须带上单位,如 dp

连接到 GONE (缺失) 小部件时的边距

这是一种特殊的情况，假如我们约束的目标缺失(GONE)了,那么还可以使用下面的属性

这是什么意思呢？

我们举个例子，当 B 控件约束 在 A 控件的右边，此时 A 控件 GONE 了，那么 B 会额外拥有一个 margin 的能力，来 "弥补" A 消失的导致的 "位移"

范例

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/signin"
           android:layout_width="100dp"
           android:layout_height="wrap_content"
           android:text="Sign In"
           app:layout_constraintRight_toRightOf="parent" />
   
       <!-- android:layout_marginRight="10dp" 
       配合 app:layout_goneMarginRight="110dp"一起使用，
       在约束的布局gone时，起用goneMargin，
       但是一定要预先设置对应方向上的margin -->
   
       <Button
           android:id="@+id/signup"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginRight="10dp"
           android:text="Sign Up"
           app:layout_constraintRight_toLeftOf="@id/signin"
           app:layout_goneMarginRight="110dp"/>
   
   </android.support.constraint.ConstraintLayout>
   

运行范例，显示结果如下

这时候我们将 button4 隐藏( GONE )，修改 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/signin"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Sign In"
        android:visibility = "gone"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/signup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="Sign Up"
        app:layout_constraintRight_toLeftOf="@id/signin"
        app:layout_goneMarginRight="110dp"/>

</android.support.constraint.ConstraintLayout>

运行范例，显示结果如下

对比前后两张图，我们会发现 Sign Up 纹丝不动，并没有受到 Sign In 消失的影响

然后我们仔细看看 Sign In 相关属性

android:layout_width="100dp"

而 Sign Up 的属性为

android:layout_marginRight="10dp"
app:layout_goneMarginRight="110dp"

110 = 100 +10 , 这是一道小学计算题

什么意思？

也就是说，如果 Sign In 消失了，那么 Sign Up 会使用 app:layout_goneMarginRight 重新计算自己的又边距

不过，我们试了好几个属性，发现有几点需要注意

app:layout_goneMarginXXX 要配合 android:layout_marginXXX 一起使用

1. 如果只设置了 app:layout_goneMarginXXX 没有设置 android:layout_marginXXX，则无效

2. 在约束的布局 gone 时，控件自身的 marginXXX 会被 goneMarginXXX 替换掉

   以上面的 demo 为例， 原本 Sign In 宽度是 100，Sign Up 的 marginRight 是 10， 加起来是 110，如果想让 Sign In 隐藏之后，Sign Up 仍然纹丝不动，则需要设置 goneMarginRight 为 10+100 = 110

参考文档

1. Android ConstraintLayout Guideline

2. Android ConstrantLayout