Android——ConstraintLayout布局的强大、解决适配问题

注：本博客所以内容均是本人学习记录，参考了很多大佬的博客，有啥侵权的，请联系我

刚开入手Android的时候习惯使用线性布局LinearLayout和RelativeLayout相对布局,这两者布局基本能处理近9成的UI布局，但是存在一定的问题，而且百分比布局用的人很少，后面学习本文记录的google最新推出的布局——约束布局ConstraintLayout

这个布局很强大，一个布局就可以替代线性布局、相对布局、百分比布局、帧布局··· 是一个完全扁平化的布局，不需要嵌套直接了当提升了UI渲染的性能

废话不多说 Let’s go

ConstraintLayout中宽高0代表：MATCH_CONSTRAINT,这个布局通过约束去控制UI的显示，而不是通过设定view的大小

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

一、实现相对布局的上下左右

layout_constraintLeft_toLeftOf：当前View左边在某个View（或者父布局parent）的左边
效果跟下面一样
layout_constraintStart_toStart：当前View开始位置跟某个View（或者父布局parent）的开始位置对齐

layout_constraintRight_toRightOf：当前View右边在某个View（或者父布局parent）的右边
效果跟下面一样
app:layout_constraintEnd_toEndOf=""：当前View结束位置跟某个View（或者父布局parent）的结束位置对齐

layout_constraintLeft_toRightOf：当前View左边在某个View（或者父布局parent）的右边
layout_constraintRight_toLeftOf：当前View右边边在某个View（或者父布局parent）的左边

同样的触类旁通：

layout_constraintTop_toTopOf：“”
layout_constraintTop_toBottomOf：“”
layout_constraintBottom_toTopOf：“”
layout_constraintBottom_toBottomOf：“”

这组的用法你也就明白了吧

注:
		这么设置就是居中效果
 		<Button
        android:id="@+id/btn_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="返回回调传数据"
        android:background="@color/color3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

二、线性布局的宽高比权重效果：
app:layout_constraintHorizontal_weight=“1” //水平方向权重
app:layout_constraintVertical_weight=“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">
 
      <TextView
        android:id="@+id/tab0"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@color/color3"
        android:gravity="center"
        android:text="tab1"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab1"
        app:layout_constraintHorizontal_weight="1"
        />

    <TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="tab2"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab0"
        app:layout_constraintRight_toLeftOf="@+id/tab2"
        app:layout_constraintTop_toTopOf="@+id/tab0"
        app:layout_constraintHorizontal_weight="1"
        />

    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/color4"
        android:gravity="center"
        android:text="tab3"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab1"
        app:layout_constraintRight_toLeftOf="@id/tab3"
        app:layout_constraintTop_toTopOf="@+id/tab0"
        app:layout_constraintHorizontal_weight="2"
        />

    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="tab4"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab2"
        app:layout_constraintRight_toLeftOf="@+id/tab4"
        app:layout_constraintTop_toTopOf="@+id/tab0"
        app:layout_constraintHorizontal_weight="1"
        />

    <TextView
        android:id="@+id/tab4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/color5"
        android:gravity="center"
        android:text="tab5"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tab3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/tab0"
        app:layout_constraintHorizontal_weight="1"
        />

</android.support.constraint.ConstraintLayout>

如上图，水平方向的权重例子，你就明白了，tab3占2分 ，其他tab占1分。同样的垂直方向的权重也这么使用！
这个例子也能回顾下前面的左右约束，每个tab左右都有绑定。

四、实现百分比布局、宽高比DimensionRatio

百分比布局，意义非常重要，解决碎片化问题就是没有百分比的出现，现在我们来看一下，如何使用的：

layout_constraintVertical_bias：垂直偏移率。

layout_constraintHorizontal_bias：水平偏移率。

layout_constraintHeight_percent：高度百分比，占父类高度的百分比

layout_constraintWidth_percent：宽度百分比，占父类宽度的百分比

app:layout_constraintDimensionRatio="16:6"这个属性，这里设置宽高比为16：6

比如实现一个首页轮播图，占整个屏幕的百分之三十高度，然后垂直方向的偏移率为0，就有下面的效果图了：
先看下代码：

		<ImageView
        android:id="@+id/view0"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:textSize="30sp"
        android:src="@mipmap/background"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0"/>

如果垂直偏移率为0.2就是这个效果：

		<ImageView
        android:id="@+id/view0"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:textSize="30sp"
        android:src="@mipmap/background"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0"/>

五、链式效果，chainstyle

layout_constraintHorizontal_chainStyle:横向链
layout_constraintVertical_chainStyle:纵向链

使用这个的时候需要注意布局的宽度是不是0，0会充满屏幕
非0的话就跟官网给的上面的图的排版一样的效果，这个属性很实用，比如多个布局互相约束，但是最后需要他们一起居中，就可以设置layout_constraintHorizontal_chainStyle：“packed”
就像weighted就类似于权重效果，这个属性自己练习下就都熟悉了

spread 宽度为0如图：

	 <Button
        app:layout_constraintHorizontal_chainStyle="spread"
        android:id="@+id/btn1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_1"
        android:background="@android:color/black"
        app:layout_constraintRight_toLeftOf="@id/btn2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/btn1"
        android:id="@+id/btn2"
        app:layout_constraintRight_toLeftOf="@id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/btn_1"
        android:background="@android:color/holo_green_dark"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
    <Button
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/btn2"
        android:id="@+id/btn3"
        app:layout_constraintTop_toBottomOf="@+id/btn_1"
        android:background="@android:color/holo_red_dark"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

六、基准线

app:layout_constraintGuide_percent=“0.8”

一般用的很少，用来对齐，用的时候先设置布局排列方向：
android:orientation=“horizontal（vertical）”
上个效果图应该就懂了

 <android.support.constraint.Guideline
        android:id="@+id/guide_v"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.7" />

    <android.support.constraint.Guideline
        android:id="@+id/guide_h"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />

    <Button
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:text="悬浮按钮"
        app:layout_constraintLeft_toRightOf="@id/guide_v"
        app:layout_constraintTop_toBottomOf="@id/guide_h"
    />

后面介绍的一些属性都不常用，了解下吧

七、Baseline基线
其实这个用的还行，比如我经常用的登录页面布局


标记的姓名就设置了基准线，绑定跟后面的输入框，下面的电话就没有设置，很明显就可以看出两者的差距，一般用这个属性设置对齐

<TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="姓名："
        app:layout_constraintBottom_toBottomOf="@+id/et_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@id/et_name"
        app:layout_constraintBaseline_toBaselineOf="@+id/et_name"

        />
    <EditText
        android:id="@+id/et_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tv_1"
        app:layout_constraintLeft_toRightOf="@+id/tv_name"
        android:hint="请输入你的名字"
        android:textSize="12dp"
        android:layout_marginTop="100dp"
        />

八、宽高最大最小约束——尺寸限制(Dimensions )

常用：
maxHeight
maxWidth
minWidth
minHeight

不常用：
layout_constraintHeight_max
layout_constraintHeight_min
layout_constraintWidth_max
layout_constraintWidth_min

注:这些属性可以给普通控件设置也可以给ConstraintLayout设置。这些属性的使用跟其他布局里面的使用情况一样，而且就看单词也就明白了

九、圆形布局

通过下面的属性设置就行

app:layout_constraintCircle   引用控件的id
app:layout_constraintCircleAngle   据引用id的角度，从0度到360度
app:layout_constraintCircleRadius  半径(据引用id圆心的距离，可变)

 <ImageView
        android:id="@+id/ig_1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="360"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="70"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="170"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="230"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />

十、组（Group）

app:constraint_referenced_ids:(id，id)

这个属性也挺好用，因为可以用这个属性来控制一些布局的显示隐藏啥的

 <android.support.constraint.Group
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="ig_2,ig_3"
        android:visibility="gone">

    </android.support.constraint.Group>

    <ImageView
        android:id="@+id/ig_1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <ImageView
        android:id="@+id/ig_2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="360"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />

    <ImageView
        android:id="@+id/ig_3"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="70"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="170"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />
    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintCircle="@id/ig_1"
        app:layout_constraintCircleAngle="230"
        app:layout_constraintCircleRadius="50dp"
        tools:ignore="MissingConstraints" />

我将部分ig_1,ig_2放到group里面 这样就能控制隐藏显示

十一、Placeholder

placeholder这个词在英文中的意思是占位符，顾名思义，它就是用来占位的。我们直接代码，我的目的是在布局底部的左右两边各放一个Imageview,第一部先创建一个placeholder的文件夹，和平时创建一样，内容如下：

适用场景可以通过这个属性来替换需要显示的布局

还是上个代码例子吧，方便理解：

 <android.support.constraint.Placeholder
        android:id="@+id/p_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:content="@id/p_ig_1"
        android:background="@color/color5"
        />


    <android.support.constraint.Placeholder
        android:id="@+id/p_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:content="@id/p_ig_2"
        android:background="@color/color5"
        />


    <ImageView
        android:id="@+id/p_ig_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"/>

    <ImageView
        android:id="@+id/p_ig_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/background"/>

其实也就是先设置一个占位的布局 ，再给他设置conten内容，通过id绑定

作用就这么个作用，具体使用还得看你实际需求，我基本没用过这个布局，然后这个布局也阔以在Java代码中动态的设置content

上面的代码也就是简单的介绍下这个布局的作用，实际用肯定不这么写，好了 下一个

十一、barrier屏障

barrier的属性barrierDirection 指定方向，constraint_referenced_ids引用的控件 id（多个id以逗号隔开）

	<android.support.constraint.Barrier
        android:id="@+id/barrier_1"
        android:layout_width="20dp"
        android:layout_height="match_parent"
        app:barrierDirection="right"
        app:constraint_referenced_ids="p_1"

        />
    <android.support.constraint.Placeholder
        android:id="@+id/p_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/barrier_1"
        app:content="@id/p_ig_1"
        android:background="@color/color5"
        />

十二、ConstraintSet可以和ConstraintLayout布局绑定(也只能是ConstraintLayout)有点类似于帧动画，然后配合TransitionManager实现动画效果，这个我不太了解 后面再查查补充吧