ConstraintLayoutDemo【约束性布局知识梳理】【基于1.1.3】

版权声明：本文为haiyuking原创文章，转载请注明出处！

前言

在较新版本的android studio中新建项目默认使用 constraintlayout进行布局的。

constraintlayout是一个允许您以灵活的方式定位和调整小部件的viewgroup。

注意： constraintlayout作为支持库提供，您可以在api级别9（gingerbread）开始的android系统上使用。

开发者指南梳理

以下内容参考《constraintlayout开发者指南》

一、相对定位【relative positioning】

相对定位是在constraintlayout中创建布局的基本构建块之一。这些约束允许您将指定的控件（源控件）相对于另一个控件（目标控件）进行定位。您可以在水平和垂直轴上约束控件：

• 水平方向： left、right、start、end
• 垂直方向： top、bottom、text baseline

备注：start,end,left,right的区别

1、其中left/right代表一种绝对的对齐，start/end表示基于阅读顺序的对齐。 

说到阅读顺序又不得不提目前存在的主要阅读方式： 从左向右(ltr)和从右向左(rtl)；

当使用left/right的时候，无论是ltr还是rtl，总是左/右对齐的；而使用start/end，如阅读顺序是从左到右(ltr)的国家，start在左边，在阅读顺序是从右到左(rtl)的国家（比如阿拉伯），start在右边。

2、当minsdkversion>=17时，建议使用start/end来代替left/right；

当minsdkversion<17时，旧的平台不支持rtl（从右到左--right to left），start/end属性是未知的，会被忽略，所以需要同时使用start/end和left/right。

以下是可用约束属性的列表

• app:layout_constraintleft_toleftof
• app:layout_constraintleft_torightof
• app:layout_constraintright_toleftof
• app:layout_constraintright_torightof
• app:layout_constrainttop_totopof
• app:layout_constrainttop_tobottomof
• app:layout_constraintbottom_totopof
• app:layout_constraintbottom_tobottomof
• app:layout_constraintbaseline_tobaselineof
• app:layout_constraintstart_toendof
• app:layout_constraintstart_tostartof
• app:layout_constraintend_tostartof
• app:layout_constraintend_toendof

用法解析：

1、上面的约束属性一般写在源控件上；

2、约束属性引用的id或者parent代表目标控件；

3、约束属性含义解读：将源控件的指定侧约束到目标控件的其中一侧。

比如：app:layout_constraintleft_toleftof——当前源控件的左侧被约束（constraintleft）到目标控件的左侧（toleftof）

例子1：将按钮b定位在按钮a的右侧，意味着系统将尝试让双方共享相同的位置。 

<button
        android:id="@+id/buttona"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent" />
<button
        android:id="@+id/buttonb"
        app:layout_constraintleft_torightof="@id/buttona"/>

 例子2：按钮a和按钮b文本基线对齐，且按钮b在按钮a右侧

<?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"
    android:padding="8dp">

    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent" />

    <button
        android:id="@+id/buttonb"
        android:layout_width="50dp"
        android:layout_height="20dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintbaseline_tobaselineof="@id/buttona"
        app:layout_constraintleft_torightof="@id/buttona"
        />

</android.support.constraint.constraintlayout>

 

二、外边距【margins】

如果设置了边距，则它们将应用于相应的约束（如果存在约束），系统将边距强制为目标和源边之间的空间。

什么叫边距应用于相应的约束（如果存在约束）？可以简单理解为android:layout_marginleft和app:layout_constraintleft_toleftof、app:layout_constraintleft_torightof配合使用才会生效！保证设置边距的方向（left\right\top\bottom\start\end）和相对定位约束的源控件的方向（left\right\top\bottom\start\end）一致！剩下的以此类推！见例子2。

以下是布局边距属性的列表：

• android:layout_marginstart
• android:layout_marginend
• android:layout_marginleft
• android:layout_margintop
• android:layout_marginright
• android:layout_marginbottom

用法解析：

1、一般写在源控件上；

2、约束属性含义解读：当前控件（源控件）的指定侧距离与其具有约束关系的控件（目标控件）的其中一侧的空间值；

3、属性值必须是大于或者等于0；

4、当目标控件设置为可见性为gone的时候，源控件的边距仍有效；

例子1：将按钮b定位在按钮a的右侧，并且设置相距8dp

<button
        android:id="@+id/buttona"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent" />
<button
        android:id="@+id/buttonb"
        app:layout_constraintleft_torightof="@id/buttona"
        android:layout_marginleft="8dp"/>

例子2：按钮b和按钮a文本基线对齐，且按钮b的左侧和按钮a的左侧对齐，且边距为8dp

<?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"
    android:padding="8dp">

    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent" />

    <button
        android:id="@+id/buttonb"
        android:layout_width="50dp"
        android:layout_height="20dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintbaseline_tobaselineof="@id/buttona"
        app:layout_constraintleft_toleftof="@id/buttona"
        android:layout_marginleft="8dp"
        />

</android.support.constraint.constraintlayout>

如果去掉app:layout_constraintleft_toleftof属性的话，设置的边距值是无效的，效果如下：

<button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent" />

    <button
        android:id="@+id/buttonb"
        android:layout_width="50dp"
        android:layout_height="20dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintbaseline_tobaselineof="@id/buttona"
        android:layout_marginleft="8dp"
        />

例子3：按钮a隐藏的情况下，按钮b在按钮a右侧，且边距为8dp【此时按钮b的外边距8dp仍是有效的】

<button
        android:id="@+id/buttona"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent"
        android:visibility="gone"/>

<button
        android:id="@+id/buttonb"
        app:layout_constraintleft_torightof="@id/buttona"
        android:layout_marginleft="8dp"
        />

三、连接到gone控件时的边距【margins when connected to a gone widget】

 当约束目标控件的可见性为view.gone时，可以配合使用以下属性设置不同边距值：

• app:layout_gonemarginstart
• app:layout_gonemarginend
• app:layout_gonemarginleft
• app:layout_gonemargintop
• app:layout_gonemarginright
• app:layout_gonemarginbottom

和android:layout_marginleft等的区别就在于，当目标控件隐藏（gone）的时候，android:layout_marginleft设置的外边距值还生效，而app:layout_gonemarginleft设置的外边距值则会失效！

例子1：按钮a隐藏的情况下，按钮b在按钮a右侧，且边距为8dp【此时按钮b的外边距8dp是无效的】

<?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"
    android:padding="8dp">

    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent"
        android:visibility="gone"/>

    <button
        android:id="@+id/buttonb"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/buttona"
        app:layout_gonemarginleft="8dp"
        />

</android.support.constraint.constraintlayout>

 

四、可见性行为【visibility behavior】

一般情况下，a控件设置 gone属性后，a控件就不会出现在布局中了，b控件对a控件的android:layout_marginxxx属性也就没有作用了。但是 constraintlayout 能对已经设置 gone属性的控件进行特殊处理。当a控件设置 gone之后，a控件相当于变成了一个点，b控件相对于对a的约束仍然是起作用的，b控件的android:layout_marginxxx属性还是有作用的。

• 对于gone的控件，它们的尺寸将被视为零（基本上，它们将被解析为一个点）；
• 如果已gone的控件对其他控件有约束，他们仍然会受到尊重，但已gone的控件任何边距都会等于零；

有时候，b控件是不希望相对于隐藏控件a的属性还起作用。这时候可以用到上面提到的app:layout_gonemarginxxx属性。

例子1：按钮a隐藏后，按钮a的外边距失效，均等于0

初始状态：

<?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"
    android:padding="8dp"
    >
    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent"
        />
    <button
        android:id="@+id/buttonb"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/buttona"
        />
</android.support.constraint.constraintlayout>

设置按钮a的外边距值为5dp：

<button
        android:id="@+id/buttona"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent"
        android:layout_marginleft="5dp"
        />
<button
        android:id="@+id/buttonb"
        app:layout_constraintleft_torightof="@id/buttona"
        />

设置按钮a隐藏状态gone（可以发现按钮a的外边距5dp失效了）：

    <button
        android:id="@+id/buttona"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constrainttop_totopof="parent"
        android:layout_marginleft="5dp"
        android:visibility="gone"
        />
    <button
        android:id="@+id/buttonb"
        app:layout_constraintleft_torightof="@id/buttona"
        />

 

五、居中定位【centering positioning】

水平居中（parent表示相对于父节点）：

app:layout_constraintleft_toleftof="parent"

app:layout_constraintright_torightof="parent"

垂直居中（parent表示相对于父节点）：

app:layout_constrainttop_totopof="parent"
app:layout_constraintbottom_tobottomof="parent"

上图是水平居中的示意图。

constraintlayout是如何处理“相反”的约束，比如下面的代码，除非constraintlayout恰好具有button与之完全相同的大小，否则两个约束不能同时满足；在这种情况下发生的事情是，约束的作用就像是相反的力量将控件拉平; 这样控件最终将在父容器中居中。这同样适用于垂直约束。

例子1：按钮a水平居中

<?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"
    android:padding="8dp"
    >
    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="parent"
        />
</android.support.constraint.constraintlayout>

例子2：按钮b居中在按钮a中（如果按钮a和按钮b大小一致，那么按钮b就会和按钮a重叠）

<?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"
    android:padding="8dp"
    >

    <button
        android:id="@+id/buttona"
        android:layout_width="200dp"
        android:layout_height="80dp"
        android:text="按钮a"
        android:background="#ffb300"

        />

    <button
        android:id="@+id/buttonb"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintleft_toleftof="@id/buttona"
        app:layout_constraintright_torightof="@id/buttona"
        app:layout_constrainttop_totopof="@id/buttona"
        app:layout_constraintbottom_tobottomof="@id/buttona"
        />
</android.support.constraint.constraintlayout>

五、偏差【bias】

遇到这种相反的约束时的默认设置是使控件居中（也就是默认偏差50%）; 但是您可以使用偏差属性调整定位以使一侧偏向另一侧：

可以使用的属性：

• layout_constrainthorizontal_bias（水平偏差，取值范围：0.0~1.0）
• layout_constraintvertical_bias（垂直偏差，取值范围：0.0~1.0）

所以，可以得知，偏差属性是需要和“反约束”属性一起使用的。那么什么是“反约束”属性呢？个人简单理解为下面的是反约束属性（仅供参考）：

• app:layout_constraintleft_toleftof【反约束属性】
• app:layout_constraintleft_torightof
• app:layout_constraintright_toleftof
• app:layout_constraintright_torightof【反约束属性】
• app:layout_constrainttop_totopof【反约束属性】
• app:layout_constrainttop_tobottomof
• app:layout_constraintbottom_totopof
• app:layout_constraintbottom_tobottomof【反约束属性】
• app:layout_constraintbaseline_tobaselineof
• app:layout_constraintstart_toendof
• app:layout_constraintstart_tostartof【反约束属性】
• app:layout_constraintend_tostartof
• app:layout_constraintend_toendof【反约束属性】

例子1：按钮a水平居偏移30%，按钮b水平居中

<?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"
    android:padding="8dp"
    >

    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="parent"
        app:layout_constrainthorizontal_bias="0.3"
        />

    <button
        android:id="@+id/buttonb"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/buttona"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="parent"
        />
</android.support.constraint.constraintlayout>

 

六、圆形定位（1.1中增加）【circular positioning (added in 1.1)】

您可以以角度和半径距离约束控件中心相对于另一个控件中心。这允许您将控件放在圆上（如下图所示）。

     

可以使用以下属性：

• app:layout_constraintcircle ：引用的另一个控件（目标控件）id值
• app:layout_constraintcircleradius ：源控件的中心到其他控件（目标控件）中心的距离
• app:layout_constraintcircleangle ：源控件应该处于哪个角度（以度为单位，从0到360）

例子1、按钮b在按钮a的30度角半径为100dp的位置上

<?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"
    android:padding="8dp"
    >

    <button
        android:id="@+id/buttona"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="parent"
        app:layout_constrainttop_totopof="parent"
        app:layout_constraintbottom_tobottomof="parent"
        />

    <button
        android:id="@+id/buttonb"
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintcircle="@id/buttona"
        app:layout_constraintcircleradius="100dp"
        app:layout_constraintcircleangle="30"
        />
</android.support.constraint.constraintlayout>

 

七、尺寸约束【dimensions constraints】

7.1、constraintlayout上的最大、最小尺寸约束【minimum dimensions on constraintlayout】

你可以给constraintlayout设置以下最大、最小尺寸约束：

• android:minwidth 设置布局的最小宽度
• android:minheight 设置布局的最小高度
• android:maxwidth 设置布局的最大宽度
• android:maxheight 设置布局的最大高度

当 constraintlayout宽高设置为 wrap_content时，以上属性可以起作用。

按照字面的理解是在constraintlayout布局控件上设置这些属性，而不是控件上（比如button、textview等）设置这些属性。可能这些属性更适合用在constraintlayout布局控件上吧。普通控件上也是可以使用的，但是有问题。

例子1：文本a所在的constraintlayout区域设置最小宽高，文本b所在的constraintlayout区域设置最大宽高

<?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"
    android:padding="8dp"
    >
    <android.support.constraint.constraintlayout
        android:id="@+id/buttonalayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minwidth="100dp"
        android:minheight="40dp">

        <textview
            android:id="@+id/texta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="文本a"
            android:background="#ffb300"
            />

    </android.support.constraint.constraintlayout>

    <android.support.constraint.constraintlayout
        android:id="@+id/buttonblayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxwidth="100dp"
        android:maxheight="40dp"
        app:layout_constraintleft_torightof="@id/buttonalayout">

        <textview
            android:id="@+id/textb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="文本b文本b文本b文本b\n文本b文本b文本b文本b\n文本b文本b文本b文本b"
            android:background="#b7ff00"
            />

    </android.support.constraint.constraintlayout>

</android.support.constraint.constraintlayout>

例子2：直接设置文本a的最小宽高，设置文本b的最大宽高【问题：文本b的展现不符合预期】

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minwidth="100dp"
        android:minheight="40dp"
        android:text="文本a"
        android:background="#ffb300"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxwidth="100dp"
        android:maxheight="40dp"
        android:text="文本b文本b文本b文本b\n文本b文本b文本b文本b\n文本b文本b文本b文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        />

</android.support.constraint.constraintlayout>

例子3：按钮a设置最小宽高，按钮b设置最大宽高（注意：button控件系统默认设置了最小宽高：比如宽88dp，高48dp，去style.xml中apptheme的父主题里面查看）

<?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"
    android:padding="8dp"
    >
    <button
        android:id="@+id/buttona"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minwidth="100dp"
        android:minheight="60dp"
        android:text="按钮a"
        android:background="#ffb300"
        />

    <button
        android:id="@+id/buttonb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxwidth="100dp"
        android:maxheight="60dp"
        android:text="按钮b按钮b按钮b按钮b按钮b按钮b按钮b按钮b按钮b按钮b按钮b按钮b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/buttona"
        />

</android.support.constraint.constraintlayout>

7.2、控件尺寸约束【widgets dimension constraints】

我们可以通过以下3种不同方式设置android:layout_width和android:layout_height属性值指定控件的尺寸。

• 使用指定数值（例如52dp或@dimens/toolbarheight）；
• 使用wrap_content，这将要求控件自己计算自己的大小；
• 使用0dp，相当于match_constraint（在1.1.3版本中，使用match_constraint找不到，所以还是使用0dp，注意不能使用match_parent，有些地方0dp和match_parent是不一样的）

上图中，（a）是wrap_content，（b）是0dp，如果设置了边距，则在计算中将考虑它们（图8，（c）中的0dp。

重要提示： match_parent不建议用于constraintlayout中的控件。可以通过使用match_constraint设置为相应的left/right或top/bottom 约束来定义类似的行为——"parent"。

但是在com.android.support.constraint:constraint-layout:1.1.3中，android:layout_width和android:layout_height属性没有这个match_constraint值。

7.3、wrap_content：强制约束（在1.1中添加）【wrap_content : enforcing constraints (added in 1.1)】

如果将维度设置为wrap_content，则在1.1之前的版本中，它们将被视为文字维度 - 这意味着约束不会限制生成的维度。虽然通常这足够（并且更快），但在某些情况下，您可能希望使用wrap_content，但仍然强制执行约束以限制生成的维度。在这种情况下，您可以添加一个相应的属性：

• app:layout_constrainedwidth=”true|false”【默认false】
• app:layout_constrainedheight=”true|false”【默认false】

例子1：文本b在文本a的下方，并且文本b的左侧约束文本a的右侧，文本b的右侧约束parent的右侧（这样可以保证文本全部显示出来）

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a："
        android:background="#ffb300"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b这是一段内容，在标题的下方并且开始位置是从标题的右侧开始并且需要保证右侧跟parent的右侧约束。"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/texta"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_torightof="parent"
        app:layout_constrainedwidth="true"
        />

</android.support.constraint.constraintlayout>

 如果去掉app:layout_constrainedwidth="true"，效果如下：文本b的左右约束失效，且文本显示不全！

<textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a："
        android:background="#ffb300"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b这是一段内容，在标题的下方并且开始位置是从标题的右侧开始并且需要保证右侧跟parent的右侧约束。"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/texta"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_torightof="parent"
        />

 如果继续去掉app:layout_constraintright_torightof="parent"，效果如下：文本b的左右约束还在，但是文本显示不全

<textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a："
        android:background="#ffb300"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b这是一段内容，在标题的下方并且开始位置是从标题的右侧开始并且需要保证右侧跟parent的右侧约束。"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/texta"
        app:layout_constraintleft_torightof="@id/texta"
        />

 

7.4、match_constraint（0dp）尺寸（在1.1中添加）【match_constraint dimensions (added in 1.1)】

 当维度设置为时match_constraint（0dp），默认行为是使结果大小占用所有可用空间。还有几个额外的修饰符：

• app:layout_constraintwidth_min和app:layout_constraintheight_min：将设置最小宽高值【可以是数值，比如100dp，也可以是“wrap”——它将使用与其相同的值wrap_content】
• app:layout_constraintwidth_max和app:layout_constraintheight_max：将设置最大宽高值【可以是数值，比如100dp，也可以是“wrap”——它将使用与其相同的值wrap_content】
• app:layout_constraintwidth_percent和app:layout_constraintheight_percent：宽高相对于父容器的百分比【数值是0~1之间的数字，比如0.3】

 注意：使用上面的min、max和percent属性的时候，需要一个方向下只含有一个约束，不能含有两个约束（percent属性可以两个约束）。

比如，app:layout_constraintwidth_min、app:layout_constraintwidth_max，想要生效的话，控件只需要app:layout_constraintleft_toleftof（隐形声明也可以）即可，不能同时含有app:layout_constraintright_torightof="parent"。

例子1：设置文本a的最小宽度值，设置文本b的最大宽度值【可以理解为从左侧开始，设置最小、最大宽度值】

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintwidth_min="80dp"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本b文本b文本b文本b文本b文本b文本b文本b文本b"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/texta"
        app:layout_constraintwidth_max="200dp"
        />

</android.support.constraint.constraintlayout>

例子2：设置文本a、文本b的宽度占父容器的百分比【可以理解为从左侧开始，文本占百分比】

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintwidth_percent="0.4"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本b文本b文本b文本b文本b文本b文本b文本b文本b"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/texta"
        app:layout_constraintwidth_percent="0.8"
        />

</android.support.constraint.constraintlayout>

 

八、设置宽高比例【ratio】

当 android:layout_width或者 android:layout_height设置为0dp时，还可以通过 app:layout_constraintdimensionratio设置宽高比例。该比例表示 width:height的值。

该比率可表示为：

• 浮点值，表示宽度和高度之间的比率（比如：1.0f）
• “宽度：高度”形式的比率（比如：1:1）

注意：使用app:layout_constraintdimensionratio属性的时候还是需要至少一个约束，比如可能会忽略的app:layout_constraintleft_toleftof="parent"。

例子1：文本a、文本b宽高比是1:1

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintdimensionratio="1.0f"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constrainttop_tobottomof="@id/texta"
        app:layout_constraintdimensionratio="1:1"
        />

</android.support.constraint.constraintlayout>

如果两个尺寸都设置为match_constraint（0dp），您也可以使用比率。

在这种情况下，系统设置满足所有约束的最大尺寸并保持指定的纵横比。要根据另一个特定边的尺寸限制一个特定边，可以预先附加w,“或” h,表示想要约束的宽度或高度。

例如，如果一个尺寸受两个目标约束，则可以指示应该约束哪一边，通过 在比率前添加字母w（用于约束宽度）或h（用于约束高度），用逗号分隔。

例子2：文本a宽度全屏，根据16:9的比率设置高度（要约束的是h）

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="parent"
        app:layout_constraintdimensionratio="h,16:9"
        />

</android.support.constraint.constraintlayout>

九、链【chains】

在横轴或或者竖轴上的控件相互约束时，可以组成一个链式约束。链在单个轴（水平或垂直）上提供类似行的行为。另一个轴可以独立约束。

创建一个链

如果一组控件通过双向连接链接在一起，则它们被视为链。

链头
链由链的第一个元素（链的“头部”）上设置的属性控制：

链头是水平链的最左侧控件，垂直链的最顶部控件。

链的样式

可以通过 app:layout_constrainthorizontal_chainstyle或 app:layout_constraintvertical_chainstyle设置链式控件的样式。这个属性有点像 linearlayout中的 weight 属性平分布局。

• spread模式：元素将展开（默认样式）；
• spread_inside模式： 类似spread模式，但链的端点不会分散；
• 含有权重spread模式：如果设置了某个或某些控件match_constraint（0dp），这个或这些控件将分割可用空间；
• packed模式：链条的元素将被包装在一起。然后，子项的水平或垂直偏差属性将影响打包元素的定位；

例子1：spread模式

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_toleftof="@id/textb"
        app:layout_constrainthorizontal_chainstyle="spread"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_toleftof="@id/textc"
        />

    <textview
        android:id="@+id/textc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本c"
        android:background="#00ffd9"
        app:layout_constraintleft_torightof="@id/textb"
        app:layout_constraintright_torightof="parent"
        />

</android.support.constraint.constraintlayout>

例子2：spread_inside模式

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_toleftof="@id/textb"
        app:layout_constrainthorizontal_chainstyle="spread_inside"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_toleftof="@id/textc"
        />

    <textview
        android:id="@+id/textc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本c"
        android:background="#00ffd9"
        app:layout_constraintleft_torightof="@id/textb"
        app:layout_constraintright_torightof="parent"
        />

</android.support.constraint.constraintlayout>

例子3：含有权重spread模式

加权链
链的默认行为是在可用空间中平均分布元素。如果使用了一个或多个元素match_constraint（0dp），它们将使用可用的空白空间（在它们之间平均分配）。

属性app:layout_constrainthorizontal_weight和app:layout_constraintvertical_weight 将控制如何将空间利用的元素之间进行分配match_constraint（0dp）。例如，在包含两个元素的链上使用match_constraint，第一个元素使用权重2，第二个元素使用权重1，第一个元素占用的空间将是第二个元素占用的空间的两倍。

例子3.1：文本b和文本c平分可用空白空间

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_toleftof="@id/textb"
        app:layout_constrainthorizontal_chainstyle="spread"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_toleftof="@id/textc"
        />

    <textview
        android:id="@+id/textc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本c"
        android:background="#00ffd9"
        app:layout_constraintleft_torightof="@id/textb"
        app:layout_constraintright_torightof="parent"
        />

</android.support.constraint.constraintlayout>

 例子3.2：文本b占2份可用空白空间，文本c占1份可用空白空间

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_toleftof="@id/textb"
        app:layout_constrainthorizontal_chainstyle="spread"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_toleftof="@id/textc"
        app:layout_constrainthorizontal_weight="2"
        />

    <textview
        android:id="@+id/textc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本c"
        android:background="#00ffd9"
        app:layout_constraintleft_torightof="@id/textb"
        app:layout_constraintright_torightof="parent"
        app:layout_constrainthorizontal_weight="1"
        />

</android.support.constraint.constraintlayout>

 例子4：packed模式

 

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_toleftof="@id/textb"
        app:layout_constrainthorizontal_chainstyle="packed"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_toleftof="@id/textc"
        />

    <textview
        android:id="@+id/textc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本c"
        android:background="#00ffd9"
        app:layout_constraintleft_torightof="@id/textb"
        app:layout_constraintright_torightof="parent"
        />

</android.support.constraint.constraintlayout>

例子5：含有边距的packed模式

链中的边距
如果在链上指定了边距，则会考虑它们。在扩散链的情况下，将从分配的空间中扣除边距。

边距和链条（1.1）
在链中的元素上使用边距时，边距是相加的。

例如，在水平链上，如果一个元素定义了10dp的右边距而下一个元素定义了5dp的左边距，则这两个元素之间产生的边距为15dp。

在计算链用于定位项目的剩余空间时，会同时考虑项目及其边距。剩余空间不包含已设置的边距。

<?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"
    android:padding="8dp"
    >
    <textview
        android:id="@+id/texta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_toleftof="@id/textb"
        app:layout_constrainthorizontal_chainstyle="packed"
        android:layout_marginright="10dp"
        />

    <textview
        android:id="@+id/textb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本b"
        android:background="#b7ff00"
        app:layout_constraintleft_torightof="@id/texta"
        app:layout_constraintright_toleftof="@id/textc"
        android:layout_marginleft="5dp"
        />

    <textview
        android:id="@+id/textc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="文本c"
        android:background="#00ffd9"
        app:layout_constraintleft_torightof="@id/textb"
        app:layout_constraintright_torightof="parent"
        android:layout_marginleft="5dp"
        />

</android.support.constraint.constraintlayout>

 十、辅助布局【virtual helper objects】

guideline对象允许您创建相对于constraintlayout容器定位的水平和垂直指南。然后可以通过将小部件约束到这样的指导来定位小部件。在1.1中，barrier也group被添加了。

10.1、 guideline

参考《https://developer.android.google.cn/reference/android/support/constraint/guideline》

guideline表示约束布局的指导帮助对象的实用工具类。guideline不显示在设备上（它们被标记为view.gone），并且仅用于布局目的，它们只在constraintlayout中工作。

guideline可以设置类似于linearlayout中的orientation属性，设置垂直方向或者水平方向，若设置垂直方向，则水平方向的高度为0，若设置为水平方向，则垂直方向的宽度为0。

guideline可以是水平的，也是可以是竖直的。通过设置android:orientation属性：

• 垂直guideline的宽度为0，高度为父级constraintlayout的高度。
• 水平guideline的高度为0，宽度为父级constraintlayout的宽度。

guideline 具有以下的三种定位方式：

• app:layout_constraintguide_begin【距离父容器起始位置的距离（左侧或顶部）】
• app:layout_constraintguide_end【距离父容器结束位置的距离（右侧或底部）】
• app:layout_constraintguide_percent【距离父容器宽度或高度的百分比，取值范围：0.0~1.0】

例子1：按钮a和按钮b分别在屏幕一半区域的中间

<?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"
    android:padding="8dp"
    >
    <android.support.constraint.guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintguide_percent="0.5"
        android:orientation="vertical"/>

    <button
        android:id="@+id/buttona"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮a"
        android:background="#ffb300"
        app:layout_constraintleft_toleftof="parent"
        app:layout_constraintright_torightof="@id/guideline"
        />

    <button
        android:id="@+id/buttonb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮b"
        android:background="#b7ff00"
        app:layout_constraintleft_toleftof="@id/guideline"
        app:layout_constraintright_torightof="parent"
        />

</android.support.constraint.constraintlayout>

 

10.2、 barrier（added in 1.1）

参考《https://developer.android.google.cn/reference/android/support/constraint/barrier》

barrier，直译为障碍、屏障。在约束布局中，可以使用app:constraint_referenced_ids属性来引用多个带约束的组件，从而将它们看作一个整体。设置app:barrierdirection属性指定方向。

barrier是一个虚拟的辅助控件，它可以阻止一个或者多个控件越过自己，就像一个屏障一样。当某个控件要越过自己的时候，barrier会自动移动，避免自己被覆盖。

例子1：app:barrierdirection="start"效果【注意：建议添加上app:layout_constraintright_torightof="@id/barrier"】

<?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_pare

                    
                

赞 (0)

打赏 微信扫一扫

相关文章:

• 

  ConstraintLayoutDemo【约束性布局知识梳理】【基于1.1.3】

  版权声明：本文为HaiyuKing原创文章，转载请注明出处！ 前言 在较新版本的Android Studio中新建项目默认使用 Constraint... [阅读全文]
• 

  SQL Server AlwaysOn 集群 关于主Server IP与Listener IP调换的详细测试

  1. 背景 SQL Server 搭建AlwaysOn后，我们就希望程序连接时使用虚拟的侦听IP（Listener IP），而不再是主Server ... [阅读全文]
• 

  安卓开发笔记（二十五）：ViewPager的使用

  首先我们来看看运行之后的效果： 然后我们也不多说废话了，下面是这个项目所需要的全部代码，很多博主写这个都不把代码写完，因此笔者自己也琢磨了一会儿才把... [阅读全文]
• 

  oo第二次博客

  前言： 这是一篇面向对象作业总结，作业内容是模拟电梯调度，一共有三个阶段，具体要求不详述，第一阶段只要求先来先服务电梯，第二次支持捎带，第三次则需要... [阅读全文]
• 

  CentOS关机与重启命令详解

  Linux centos关机与重启命令详解 Linux centos重启命令： 1、reboot 2、shutdown -r now 立刻重启(ro... [阅读全文]

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实将立刻删除。

发表评论

验证码：