ConstraintLayout 约束布局（1）

时间 2019-11-16

标签 constraintlayout 约束布局繁體版

原文原文链接

一约束布局简介

A ConstraintLayout is a android.view.ViewGroup which allows you to position and size widgets in a flexible wayandroid

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta3'bash

约束布局做为Google大力推广的布局方式，可谓集万千宠爱于一身：app

高性能：界面基本能够一层布局搞定，不用嵌套多层布局。
功能强大：有百分比布局、设置自身宽高比例，各类辅助组件。
可拖拽编辑：这就不推荐了，须要的可查看郭神文章Android新特性介绍，ConstraintLayout彻底解析

缺点就是，用了约束布局以后，再也切不回之前的布局方式了，重度依赖。ide

TODO： 2.0的自定义Helper和motionLayout还未明白，先不记录，后期学完再补进来。布局

二基本布局方式

2.1 基本布局属性

从名字上看，可能大体明白其对齐方式（就是自身的哪一边对齐目标view的哪一边），就不详细列出所有了。性能

ConstraintLayout	对齐方式
app:layout_constraintStart_toStartOf	自身左边与目标左边对齐
app:layout_constraintStart_toEndOf	自身左边与目标右边对齐
...	...

对于约束布局的定位对齐方式，能够将其想象成高中物理的拉力。app:layout_constraintStart_toStartOf表示自身的左边被目标view的左边拉住；app:layout_constraintEnd_toEndOf表示自身的右边被目标view的右边拉住flex

假设一个button要在父布局居中显示，则只须要它的上下左右被父布局的上下左右拉住便可：ui

<androidx.constraintlayout.widget.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我要居中显示"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>
复制代码

2.2 偏移量bias

约束布局还提供了一个设置偏移量的功能。好比，如今居中显示烦了，要往左边靠一点。能够理解为左边的拉力我要大一点，则能够经过设置bias来实现。spa

app:layout_constraintHorizontal_bias：水平方向上的偏移，取值范围：0f-1.0f（0为靠向最左边，1为靠到最右边）
app:layout_constraintVertical_bias：垂直方向上的偏移，取值范围：0f-1.0f（0为靠在最上边，1为最下边）

...
app:layout_constraintHorizontal_bias="0.2"
...

复制代码

2.3 margin

设置margin与以前方式同样，都是android:layout_marginXXX，不一样的是，要使margin生效，必须有同一方向上的约束拉力。即要marginBottom就必须有一个app:layout_constraintBottom_toXXXOf.net

三大小设置

3.1 约束布局下的三种大小设置模式

约束布局下，不使用MATCH_PARENT，保留WRAP_CONTENT，同时还可使用约束布局特有的三种大小设置模式：spread，wrap，percent；三者能够经过app:layout_constraintWidth_default或app:layout_constraintHeight_default设置。

注：使用约束布局的大小设置，须要先将要设置的宽或高指定为0dp

3.1.1 spread：默认

app:layout_constraintXXX_default="spread",是默认的，表示在约束条件下的最大尺寸；

一样能够将其想象成拉力，假设view宽为0dp，左边与ViewA右边对齐，右边与ViewB左边对齐，则左边会被拉伸至ViewA的右边，右边会被拉伸至ViewB的左边：（下面的图为了显示清楚，故意加了margin）

...
 <TextView
        android:id="@+id/viewA"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:textSize="20sp"
        android:text="ViewA"
        android:textColor="@android:color/white"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/viewB"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:gravity="center"
        android:textSize="20sp"
        android:text="viewB"
        android:textColor="@android:color/white"
        android:background="@android:color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
    <Button
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="我要被拉伸"
        android:textSize="20sp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:layout_constraintStart_toEndOf="@id/viewA"
        app:layout_constraintEnd_toStartOf="@id/viewB"
        app:layout_constraintTop_toTopOf="parent"
        />
    ...
复制代码

3.1.2 wrap模式

app:layout_constraintWidth_default="wrap"：自适应大小，但不超过约束条件下的最大尺寸。

仍是上面的例子，若是是传统的WRAP_CONTENT，当内容较大时，会直接超过约束条件，如图：

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="拉伸我要被要被拉伸我要被拉伸"
        android:textSize="20sp"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintStart_toEndOf="@id/viewA"
        app:layout_constraintEnd_toStartOf="@id/viewB"
        app:layout_constraintTop_toTopOf="parent"
        />
复制代码

当指定为wrap模式，则会保留约束条件：

...
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
...
复制代码

另外，针对传统的WRAP_CONTENT模式，约束布局有额外的属性，使得它也能保留约束条件：app:layout_constrainedWidth="true"此时与wrap模式同样的效果。

3.1.3 percent模式

app:layout_constraintWidth_default="percent"：以父布局的百分比做为自身的大小，即百分比布局。（利用次特性可解决部分常见适配）,经过app:layout_constraintWidth_percent设置比例大小，0f-1.0f

...
android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.8"
...
复制代码

3.1.4 指定宽高比（ratio）

app:layout_constraintDimensionRatio:约束布局还能够指定view自身宽高比例。

其值能够为“width:height”或者“width/height”，如宽是高的2倍：app:layout_constraintDimensionRatio="2:1"或app:layout_constraintDimensionRatio="2"

要使其生效的话，必须将对应的宽或高设置为0dp。例如宽为0dp，高为10dp，app:layout_constraintDimensionRatio=2:1以后，宽最终为20dp；

若是宽高两项都为0dp的话，则最终尺寸会设置为符合约束的最大尺寸，同时保持设置的比例。这样有时结果不是咱们所想要的，咱们能够指定宽或高（H,W）哪一边约束条件来肯定尺寸，哪一边经过比例来肯定尺寸；

如app:layout_constraintDimensionRatio="W,2:1"则指明宽按照比例来计算最终尺寸，而高则根据约束条件；app:layout_constraintDimensionRatio="H,2:1"则相反。可自行体验下。

3.1.5 最大和最小值（max/min）

这个就和属性名称同样的意思啦：

app:layout_constraintHeight_min
app:layout_constraintWidth_min
app:layout_constraintHeight_max
app:layout_constraintWidth_max

四链（chain）布局

链式布局是约束布局经常使用的另外一个强大功能，能够快速实现等分布局等，还能够实现相似LinearLayout布局的weight比重功能。

约束链具备三种模式：

spread：view之间均匀分布
spread_inside：除了约束链的头部和尾部贴在两边，其他均匀分布
packed：全部view紧贴在一块儿，默认居中

（gif是在medium上看到的，原连接一会儿没找到）

4.1 构建约束链

约束链具备水平方向和垂直方向的。

将多个view构建成一个水平方向的链，则须要多个view在水平方向上两两约束

<ImageView
        android:id="@+id/img1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img1"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/img2"
        android:layout_marginTop="20dp"
        />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img2"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toEndOf="@id/img1"
        app:layout_constraintTop_toTopOf="@id/img1"
        app:layout_constraintEnd_toStartOf="@+id/img3"
        />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img3"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toEndOf="@id/img2"
        app:layout_constraintTop_toTopOf="@id/img1"
        app:layout_constraintEnd_toEndOf="parent"
        />
复制代码

这就建成了一条水平线上的约束链。垂直方向上的也相似，保持view 之间在垂直方向上两两约束便可。

4.2 改变链的模式

链的第一个view，即img1，称为链头。在链头上设置app:layout_constraintHorizontal_chainStyle或app:layout_constraintVertical_chainStyle可分别设置水平或垂直链的模式。

spread（默认）：

app:layout_constraintVertical_chainStyle="spread"
复制代码

spread_inside：

packed：

4.3 在链上设置权重（weight）

app:layout_constraintHorizontal_weight/app:layout_constraintVertical_weight分别设置水平和垂直链上的权重

注意：要使其生效，必须将大小指定为0dp

<ImageView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="1"
        ...
        />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="2"
        ...
        />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="100dp"
        app:layout_constraintHorizontal_weight="2"
       ...
        />
复制代码

五圆形布局

约束布局还提供一种炫酷的圆形布局：能够以角度和距离约束某个view中心相对于另外一个view的中心。

实际开发没怎么用过，实现相似钟表效果就很不错。

app:layout_constraintCircle : 圆心，值是某个view的id
app:layout_constraintCircleRadius : 半径
app:layout_constraintCircleAngle ：角度，值是从0-360，0是指整上方

<ImageView
        android:id="@+id/img4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img3"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageView
        android:id="@+id/img5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img5"
        android:scaleType="centerCrop"
        app:layout_constraintCircle="@id/img4"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="180dp"
        />
复制代码

六辅助组件

约束布局还提供了一系列组件使得能够更灵活地布局。如Group能够同时控制一堆view的可见性，GuideLine能够虚拟一条辅助线等等。

6.1 Group：控制可见性

Group是一个虚拟视图，能够经过把viewapp:constraint_referenced_ids放到里面，统一同时控制这些view的可见性。

<androidx.constraintlayout.widget.Group
        android:id="@+id/mGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="img1,img2"
        />
复制代码

Group也是继承自view的，直接在代码中像普通view同样设置可见性，就能同时控制到img1，img2的可见性了。

mGroup.visibility = View.VISIBLE
复制代码

6.2 Guideline：辅助线

Guideline至关于一条虚拟辅助线，可分为水平、垂直线，帮助定位的。

考虑一个需求，两个view，要在屏幕中间一左一右，如果传统定位，就弄一个线性布局放两个view，而后再把这个线性布局居中。使用约束布局，能够在屏幕正中间放一条虚拟垂直辅助线，而后两个view分别放在这条线左右便可。

android:orientation设置垂直仍是水平
app:layout_constraintGuide_percent经过百分比设置位置，取值能够是0f-1.0f或0%-100%
app:layout_constraintGuide_begin设置相对start/top的偏移量，dp
app:layout_constraintGuide_end设置相对end/bottom的偏移量，dp

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"
        />

    <ImageView
        android:id="@+id/img1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img1"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="50dp"
        />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img2"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/guideline"
        android:layout_marginTop="20dp"
        android:layout_marginStart="50dp"
        />
复制代码

6.3 Barrier：获取边界范围

Barrier能够获取多个约束view的边界。能够得到所包含的多个view的最左最右等边界。

考虑这样一个需求，左边是text1和text2，另外有一个view，必须放在这两个text的右边

<TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="text1"
        android:background="@android:color/black"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="10dp"
        />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="20dp"
        android:text="text2"
        android:background="@android:color/holo_red_dark"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/text1"
        android:layout_marginTop="20dp"
        />

        <ImageView
            android:id="@+id/img1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/img1"
            android:scaleType="centerCrop"
            app:layout_constraintTop_toTopOf="@id/text1"
            app:layout_constraintBottom_toBottomOf="@id/text2"
            app:layout_constraintStart_toEndOf="@id/text1"
            android:layout_marginStart="50dp"
            />
复制代码

由于img1只能有一个描点，因此以text1为约束点。但text一、text2宽度时动态的，当text2文本过长时，会发生遮挡。

此时barrier就派上用场了，它能够动态获取text一、text2的最右侧，这样只要img1依赖改成Barrier的最右侧，就能够解决问题了

app:barrierDirection，取值有top、bottom、left、right、start、end，用于设置获取的是哪侧，好比上面的例子，获取的是最右侧start/right。
app:constraint_referenced_ids设置须要包含的view的id

...
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="text1,text2"
        app:barrierDirection="end"
        />
    <ImageView
        android:id="@+id/img1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/img1"
        android:scaleType="centerCrop"
        app:layout_constraintTop_toTopOf="@id/text1"
        app:layout_constraintBottom_toBottomOf="@id/text2"
        app:layout_constraintStart_toEndOf="@id/barrier"
        android:layout_marginStart="50dp"
        />
    ...
复制代码

未完待续...

约束布局2.0增长了Layer、State、Flow等高效率组件，因文章篇幅，下一篇补上。

ConstraintLayout 约束布局 （1）

一 约束布局简介

二 基本布局方式