ConstraintLayout 学习总结

时间 2019-11-24

标签 constraintlayout 学习总结繁體版

原文原文链接

ConstraintLayout 的简介

1.ConstraintLayout，中文称约束布局，在2016年Google I/O大会时提出，2017年2月发布正式版，目前稳定版本为1.0.2。约束布局做为Google从此主推的布局样式，能够彻底替代其余布局，下降页面布局层级，提高页面渲染性能。android

2.ConstraintLayout的优劣优势：当布局出现多层嵌套的时候，使用ConstraintLayout能够减小布局嵌套，平时咱们基本都是用LinearLayout和RelativeLayout，一层LinearLayout嵌套会致使onMeasure测量两次，而RelativeLayout是四次，虽然咱们感受不到，为了更好就要项目性能和提高自我，有必要去学习一下。另一点ConstraintLayout也向下兼容到API 9，因此你再也没有理由不用了。缺点：当布局没嵌套的时候，ConstraintLayout要想实现一些效果须要设置太多的属性，相对于我的来讲比较繁琐。git

3.若是使用以及要求第一步：在project的build.gradle设置谷歌的远程仓库github

repositories {
    maven {
        url 'https://maven.google.com'
    }
}
复制代码

第二步：在要使用ConstraintLayout的module的build.gradle文件中引入约束布局库canvas

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
复制代码

ConstraintLayout 属性介绍

####相对位置属性bash

layout_constraintTop_toTopOf — 指望视图的上边对齐另外一个视图的上边。
layout_constraintTop_toBottomOf — 指望视图的上边对齐另外一个视图的底边。
layout_constraintTop_toLeftOf — 指望视图的上边对齐另外一个视图的左边。
layout_constraintTop_toRightOf — 指望视图的上边对齐另外一个视图的右边。
layout_constraintBottom_toTopOf — 指望视图的下边对齐另外一个视图的上边。
layout_constraintBottom_toBottomOf — 指望视图的底边对齐另外一个视图的底边。
layout_constraintBottom_toLeftOf — 指望视图的底边对齐另外一个视图的左边。
layout_constraintBottom_toRightOf — 指望视图的底边对齐另外一个视图的右边。
layout_constraintLeft_toTopOf — 指望视图的左边对齐另外一个视图的上边。
layout_constraintLeft_toBottomOf — 指望视图的左边对齐另外一个视图的底边。
layout_constraintLeft_toLeftOf — 指望视图的左边对齐另外一个视图的左边。
layout_constraintLeft_toRightOf — 指望视图的左边对齐另外一个视图的右边。
layout_constraintRight_toTopOf — 指望视图的右边对齐另外一个视图的上边。
layout_constraintRight_toBottomOf — 指望视图的右边对齐另外一个视图的底边。
layout_constraintRight_toLeftOf — 指望视图的右边对齐另外一个视图的左边。
layout_constraintRight_toRightOf — 指望视图的右边对齐另外一个视图的右边。
复制代码

以上属性都是设置当前控件相对控件的位置关系，以layout_constraintLeft_toLeftOf=@id/btn_A为例子，其中layout_部分是固定格式，分为两部分，第一部分constraintLeft是表示当前控件的左边界，toLeftOf表明就是当前控件在btn_A的左边，app:layout_constraintBaseline_toBaselineOf="@id/btn_A" 这个比较特殊，这个至关于当前的控件的水平中心线与btn_A的水平中心线为准，下面是例子app

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_relative_position"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="zr.com.constraintdemo.normal.RelativePositionActivity">

    <Button
        android:id="@+id/btn_A"
        android:text="A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <Button
        android:text="在A下方,与A左对齐"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/btn_A"
        app:layout_constraintLeft_toLeftOf="@id/btn_A"
        android:layout_marginTop="32dp"
        />

    <Button
        android:text="在A上方,与A居中对齐"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/btn_A"
        app:layout_constraintLeft_toLeftOf="@id/btn_A"
        app:layout_constraintRight_toRightOf="@id/btn_A"
        android:layout_marginBottom="32dp"
        />

    <Button
        android:text="baseline对齐"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        app:layout_constraintBaseline_toBaselineOf="@id/btn_A"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="8dp"
        android:gravity="bottom"
        />

    <Button
        android:text="水平居中对齐"
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:gravity="bottom"
        app:layout_constraintTop_toTopOf="@id/btn_A"
        app:layout_constraintBottom_toBottomOf="@id/btn_A"
        app:layout_constraintLeft_toRightOf="@id/btn_A"
        android:layout_marginLeft="16dp"
        />

</android.support.constraint.ConstraintLayout>
复制代码

相对位置的总结：maven

一个控件通常只须要相对于一个控件设置相对位置，与Java的单继承类似，除了链表结构，后面会提到
设置app:layout_constraintBaseline_toBaselineOf="@id/btn_A"属性以后再设置上下位置的约束无效，设置左右的约束属性仍是有效的

####偏移属性（BIAS）ide

在设置控件的居中属性以后，经过偏移属性能够设置让控件更偏向于依赖控件的某一方，偏移设置为0～1之间的值。相应属性：工具

layout_constraintHorizontal_bias // 水平偏移
layout_constraintVertical_bias // 垂直偏移

举个例子：布局

<Button
        android:text="水平偏移30%"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        />
复制代码

这个例子是最上面哪一个水平偏移30%的关于偏移属性的总结：

设置偏移以前必定要设置一个相对位置，若是没有相对位置，偏移时无效的
设置的相对位置必定要是，app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"
水平方向的必定要先设置app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" 垂直方向的必定要设置app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
偏移值默认从0-1的数字，固然也能够设置负数和大于1的数字，可是效果就是显示在屏幕外
水平偏移量是屏幕宽度的偏移倍数，垂直偏移时屏幕高度的偏移倍数

####可见性属性（VISIBILITY）

#####（一）当控件设置GONE的时候，虽然控件GONE了，可是控件之间的约束条件还在例子以下：

<?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:id="@+id/activity_bias"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:visibility="gone"
        android:id="@+id/btn_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_marginLeft="16dp"
        android:gravity="center"
        android:text="与A水平居中对齐"
        app:layout_constraintBottom_toBottomOf="@id/btn_A"
        app:layout_constraintLeft_toRightOf="@id/btn_A"
        app:layout_constraintTop_toTopOf="@id/btn_A" />

</android.support.constraint.ConstraintLayout>
复制代码

效果

#####（二）控件设置为GONE的时候，也能够设置GONE以后的app:layout_goneMarginLeft="100dp" ，有些时候想实现特殊效果可使用

####尺寸约束

minWidth ：最小宽度，即便没有内容时也要占有minWidth 的宽度，前提是宽度属性android:layout_width="wrap_content" ，当内容的时候宽度大于minWidth 时，控件宽度自动扩充
填充模式：相似LinearLayout 的android:layout_weight="1"属性，区别就是，若是想水平方向最大填充，设置android:layout_width="0dp"，必定要设置，不然无效，同理垂直方向。
constrainedWidth：constrainedWidth有两个值，当为true的时候就开启了控件的最小宽度或者高度，不然相反，配合layout_constraintWidth_min属性设置最小宽度，须要注意的是，当属性中存在minWidth 时，这个属性是失效的，以minWidth 为准
百分比布局：首先必需要设置app:layout_constraintWidth_default="percent" app:layout_constraintHeight_default="percent"这两个属性，还有android:layout_width="0dp" android:layout_height="0dp"属性，不然以后设置的都是无效的， app:layout_constraintWidth_percent="0.5" app:layout_constraintHeight_percent="0.3"设置这两个就能够实现相对于屏幕的百分比宽高了

####控件宽高比（RATIO）

这个对于咱们开发者简直就是福利，若是是动态设置宽高相对麻烦。 layout_constraintDimentionRatio属性表明设置控件宽高的比例，前提是控件的宽高必须有一个设置为0dp,不然不去做用

第一种方式：直接设置一个float值，表示宽高比，记住是宽高比，宽高比！！！

app:layout_constraintDimensionRatio="2"
复制代码

第二种方式：使用比值，例如：

app:layout_constraintDimensionRatio="16:9"
或者
app:layout_constraintDimensionRatio="H,16:9"
复制代码

这种方式，若是没有前缀就表明是宽高比，若是加了前缀H表明比值的第一个数字是高度，W是宽度

说明：这里面坑不少，这里就一一简单的介绍一下，若是宽高都设置的属性为0dp，首先屏幕高度确定大于宽度，因此宽度上面必定处于填充状态，这0-1之间有个值正好是屏幕宽高比，这时候控件正好填充屏幕，若是想不想宽度被填充至少要保证宽高其中一个属性的值不为0dp，只要有一个属性不为0dp的时候，这时候比例的根据就是内容的填充宽高来定而不是屏幕。当宽高两个值都不为0dp的时候，这时候比例属性无效。而且这个比例会自动计算内容是否须要换行展现更好的比例，因此很是智能。

####链式约束（CHAIN）

链这个概念是约束布局新提出的，它提供了在一个维度（水平或者垂直），管理一组控件的方式。

处于水平或者垂直方向第一个控件为chain head(链头)，当咱们给chain head设置layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle，整条链的状态将会发生改变。

CHAIN_SPREAD – 元素之间的空间将会均匀分布，这是系统默认的排列方式
CHAIN_SPREAD – 首尾的两条链将不会分配空间，其他内部的链将均匀分配空间。
CHAIN_PACKED – 首尾两条链将会分配空间，链内部将不会分配空间
Weight 经过设置的weight值来分配元素的宽或者高

注意：

layout_constraintHorizontal_chainStyle属性值是小写的，文档里给出的是大写的。
weight样式的实现有一个前提，chainStyle必须为默认的spread样式
设置Weight样式时记得把元素中的宽或者设置成0dp

Guideline

首先说明一下，Guideline只能用于ConstraintLayout中，是一个工具类，不会被显示，仅仅用于辅助布局。它能够是horizontal或者 vertical的。（例如：android:orientation="vertical"）

vertical的Guideline宽度为零，高度为ConstraintLayout的高度
horizontal的Guideline高度为零，宽度为ConstraintLayout的高度

定位Guideline有三种方式：

指定距离左侧或顶部的固定距离（layout_constraintGuide_begin）
指定距离右侧或底部的固定距离（layout_constraintGuide_end）
指定在父控件中的宽度或高度的百分比（layout_constraintGuide_percent）

Guideline 的源码以下：

public class Guideline extends View {
    public Guideline(Context context) {
        super(context);
        super.setVisibility(8);
    }
    public Guideline(Context context, AttributeSet attrs) {
        super(context, attrs);
        super.setVisibility(8);
    }
    public Guideline(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        super.setVisibility(8);
    }
    public Guideline(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr);
        super.setVisibility(8);
    }
    public void setVisibility(int visibility) {
    }
    public void draw(Canvas canvas) {
    }
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        this.setMeasuredDimension(0, 0);
    }
}
复制代码

源码说明：

它默认是GONE的。8 就是View.GONE的值。
它的public void setVisibility(int visibility)方法被空实现了，因此用户也没办法改变它的可见度。
推导出它必定是GONE的。在屏幕上不可见
this.setMeasuredDimension(0, 0); 和public void draw(Canvas canvas)的空实现，代表这是一个超轻量的View，不可见，没有宽高，也不绘制任何东西。仅仅做为咱们的锚点使用。

##总结 ConstraintLayout布局刚开始学习的时候确实很是麻烦，可是全部的新鲜事物都是入手难，光理论确定是不行的，总之本身动手丰衣足食。我本身也作个了demo传送门，能够方便参考，谢谢你们提供意见！