Android约束布局(ConstraintLayout )实战

安卓开发宝典文章列表：

• 一、比ExpandableListView更强大的分组列表实现
• 二、约束布局实战
• 三、shape使用总结

源码地址（喜欢的话请给颗star）

前言

布局优化要怎么做？
1、 重用布局
2、<merge>标签
3、ViewStub仅在需要时才加载布局
等等。。。

我们思考以上方法，最终的目标是不是都在为了降低布局深度而努力？今天我们的主题就是利用谷歌扩展包中的约束布局和大家一起对比一下。本文只是比较，约束布局的具体使用教程，请移步到这里

布局要求如下：

实现步骤

1. 界面分析：

• 界面左侧和右侧高度是总高的1/3,
• 下面宽度为3/12、2/12、2/12、2/12, 3/12;
• 中间大图宽高分别为：1/2、 2/3

2. 区块划分：
   这里我们借助ConstraintLayout中提供的Guideline把这个界面切分成要求的大小
   如下图：

   
   
3. 区块间添加CardView(根据自己的实际情况)

4. 最终效果如下：

   
   图3

完整代码如下（布局深度为1）：

<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_constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.huaye.odyandroidstore.constraint.ConstraintActivity">


    <android.support.constraint.Guideline
        android:id="@+id/g0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25"
        tools:layout_editor_absoluteX="148dp"
        tools:layout_editor_absoluteY="0dp" />

    <android.support.constraint.Guideline
        android:id="@+id/g1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.41666666"
        tools:layout_editor_absoluteX="247dp"
        tools:layout_editor_absoluteY="0dp" />

    <android.support.constraint.Guideline
        android:id="@+id/g2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5833333"
        tools:layout_editor_absoluteX="345dp"
        tools:layout_editor_absoluteY="0dp" />

    <android.support.constraint.Guideline
        android:id="@+id/g3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.75"
        tools:layout_editor_absoluteX="444dp"
        tools:layout_editor_absoluteY="0dp" />

    <android.support.constraint.Guideline
        android:id="@+id/g4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3333333"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="120dp" />

    <android.support.constraint.Guideline
        android:id="@+id/g5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6666667"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="239dp" />

    <android.support.v7.widget.CardView
        android:id="@+id/img1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toTopOf="@+id/g4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/g0"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:id="@+id/img2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toTopOf="@+id/g5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/g0"
        app:layout_constraintTop_toTopOf="@+id/g4" />

    <android.support.v7.widget.CardView
        android:id="@+id/img3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/g0"
        app:layout_constraintTop_toTopOf="@+id/g5" />

    <android.support.v7.widget.CardView
        android:id="@+id/img4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toTopOf="@+id/g5"
        app:layout_constraintLeft_toLeftOf="@+id/g0"
        app:layout_constraintRight_toLeftOf="@+id/g3"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:id="@+id/img5"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/g0"
        app:layout_constraintRight_toLeftOf="@+id/g1"
        app:layout_constraintTop_toTopOf="@+id/g5" />

    <android.support.v7.widget.CardView
        android:id="@+id/img6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/g1"
        app:layout_constraintRight_toLeftOf="@+id/g2"
        app:layout_constraintTop_toTopOf="@+id/g5" />

    <android.support.v7.widget.CardView
        android:id="@+id/img7"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/g2"
        app:layout_constraintRight_toLeftOf="@+id/g3"
        app:layout_constraintTop_toTopOf="@+id/g5" />

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="8dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toTopOf="@+id/g4"
        app:layout_constraintLeft_toLeftOf="@+id/g3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="4dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="4dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toTopOf="@+id/g5"
        app:layout_constraintLeft_toLeftOf="@+id/g3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/g4" />

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="4dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:cardCornerRadius="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/g3"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/g5"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp" />

</android.support.constraint.ConstraintLayout>

不使用约束布局实现代码如下（布局深度为4）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:background="#F00"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="#00F"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                app:cardBackgroundColor="@color/colorAccent" />

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                app:cardBackgroundColor="#0F0" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="6"></LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="#00F"
            android:orientation="vertical">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                app:cardBackgroundColor="@color/colorAccent" />

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                app:cardBackgroundColor="#0F0" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#0F0"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="#00F"></LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="#0FF"></LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="#0F0"></LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:background="#0FF"></LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="#00F">

        </LinearLayout>
    </LinearLayout>
</LinearLayout>