ConstraintLayout基本使用

作者: wuchao226 | 来源:发表于2019-03-27 18:07 被阅读0次

使用前先在 build.gradle 文件中添加：

implementation 'com.android.support.constraint:constraint-layout:1.1.3'

一、属性介绍

ConstraintLayout 基础属性和 RelativeLayout 属性对比：

ConstraintLayout	RelativeLayout	作用
layout_constraintLeft_toLeftOf	layout_alignLeft	与目标组件左对齐
layout_constraintLeft_toRightOf	layout_toRightOf	在目标组件的右边
layout_constraintRight_toRightOf	layout_alignRight	与目标组件右对齐
layout_constraintRight_toLeftOf	layout_toLeftOf	在目标组件的左边
layout_constraintTop_toTopOf	layout_alignTop	与目标组件上对齐
layout_constraintTop_toBottomOf	layout_below	在目标组件底部
layout_constraintBottom_toBottomOf	layout_alignBottom	与目标组件下对齐
layout_constraintBottom_toTopOf	layout_above	在目标组件的上部
layout_constraintBaseline_toBaselineOf	layout_alignBaseline	与目标组件基线对齐

对于和left、right相似的start、end基础的属性，这里不再赘述，大家可以自行查阅。当然了，除了一些基础的属性，ConstraintLayout也有自己特有的属性，这里向大家介绍一下常用的属性：

1. bias（偏移量）

长度和高度的偏移量

属性	介绍
layout_constraintHorizontal_bias	水平方向的偏移量（小数）
layout_constraintVertical_bias	竖直方向的偏移量（小数）

2. Circular positioning（圆形定位）

以一个控件为圆心设置角度和半径定位

属性	介绍
layout_constraintCircle	关联另一个控件，将另一个控件放置在自己圆的半径上，会和下面两个属性一起使用
layout_constraintCircleRadius	圆的半径
layout_constraintCircleAngle	圆的角度

3. Percent dimension（百分比布局）

宽高设置百分比长度

属性	介绍
layout_constraintWidth_default	宽度类型设置，可以设置percent、spread和wrap
layout_constraintHeight_default	高度类型设置，同上
layout_constraintWidth_percent	如果layout_constraintWidth_percent设置的百分比，这里设置小数，为占父布局宽度的多少
layout_constraintHeight_percent	设置高度的大小，同上

4. Ratio（比例）

控件的宽和高设置一定比例

属性	介绍
layout_constraintDimensionRatio	宽高比

5. Chain Style（约束链类型）

设置约束链类型，约束链类型包括：spread，spread_inside和packed

属性	介绍
layout_constraintHorizontal_chainStyle	横向约束链
layout_constraintVertical_chainStyle	纵向约束链

二、具体使用

1.Percent dimension

如果将ImageView的宽度设置为父布局宽度的70%，这个时候我们就可以考虑使用百分比属性了，代码如下：

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

    <android.support.v7.widget.AppCompatImageView
        android:layout_width="0dp"
        android:layout_height="200dp"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.7"
        android:src="@mipmap/ic_launcher"
        android:scaleType="centerCrop"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

效果：

可以看到，我们这里先将layout_constraintWidth_default属性设置为percent，接着将layout_constraintWidth_percent设置为0.7，同理，我们可以对layout_constraintHeight_default和layout_constraintHeight_percent进行高度的设置。这里需要注意的是：

需要先将布局约束之后，才可以进行宽度或者高度的设置，如上述代码，我们先添加了app:layout_constraintTop_toTopOf="parent"和app:layout_constraintLeft_toLeftOf="parent"，将ImageView设置在左上角，如果没有先进行控件的约束，会发现我们的设置的百分比这个属性没有起作用。后面的很多属性也是如此，需要先对控件进行约束，才能对我们的控件设置一些属性。

2.居中和偏移(bias（偏移量）)

在RelativeLayout中，把控件放在布局中间的方法是把layout_centerInParent设为true，而在ConstraintLayout中的写法是：

app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

意思是把控件的上下左右约束在布局的上下左右，这样就能把控件放在布局的中间了。同理RelativeLayout中的水平居中layout_centerHorizontal相当于在ConstraintLayout约束控件的左右为parent的左右；RelativeLayout中的垂直居中layout_centerVertical相当于在ConstraintLayout约束控件的上下为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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.AppCompatImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@mipmap/welfare"
        android:scaleType="centerCrop"
        app:layout_constraintVertical_bias="0.2"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

效果：

app:layout_constraintHorizontal_bias="0.1"代表水平方向往右偏移10%，app:layout_constraintVertical_bias="0.2"代表竖直方向往下偏移20%。

想要设置偏移，必须先将控件设置父布局居中。

3.比例(Ratio)

将控件比如ImageView设置长:宽=2: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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.AppCompatImageView
        android:layout_width="200dp"
        android:layout_height="0dp"
        android:src="@mipmap/welfare"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

效果：

如果需要按照比例设置控件，这里需要先将layout_width或者layout_height一方设置为0dp，另一个设置为正常比例，接着给layout_constraintDimensionRatio设置比例，例如app:layout_constraintDimensionRatio="2:1".

4.chain(约束链)

Chain 链是一种特殊的约束让多个 chain 链连接的 Views 能够平分剩余空间位置。在 Android 传统布局特性里面最相似的应该是 LinearLayout 中的权重比 weight ，但 Chains 链能做到的远远不止权重比 weight 的功能。

约束链的三种类型，分别是spread、spread_inside和packed：

spread：视图均匀分布。
spread_inside：除了约束链的头部和尾部贴在两边的约束上，其余均匀分布。
packed：将视图打包在一起，默认居中。

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

    <!-- 在第一个控件设置chain_style，第一个和最后一个TextView也要设置
   好约束，上下控件也要互为约束 -->
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt1"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/txt2"
        android:layout_width="wrap_content"
        android:text="txt1"
        android:layout_height="wrap_content"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/txt1"
        app:layout_constraintRight_toLeftOf="@+id/txt3"
        android:text="txt2"
        android:layout_height="wrap_content"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/txt3"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toRightOf="@+id/txt2"
        android:text="txt3"
        android:layout_height="wrap_content"/>

</android.support.constraint.ConstraintLayout>

效果：

textView 中的约束属性 app:layout_constraintHorizontal_chainStyle="spread" 就是指定了链模式 spread 你可以通过修改成 spread inside 或 packed 来切换链模式，而且这个约束属性必须在链头，即是链组件中的第一个组件。

spread_inside 效果：

packed 效果：

Chain Style

在链条里面，可以使用weight和bias：

spread + weight-将元素的尺寸设置为MATCH_CONSTRAINT时，可以与weight平分空间
packed + bias- 前面说过bias是偏移的意思，这里就是将链条集体偏移。

5.Guideline

Guideline是只能用在ConstraintLayout布局里面的一个工具类，用于辅助布局，类似为辅助线，可以设置android:orientation属性来确定是横向的还是纵向的

当设置为vertical的时候，Guideline的宽度为0，高度是parent也就是ConstraintLayout的高度
同样设置为horizontal的时候，高度为0，宽度是parent的宽度

重要的是Guideline是不会显示到界面上的，默认是GONE的。

Guideline还有三个重要的属性，每个Guideline只能指定其中一个：

layout_constraintGuide_begin，指定左侧或顶部的固定距离，如100dp，在距离左侧或者顶部100dp的位置会出现一条辅助线
layout_constraintGuide_end，指定右侧或底部的固定距离，如30dp，在距离右侧或底部30dp的位置会出现一条辅助线
layout_constraintGuide_percent，指定在父控件中的宽度或高度的百分比，如0.8，表示距离顶部或者左侧的80%的距离。

示例：

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guidelineBegin"
    app:layout_constraintGuide_begin="100dp"
    android:orientation="vertical"/>
<Button
    android:text="Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"
    android:layout_marginTop="16dp"
    app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guidelineEnd"
    app:layout_constraintGuide_end="100dp"
    android:orientation="vertical"/>
<Button
    android:text="Button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/buttonEnd"
    app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"
    android:layout_marginTop="48dp"
    app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
    android:id="@+id/guidelinePercent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.8" />
<Button
    android:text="Button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/buttonPercent"
    app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"
    android:layout_marginTop="96dp"
    app:layout_constraintTop_toTopOf="parent" />

效果：

当你要用一个控件占屏幕宽度的一半的时候，可以用layout_constraintGuide_percent，如下面代码：

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guidelineBegin"
    app:layout_constraintGuide_percent="0.5"
    app:layout_constraintStart_toStartOf="@id/button"
    android:orientation="vertical"/>
<Button
    android:text="Button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/guidelineBegin"
    android:layout_marginTop="16dp"
    app:layout_constraintTop_toTopOf="parent" />

效果：

6.Barrier

Barrier 是用多个 View 作为限制源来决定自身位置的一种辅助线.
Barrier同Guideline一样，不会被显示。Barrier的使用效果：

Barrier效果

可以看到，中间的线就是我们的Barrier，会随着左侧控件组的最长侧变化而改变Barrier的位置，从而改变右侧控件的位置。

 <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="warehouse"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="wrap_content"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:text="hospitalhospitalhospital"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        android:layout_height="wrap_content"/>

    <!-- constraint_referenced_ids包含我们需要包含的组件，以这些组件的某一侧为基准 -->
    <!-- barrierDirection面向包含的组件 -->
    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        app:barrierDirection="right"
        app:constraint_referenced_ids="tv1,tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="lorem_ipsumlorem_ipsumlorem_ilorem_ipsumlorem_ipsumlorem_ipsumlorem_ipsumpsumlorem_ipsumlorem_ipsumlorem_ipsumwww"
        app:layout_constraintStart_toEndOf="@+id/barrier"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="wrap_content"/>

其中 constraint_referenced_ids 指定限定源id,多个id用逗号隔开
app:barrierDirection 指定限制的方向 , 有 left, right, top, bottom, start, end, 6种。

上面代表的是 barrier 以 tv2 和 tv1 两者最右侧为基准线来作为自己的定位

7.Circular positioning

Circular positioning 称之为圆形定位，就是以目标控件为圆心，通过设置角度和半径确定我们当前控件的位置，
可以设置的属性有：

layout_constraintCircle：引用另一个控件的 id。
layout_constraintCircleRadius：到另一个控件中心的距离。
layout_constraintCircleAngle：控件的角度（顺时针，0 - 360 度）。

如官方图：

Circular positioning

示例：

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_menu"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        android:tint="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp"
        android:layout_height="50dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="315"
        app:layout_constraintCircleRadius="100dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="100dp" />

效果：

8.Group

Group通过app:constraint_referenced_ids添加对子View的引用，然后统一的显示或者隐藏控件。

<android.support.constraint.Group
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="btn1,btn2"/>

<Button
    android:id="@+id/btn1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮1"/>

<Button
    android:id="@+id/btn2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="按钮2"
    app:layout_constraintTop_toBottomOf="@id/btn1"/>

别将view放Group包起来.这样会报错,因为Group只是一个不执行onDraw()的View.

使用多个 Group 时，尽量不要将某个View重复的放在多个 Group 中，实测可能会导致隐藏失效.