ConstraintLayout 使用简介

一 背景

ConstraintLayout 是目前是android studio 2.2 以后的默认根布局。 到目前为止，大家还是习惯常用的布局。同事先尝试了下ConstraintLayout优化布局层次，笔者也使用了下，发现确实比较好用。下面我们一起来试着使用布局吧~~

二 demo

来看下有个简单的布局是这个样子的

image.png

其中文字‘金豆’ 左边金色条是居中对齐文字一栏的。按传统布局，这个简单的布局至少需要三层布局， 垂直方向和 单个水平方向。下面看下使用ConstraintLayout布局。

<?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"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="10dp">

    <ImageView
        android:id="@+id/golden_beans_tips_icon"
        android:layout_width="wrap_content"
        android:layout_height="15dp"
        android:scaleType="fitCenter"
        android:src="?attr/skin_line_gold30_gift"
        app:layout_constraintBottom_toBottomOf="@+id/golden_beans_tips"
        app:layout_constraintTop_toTopOf="@+id/golden_beans_tips"
        tools:src="@drawable/line_gold30_gift" />

    <TextView
        android:id="@+id/golden_beans_tips"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="25dp"
        android:importantForAccessibility="no"
        android:text="@string/pay_unit"
        android:textColor="?attr/skinT2"
        android:textSize="@dimen/skin_textsize_l3"
        app:layout_constraintLeft_toRightOf="@+id/golden_beans_tips_icon"
        app:layout_constraintTop_toBottomOf="parent"
        tools:textColor="@color/skin_t2" />

    <TextView
        android:id="@+id/golden_bean_number"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:contentDescription="@{viewModel.goldenBeanDescription}"
        android:text="12"
        android:textColor="?attr/skinT2"
        android:textSize="@dimen/mine_balance_text_size"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/golden_beans_tips"
        tools:text="12"
        tools:textColor="@color/skin_t2" />

    <TextView
        android:layout_width="90dp"
        android:layout_height="35dp"
        android:layout_marginRight="15dp"
        android:background="@drawable/bg_btn_mine_balance"
        android:gravity="center"
        android:text="@string/pay_money"
        android:textColor="@color/skin_t7"
        android:textSize="@dimen/skin_textsize_l4"
        app:layout_constraintBottom_toBottomOf="@+id/golden_bean_number"
        app:layout_constraintRight_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/golden_bean_number" />

</android.support.constraint.ConstraintLayout>

其实，ConstraintLayout 写起来比较方便，与RelativeLayout非常相似。 首先我们看下 要保证垂直方向的顺序布局。 如果没使用ConstraintLayout前，需要使用垂直方向的LinearLayout 或RelativeLayout。 我们的ConstraintLayout 怎样保证的呢？

 app:layout_constraintTop_toBottomOf="@+id/golden_beans_tips"

一行代码，是不是跟RelativeLayout类似。 同理 我们要保持文本 ‘12’ 和按钮‘充值’ 水平方向

app:layout_constraintTop_toTopOf="@+id/golden_bean_number"

是不是很简单。那怎么保证第一行的金色条icon 居中对齐 文本 ‘金豆’呢？

app:layout_constraintBottom_toBottomOf="@+id/golden_beans_tips"
app:layout_constraintTop_toTopOf="@+id/golden_beans_tips"

即对齐文本‘金豆’的上下边缘， 这里有一个比较形象的说法，就是constraintXXX_toXXXOf 表示对于id 对本view的拉力。这里上下方向拉力一致，所以文本居中了。那么我们的相对布局其实就有 4 * 2 8种方式：

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

三 进一步升级打怪

看了上面的一个，我们有个需求的ui是这样子的

image.png

当然，这个只是布局的一小块，你可以看成listView 的item 优化布局的层次还是比较重要的。
你可能会说 what a shell ！！！ ConstraintLayout 来布局很简单呀，实际上，你使用上面的约束，想一层布局搞定，貌似搞不定。来，看下我们的布局代码

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:maxLines="1"
            android:ellipsize="end"
            android:id="@+id/title"
            android:textColor="?attr/skinT2"
            bind:layout_constraintLeft_toLeftOf="parent"
            bind:layout_constraintRight_toLeftOf="@+id/more"
            bind:layout_constraintHorizontal_bias="0"
            android:textSize="@dimen/skin_textsize_l3"
            android:text="情感故事情情感故事情感故情感情感情感故事情感故情感情感感故情感情感"
            tools:text="情感故事情情感故事情感故情感情感情感故事情感故情感情感感故情感情感"
            tools:textColor="@color/skin_t2"  />

        <ImageView
            android:id="@+id/more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="15dp"
            bind:layout_constraintRight_toRightOf="parent"
            bind:layout_constraintTop_toTopOf="@+id/title"
            bind:layout_constraintBottom_toBottomOf="@+id/title"
            android:src="?attr/skin_btn_arrow_stroke"
            tools:src="@drawable/btn_arrow_stroke" />

    </android.support.constraint.ConstraintLayout>
    

我们看

 bind:layout_constraintLeft_toLeftOf="parent"
 bind:layout_constraintRight_toLeftOf="@+id/more"

使用这两行代码之后文本 已经在 icon 更多左边，但是文本是居中的，看起来是这样

image.png

原因是parent左边和右边more的拉力是相同的，所以文本宽度不够时，居中了。那问题来了，我想让文本居左怎么办？
bind:layout_constraintRight_toLeftOf去不掉，是需要保证在icon的左边，那怎么办呢？

app:layout_constraintHorizontal_bias="0"

layout_constraintHorizontal_bias 表示水平偏向， 取值 0 到 1， 即在两个拉力中偏左为0， 偏右为1 ，默认就是0.5， 也可以看成左右间距比例。相似的还有垂直方向layout_constraintVertical_bias

恩，ui需求又来了，比较常见的如， 水平三个按钮，我想等分水平的，这里不再赘述，ConstraintLayout中类似LinearLayout weight的属性就ok。

app:layout_constraintHorizontal_weight="1"

四 更多

还有几个重要的属性，本文不一一列出，前面的基本需求都无压力了。
app:layout_constraintHorizontal_chainStyle 链式的
以及 按宽高比布局属性 app:layout_constraintDimensionRatio。