ConstraintLayout使用汇总

前言

在这里我要向大家介绍ConstraintLayout，它是一种布局方法，可以帮助我们在对Android进行布局时减少对布局层次的嵌套，进而提高app的性能。

接下来我会通过一些示例来全面介绍ConstraintLayout的使用方式与它的一些特性。希望能够帮助正在学习ConstraintLayout使用的同学们。

ConstraintLayout VS RelativeLayout

相信当我们进行布局的时候，使用最多的应该是LinearLayout与RelativeLayout。而对于复杂一点的布局来说，他们之间的嵌套使用就最正常不过了。所以为了减少不必要的嵌套布局，Google特意开发的ConstraintLayout。它同时支持LinearLayout与RelativeLayout的所用特性。同时它完全通过约束来减少布局的嵌套。意思就是基本上最外层只需要一个ConstraintLayout节点就可以了。下面先从RelativeLayout开始，看它是如何来实现RelativeLayout的特性。

这里我列举一些RelativeLayout的特性：

android:layout_alignStart="@id/view"
android:layout_alignLeft="@id/view"
android:layout_alignEnd="@id/view"
android:layout_alignRight="@id/view"
android:layout_alignTop="@id/view"
android:layout_alignBaseline="@id/view"
android:layout_alignBottom="@id/view"
 
android:layout_toStartOf="@id/view"
android:layout_toLeftOf="@id/view"
android:layout_toEndOf="@id/view"
android:layout_toRightOf="@id/view"
android:layout_above="@id/view"
android:layout_below="@id/view"
 
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
 
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

相信上面的特性大家再熟悉不过了。对于layout_align*的属性在ConstraintLayout中可以通过以下方式替代。

app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintLeft_toLeftOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
app:layout_constraintRight_toRightOf="@id/view"
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBaseline_toBaselineOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"

而对于layout_to*的属性ConstraintLayout也有与之完美替代的特性：

app:layout_constraintStart_toEndOf="@id/view"
app:layout_constraintLeft_toRightOf="@id/view"
app:layout_constraintEnd_toStartOf="@id/view"
app:layout_constraintRight_toLeftOf="@id/view"
app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toTopOf="@id/view"

接下来是layout_alignParent*的替代实现：

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

这里与之前的layout_align*基本类似，只不过它的所以约束的对象不同而已，为了实现对父布局的依赖，这里统一都是parent。

最后是layout_center*属性，本质与上面的基本类似。下面直接通过实例来展示

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

通过上面的代码相信不难理解，要想实现水平居中只需设置left与right分别约束parent，而要想实现竖直居中则只需设置top与bottom分别约束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">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="left" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="right"
        app:layout_constraintRight_toRightOf="parent" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bottom"
        app:layout_constraintBottom_toBottomOf="parent" />
 
    <Button
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center"
        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="wrap_content"
        android:text="center top"
        app:layout_constraintBottom_toTopOf="@+id/center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center bottom"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/center" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center left"
        app:layout_constraintRight_toLeftOf="@+id/center"
        app:layout_constraintTop_toTopOf="@+id/center" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center right"
        app:layout_constraintLeft_toRightOf="@+id/center"
        app:layout_constraintTop_toTopOf="@+id/center" />

</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

在ConstraintLayout中没有match_parent,而与之替代的是match_constraint，在使用中通过0dp来代表。一旦你使用了match_parent那么它的约束将会失效。

ConstraintLayout VS LinearLayout

为了能够达到LinearLayout的效果，ConstraintLayout引入了Chain Style.通过以下代码来设置：

app:layout_constraintHorizontal_chainStyle=""
app:layout_constraintVertical_chainStyle=""

它主要有三个属性分别为：

spread_inside:两边不留空间，中间间距平分
spread:完全均分
packed:完全不留间距

解释的有点生硬，下面通过一张官方图来更直观的了解

效果图

需要注意的是：要达到上的的chain效果，他们之间必须完全相互约束，同时chain style的设置都是以第一个view为基点。同时默认chain style为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">
 
    <Button
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/second" />
 
    <Button
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toLeftOf="@+id/third"
        app:layout_constraintTop_toTopOf="@+id/first" />
 
    <Button
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/first" />
 
    <Button
        android:id="@+id/match_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/match_second"
        app:layout_constraintTop_toBottomOf="@+id/first" />
 
    <Button
        android:id="@+id/match_second"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintHorizontal_weight="3"
        app:layout_constraintLeft_toRightOf="@+id/match_first"
        app:layout_constraintRight_toLeftOf="@+id/match_third"
        app:layout_constraintTop_toTopOf="@+id/match_first" />
 
    <Button
        android:id="@+id/match_third"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintHorizontal_weight="4"
        app:layout_constraintLeft_toRightOf="@+id/match_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/match_first" />
 
    <Button
        android:id="@+id/spread_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/spread_second"
        app:layout_constraintTop_toBottomOf="@+id/match_first" />
 
    <Button
        android:id="@+id/spread_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/spread_first"
        app:layout_constraintRight_toLeftOf="@+id/spread_third"
        app:layout_constraintTop_toTopOf="@+id/spread_first" />
 
    <Button
        android:id="@+id/spread_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/spread_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/spread_first" />
 
    <Button
        android:id="@+id/packed_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/packed_second"
        app:layout_constraintTop_toBottomOf="@+id/spread_first" />
 
    <Button
        android:id="@+id/packed_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/packed_first"
        app:layout_constraintRight_toLeftOf="@+id/packed_third"
        app:layout_constraintTop_toTopOf="@+id/packed_first" />
 
    <Button
        android:id="@+id/packed_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/packed_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/packed_first" />
 
    <Button
        android:id="@+id/bias_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/bias_second"
        app:layout_constraintTop_toBottomOf="@+id/packed_first" />
 
    <Button
        android:id="@+id/bias_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second"
        app:layout_constraintLeft_toRightOf="@+id/bias_first"
        app:layout_constraintRight_toLeftOf="@+id/bias_third"
        app:layout_constraintTop_toTopOf="@+id/bias_first" />
 
    <Button
        android:id="@+id/bias_third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third"
        app:layout_constraintLeft_toRightOf="@+id/bias_second"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/bias_first" />
 
</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

通过效果图，我们会发现第二行他们占的比例不同，返回看代码发现其实与LinearLayout类似,使用了app:layout_constraintHorizontal_weight=""权重属性。当然要使得其生效必须layout_width与layout_height其中一个为0dp。
我们再来看第4、5行，如果chain style的值为packed，那么它默认是居中排列的，如果想改变的话可以通过设置app:layout_constraintHorizontal_bias="0.2"与app:layout_constraintVertical_bias="0.2"。

margin & goneMargin

margin

ConstraintLayout的margin与原来的使用区别主要为两点：其一android:layout_margin*效果不变，但它的值不能为负值；其二相应方向的margin设置必须要有约束，否则不生效。

    <TextView
        android:id="@+id/tv1"
        ...
        android:layout_marginRight="100dp"        
        app:layout_constraintLeft_toLeftOf="parent"/>
 
    <TextView
        android:layout_marginLeft="10dp"
        ...       
        app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
        app:layout_constraintLeft_toRightOf="@+id/tv1" />

首先我们来看第二个TextView，它的marginLeft会生效，因为它有left方向的约束：app:layout_constraintLeft_toRightOf="@+id/tv1"；而对于第一个TextView，它的marginRight不会生效，因为它的right方向上没有约束，所以如果要生效可以加入:app:layout_constraintRight_toRightOf="parent约束。

这些都是相对于原来布局margin使用的区别，如果你觉得不习惯可以使用padding代替，这也是ConstraintLayout所推荐的方式。

goneMargin

在ConstraintLayout中还增加了另外一种goneMargin，它的作用主要是：一旦某个方向上的约束view不可以见，这时如果设置了该属性，该方向将自动增加margin值。即目标必须不可见。

<?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/tv1"
        android:layout_marginTop="100dp"
        android:text="tv1"
        ...
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
 
    <TextView
        android:layout_marginLeft="10dp"
        android:text="tv2"
        ....
        app:layout_constraintBaseline_toBaselineOf="@+id/tv1"
        app:layout_constraintLeft_toRightOf="@+id/tv1" />
 
    <TextView
        android:id="@+id/tv3"
        ...
        android:text="tv3"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:id="@+id/tv4"
        android:layout_marginLeft="10dp"
        android:text="tv4"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_goneMarginLeft="100dp" />
 
    <TextView
        android:id="@+id/tv5"
        ...
        android:layout_marginBottom="10dp"
        android:text="tv5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.33" />
 
</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

Circle

在ConstraintLayout中你不仅可以对任意view进行水平与竖直方向的约束，同时你还可以居于约束view的中心点进行不同角度方向的约束。主要属性有如下三种：

layout_constraintCircle: 代表约束的view的id
layout_constraintCircleAngle: 代表约束的角度
layout_constraintCircleRadius: 代表约束的半径大小

效果图

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
 ...
 >
 
    <TextView
        android:id="@+id/tv1"
        android:text="tv1"
        ...
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <TextView
        android:text="tv2"
        ...
        app:layout_constraintCircle="@id/tv1"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />
 
</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

GuideLine

GuideLine也是ConstraintLayout特有的属性，它相当于一个参考线，且它的布局中不会展示。

GuidLine有水平与竖直方法的设置：

android:orientation="horizontal|vertical"

主要设置属性为：

layout_constraintGuide_begin: 代表距离GuideLine左边或者底部的距离
layout_constraintGuide_end: 代表距离GuideLine右边或者底部的距离
layout_constraintGuide_percent：代表GuideLine相对于parent的位置百分比

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:app="http://schemas.android.com/apk/res-auto"
   ...
    >
 
    <android.support.constraint.Guideline
        android:id="@+id/vertical_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="150dp" />
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintLeft_toLeftOf="@+id/vertical_guide_line"
        app:layout_constraintTop_toTopOf="parent" />
 
    <android.support.constraint.Guideline
        android:id="@+id/horizontal_guide_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="150dp" />
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        app:layout_constraintRight_toLeftOf="@+id/vertical_guide_line"
        app:layout_constraintTop_toTopOf="@+id/horizontal_guide_line" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintBottom_toBottomOf="@+id/horizontal_guide_line"
        app:layout_constraintLeft_toRightOf="@+id/vertical_guide_line" />
 
    <android.support.constraint.Guideline
        android:id="@+id/percent_guide_Line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="margin top of parent 30%"
        app:layout_constraintTop_toBottomOf="@+id/percent_guide_Line" />
 
</android.support.constraint.ConstraintLayout>

效果图

点击查看源码

Barrier & Group

Barrier

Barrier与GuideLine有点类似，也是布局不可见的，不同的是它就约束对象的，看如下图：

效果图

如果有这么一种需求：tv3始终在tv1与tv2的最近右边，但tv1与tv2的宽度的不看预期的，即可能tv1更长或者tv2更长。这时Barrier就能很好的解决这问题。

    <!--barrier-->
    <TextView
        android:id="@+id/tv1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="tv1，固定宽度"
        android:textColor="@android:color/white" />
 
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="tv2，宽度不固定"
        android:textColor="@android:color/white"
        app:layout_constraintTop_toBottomOf="@+id/tv1" />
 
    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv1,tv2" />
 
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@color/colorPrimary"
        android:padding="5dp"
        android:text="@string/barrier_tv3"
        android:textColor="@android:color/white"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent" />

在Barrier中有两个属性，分别为:

barrierDirection：控制其方向
constraint_referenced_ids：约束的view的参考id

Group

细心的你可能会发现，既然ConstraintLayout中能减少布局的嵌套，那么对于同一模块的UI对其进行整体操作，是否只能逐一进行操作（显隐操作）？ConstraintLayout给出了它的答案，就是Group。它的作用就是对多个view进行分组操作，当然在布局中也是不可见的。主要属性是：

constraint_referenced_ids: 约束的view的参考id

就拿上面Barrier的示例来说。

    <!--group 通过设置关联id来控制它们的显隐-->
    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="tv1,tv2" />

如果加了如上代码，那么对group进行VISIBLE操作时，对同时作用于tv1与tv2。

点击查看源码

other

下面来说一下使用ConstraintLayout时，一些需要注意的点。这样可以帮助你在使用做少走弯路。

wrap_content

如果你的View中对宽高使用了wrap_content，那么你要时刻注意，它的约束可能并不会很好的生效。例如如下实例：

    <!--当为wrap_content对其进行强制约束-->
    <!--app:layout_constrainedWidth=”true|false”-->
    <!--app:layout_constrainedHeight=”true|false”-->
    <!--android:minWidth-->
    <!--android:minHeight-->
    <!--android:maxWidth-->
    <!--android:maxHeight-->
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv1"
        android:textColor="@android:color/white" />
 
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="@string/other_tv2"
        android:textColor="@android:color/white"
        app:layout_constrainedWidth="true"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintRight_toRightOf="parent" />

效果图

如果将app:layout_constrainedWidth="true"这行代码删除，那么你将会看到如下效果

效果图

在代码注释中已经说明，在使用wrap_content时，还可以使用minWith等属性。它们之间的优先级为 min/max > constraintWith/Height

MATCH_CONSTRAIN

当使用了MATCH_CONSTRAIN，即0dp来展示宽高时，可以通过如下方式来进行约束相应宽高值。

    <!--当为MATCH_CONSTRAINT 可以通过以下设置来约束宽高-->
    <!--layout_constraintWidth_min and layout_constraintHeight_min-->
    <!--layout_constraintWidth_max and layout_constraintHeight_max-->
    <!--layout_constraintWidth_percent and layout_constraintHeight_percent-->
    <!--android:minWidth-->
    <!--android:minHeight-->
    <!--android:maxWidth-->
    <!--android:maxHeight-->
    <TextView
        android:id="@+id/tv3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv3"
        android:textColor="@android:color/white"
        app:layout_constraintTop_toBottomOf="@+id/tv1"
        app:layout_constraintWidth_percent="0.5" />

效果图

如果将app:layout_constraintWidth_percent="0.5"去掉的话，你将看到如下效果：

效果图

注意它们之间的优先级为parent > min/max > constraint_min/max

Ratio

如果你的需要是对View进行固定宽高比展示时，那么Ratio的这个特性将非常适合你。你只需设置它的layout_constraintDimensionRatio属性即可。

如果layout_width与layout_height其中一个为MATCH_CONSTRAIN（0dp）, MATCH_CONSTRAIN（0dp）的值将根据layout_constraintDimensionRatio所设的值来计算（w:h）

    <TextView
        android:id="@+id/tv4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv4"
        android:textColor="@android:color/white"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintTop_toBottomOf="@+id/tv3" />

效果图

如果layout_width与layout_height都为MATCH_CONSTRAIN（0dp）, 那么可以对layout_constraintDimensionRatio添加前缀W/H（H，w:h，来对其进行宽高方向的约束，从而形成比例。

    <TextView
        android:id="@+id/tv5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="50dp"
        android:background="@color/colorPrimary"
        android:padding="10dp"
        android:text="tv5"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,3:1"
        app:layout_constraintTop_toBottomOf="@+id/tv4" />

效果图

根据效果图展示的宽高比为1:3。即对应了H,3:1。

点击查看源码

End

到这里ConstraintLayout的使用全部介绍完毕，希望能有所作用与帮助。如有不足之处欢迎指出，谢谢！

点击跳转到项目地址

关注

怪谈时间到了

最后编辑于：2018.05.16 23:08:47

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,378评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,356评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,702评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,259评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,263评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,036评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,349评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,979评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,469评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,938评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,059评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,703评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,257评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,262评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,501评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,792评论 2赞 345

ConstraintLayout使用汇总

前言

ConstraintLayout VS RelativeLayout

ConstraintLayout VS LinearLayout

margin & goneMargin

margin

goneMargin

Circle

GuideLine

Barrier & Group

Barrier

Group

other

wrap_content

MATCH_CONSTRAIN

Ratio

End

关注

推荐阅读更多精彩内容