轻松玩转ConstraintLayout（一）基础篇

ConstraintLayout自从2016年Google/IO推出以来，已逐渐成为Android开发的首选布局。它与RelativeLayout相似但是性能方面更优，而且AndroidStudio提供LayoutEditor可以达到像iOS上AutoLayout一样的开发体验。

Our performance comparison shows that ConstraintLayout performs about 40% better in the measure/layout phase than RelativeLayout:

虽然优点诸多，但是其复杂多样的属性导致使用上有一定门槛。所有我希望通过两篇文章将ConstraintLayout的基本使用方式讲明白，让大家在日常开发中不会再谈虎色变。

轻松玩转ConstraintLayout（一）基础篇
轻松玩转ConstraintLayout（二）示例篇

本篇作为基础篇，先简单介绍一下ConstraintLayout中的基本属性

• 位置属性
• 间隔属性
• 比例属性
• 排列属性

位置属性

---

位置属性主要用来描述ConstraintLayout中各个View之间的相对位置

layout_to

用来指定在某目标View的左侧或右侧，也可以目标View也可以是父容器。例如
layout_constraintStart_toEndOf="parent" 、 layout_constraintStart_toEndOf="@id/hoge"

相当于RelativeLayout的layout_to

ConstraintLayout	功能	RelativeLayout
layout_constraintEnd_toStartOf	位于目标的左侧	layout_toStartOf
layout_constraintStart_toEndOf	位于目标的右侧	layout_toEndOf
layout_constraintRight_toLeftOf	位于目标的左侧	layout_toLeftOf
layout_constraintLeft_toRightOf	位于目标的右侧	layout_toRightOf
layout_constraintBottom_toTopOf	位于目标的上侧	layout_above
layout_constraintTop_toBottomOf	位于目标的下侧	layout_below

layout_align

将上述的属相稍作变化就可以表示与目标View的左侧或右侧对齐，相当于RelativeLayout的layout_align

ConstraintLayout	功能	RelativeLayout
layout_constraintStart_toStartOf	与目标左对齐	layout_alignStart
layout_constraintEnd_toEndOf	与目标右对齐	layout_alignEnd
layout_constraintLeft_toLeftOf	与目标左对齐	layout_alignLeft
layout_constraintRight_toRightOf	与目标右对齐	layout_alignRight
layout_constraintTop_toTopOf	与目标上对齐	layout_alignTop
layout_constraintBottom_toBottomOf	与目标下对齐	layout_alignBottom

居中

如果相对于父容器同时左对齐和右对齐，则可以实现左右居中效果，上下居中也同理

<TextView android:id="@+id/text_view"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

Baseline

基线对齐，类似RelativeLayout的Baseline

ConstraintLayout	功能	RelativeLayout
layout_constraintBaseline_toBaselineOf	与目标的对齐基线	layout_alignBaseline

间隔属性

---

子View之间的间隔主要分为两类：Margin和GoneMargin

Margin

就像常规布局的margin属性一样

属性	值类型
android:layout_marginLeft	dp
android:layout_marginRight	dp
android:layout_marginStart	dp
android:layout_marginEnd	dp
android:layout_marginTop	dp
android:layout_marginBottom	dp

GoneMargin

GoneMargin表示会跟随目标对象Visibility:Gone而消失，不会给剩余可见部分的布局带来影响

属性	取值类型
android:layout_goneMarginLeft	dp
android:layout_goneMarginRight	dp
android:layout_goneMarginStart	dp
android:layout_goneMarginEnd	dp
android:layout_goneMarginTop	dp
android:layout_goneMarginBottom	dp

比例属性

---

比例主要包括两类

• bias ：位置占比（也可以视为位置属性）
• ration：size占比

bias

前面我们知道通过位置属性，可以设置子View居中。此时通过bias，可以设置居中偏移量，通过偏移量可以实现一个相对于父容器位置占比的效果

属性	功能
layout_constraintHorizontal_bias	水平方向bias
layout_constraintVertical_bias	竖直方向bias

bias接受0~1之间的值，例如左侧偏移30%

<TextView android:id="@+id/text_view"
    app:layout_constraintHorizontal_bias="0.3"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

ration

ConstraintLayout中有3中方式来设置子子View的宽高尺寸：

• Xdp，X为具体数值
• WARP_CONTENT
• 0dp，0dp代表MATCH_CONSTRAINT，ConstraintLayout不推荐使用MATCH_PARENT

用0dp代表MATCH_CONSTRAINT，意味着这个实际size需要通过其他方式决定，此时可以用ration来指定。

属性	取值类型
layout_constraintDimensionRatio	X:Y

<Button 
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1" />

ration的值默认代表宽高比，即w:h。但是当width和height都为MATCH_CONSTRAINT时，需要指定是w:h还是h:w

例如如下布局：

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

    <ImageView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="TextView"
        app:layout_constraintDimensionRatio="h,3:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="0dp" />

</android.support.constraint.ConstraintLayout>

app:layout_constraintDimensionRatio="h,3:1" ，h,代表以w为基础去设置h，即h = w * ratio。 w,则意义相反

排列属性

---

所谓排列属性是指如何对多个子View之间进行约束达到某种布局的排列效果，这主要是依靠chainStyle来完成的

chainStyle

多个子View之间的约束称为chain，chainStyle子View之间的约束呈现了何种排列类型。

属性	功能
layout_constraintHorizontal_chainStyle	水平方向类型
layout_constraintVertical_chainStyle	竖直方向类型

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_chainStyle="packed" />

chainStyle有多种类型，通过下图可以一目了然

类型	功能
spread	平分剩余空间
spread_inside	两端对齐，内部均分
packed	内部紧贴，外部均分

weighted chain

当chainStyle指定为spread或者spread_inside时，可以用layout_constraintHorizontal_weight或者layout_constraintHorizontal_height来指定子View相对于剩余空间的占比（对剩余空间的瓜分）

Packed Chain with Bias

当chainStyle指定为packed时，可以用layout_constraintHorizontal_bias或者layout_constraintVertical_bias来指定居中偏移量

最后

---

ConstraintLayout的基础篇就介绍完了，接下来的示例篇会介绍如何用ConstraintLayout实现一些常用的布局