ConstraintLayout使用笔记

ConstraintLayout是官方推荐使用的布局，使用它可以有效的减少布局层数... 使用Android Studio创建布局文件时已经使用ConstraintLayout作为了默认根，布局这篇文字主要记录ConstraintLayout的一些使用及使用过程中遇到的问题。

一、相对位置属性

• layout_constraintLeft_toLeftOf :当前View的右侧和另一个View的右侧位置对齐，与RelativeLayout的alignLeft属性相似
• layout_constraintLeft_toRightOf :当前view的左侧会在另一个View的右侧位置 与RelativeLayout的toRightOf属性相似
• layout_constraintRight_toLeftOf :当前view的右侧会在另一个View的左侧位置 与RelativeLayout的toLeftOf属性相似
• layout_constraintRight_toRightOf :当前View的右侧和另一个View的右侧位置对其，与RelativeLayout的alignRight属性相似
• layout_constraintTop_toTopOf :头部对齐，与alignTop相似
• layout_constraintTop_toBottomOf :当前View在另一个View的下侧 与below相似
• layout_constraintBottom_toTopOf :当前View在另一个View的上方 与above相似
• layout_constraintBottom_toBottomOf ：底部对齐，与alignBottom属性相似
• layout_constraintBaseline_toBaselineOf :文字底部对齐,与alignBaseLine属性相似
• layout_constraintStart_toEndOf :同left_toRightOf
• layout_constraintStart_toStartOf :同left_toLeftOf
• layout_constraintEnd_toStartOf :同right_toLeftOf
• layout_constraintEnd_toEndOf :同right_toRightOf

二、Margins属性:同RelativeLayout属性

• android:layout_marginStart
• android:layout_marginEnd
• android:layout_marginLeft
• android:layout_marginTop
• android:layout_marginRight
• android:layout_marginBottom

三、Margins when connected to a Gone widget

当前View与另一个View绑定后，另一个View的属性设置为了Gone，则以下属性会生效

• layout_goneMarginStart
• layout_goneMarginEnd
• layout_goneMarginLeft
• layout_goneMarginTop
• layout_goneMarginRight
• layout_goneMarginBottom

四、权重

app:layout_constraintHorizontal_bias="0.3" （ app:layout_constraintVertical_bias="0.3"纵向）
可以通过设置app:layout_constraintHorizontal_bias属性进行位置的调整，表示距离左侧（因为是横向，纵向则是距离顶部）30%的的距离。默认为0.5，即居中

五、View大小

view的大小除了传统的wrap_content、指定尺寸、match_parent(官方不推荐使用match_parent)外，还可以设置为0dp（官方取名叫MATCH_CONSTRAINT），0dp在constraint有着特殊含义。他的作用会随着不同的设置有不同的含义：

1. layout_constraintWidth_default

• spread，默认值，占用所有的符合约束的空间
• percent，意思是按照父布局的百分比设置,需要layout_constraintWidth_percent设置百分比例
• wrap,意思匹配内容大小但不超过约束限制，注意和直接指定宽度为wrap_content的区别就是不超过约束限制。

Note：当宽度设置为wrap_content时，内容区域会超过约束（如TextView文本显示超出屏幕），可通过如下属性解决：

• app:layout_constrainedWidth=”true|false”
• app:layout_constrainedHeight=”true|false”

2.layout_constraintDimensionRatio

layout_constraintDimensionRatio，即宽和高成一定的比例，其值可以是"width:height"的形式，也可以是width/height的值。该属性生效的前提：宽和高其中有一项为0dp，有constraint。下面按照有几个0dp来分别介绍下：

• 如果只有一项为0dp，则该项值按照比例计算出来。比如高为20dp，宽为0dp，radio为"2:1",则最终宽为40dp
• 如果两项都为0dp，则尺寸会设置为满足约束的最大值并保持比例。因为这是系统计算的，有的时候不是我们想要的，我们也可以通过在前面加H、W来指定是哪一个边需要计算。例如"H,2:1",则是指宽度匹配约束，高度是宽度的1/2

3.max min

• layout_constraintWidth_min
• layout_constraintWidth_max
• layout_constraintHeight_max
• layout_constraintHeight_min

六、链（layout_constraintHorizontal_chainStyle）

如图，在一个水平或者竖直方向上，一排view两两互相约束，即为链

image

链的第一个元素称为链头，可以通过设置layout_constraintHorizontal_chainStyle来控制链的分布形式，分布形式有以下3种：

• spread 默认模式，效果如下图：

  
  QQ图片20190419191056.png
  

  代码如下：

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

    <TextView
        android:id="@+id/tvA"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#F44336"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="A"
        app:layout_constraintEnd_toStartOf="@id/tvB"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvB"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#8BC34A"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="B"
        app:layout_constraintEnd_toStartOf="@id/tvC"
        app:layout_constraintStart_toEndOf="@id/tvA"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvC"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#2196F3"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="C"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tvB"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

• spread_inside,效果如下：

  
  QQ图片20190419191348.png
  

  代码同上，仅app:layout_constraintHorizontal_chainStyle="spread_inside"的区别
  可配合layout_constraintHorizontal_weight使用，下图是1:1:2效果

  
  QQ图片20190419191725.png

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

    <TextView
        android:id="@+id/tvA"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#F44336"
        android:textColor="@color/white"
        app:layout_constraintHorizontal_weight="1"
        android:gravity="center"
        android:text="A"
        app:layout_constraintEnd_toStartOf="@id/tvB"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvB"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#8BC34A"
        android:textColor="@color/white"
        app:layout_constraintHorizontal_weight="1"
        android:gravity="center"
        android:text="B"
        app:layout_constraintEnd_toStartOf="@id/tvC"
        app:layout_constraintStart_toEndOf="@id/tvA"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvC"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="#2196F3"
        app:layout_constraintHorizontal_weight="2"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="C"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tvB"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

七、辅助组件

1.GuideLine

即参考线的意思，有水平参考线和竖直参考线两种。他的作用就像是一个虚拟的参考线，只是用来方便其他View以他为锚点来布局。
如上一篇所了解到的，ConstraintLayout 的定位原则就是一个View参考其他View的相对布局，如果有的时候当前布局没有合适的参考View，而建一个专门用于定位的View又会太重，这种情况正是GuideLine的用武之地。
Guideline的大部分的属性如layout_width都是不会生效的，而他的位置的确定是由下面三个属性之一来确定的：

• layout_constraintGuide_begin：距离父布局的左边或者上边多大距离
• layout_constraintGuide_end:距离父布局的右边或者下边多大距离
• layout_constraintGuide_percent：百分比，0~1，距离父布局的左边或者上边占父布局的比例

2.Group

Group是一个可以同时控制多个view 可见性的虚拟View。
可以向下面这样使用

  <android.support.constraint.Group
       ...
        android:visibility="invisible"
        app:constraint_referenced_ids="a,c" />

constraint_referenced_ids用来指定这个Group包好的view

• xml中，可见性配置的优先级：Group优先于View，下层Group优先于上层。

• Group只可以引用当前ConstraintLayout下的View，子Layout 下的View不可以。

• app:constraint_referenced_ids里直接写的是id的字符串，初始化后会通过getIdentifier来反射查找叫该名字的id。所以如果你的项目用了类似AndResGuard的混淆id名字的功能，切记不要混淆app:constraint_referenced_ids里的id，否则在release版本就会因找不到该id而失效。或者也可以通过代码setReferencedIds来设置id。

参考文章