学会使用ConstraintLayout（提高布局加载速度）

作者: Gugigugi | 来源:发表于2017-07-25 15:49 被阅读0次

学会使用ConstraintLayout（提高布局加载速度）
性能优化
GPU渲染
Android开发 - 掌握ConstraintLayout（三
Android 界面与导航学习笔记
走马观花-ConstraintLayout
Android性能优化
ConstraintLayout使用笔记
安卓自定义View 问题汇总
列表类控件卡顿优化

什么是ConstraintLayout

你可以使用ConstraintLayout构建一个非常大且复杂的视图，而这些视图都是ConstraintLayout的直接子视图（不需要通过内嵌ViewGroup来实现）。它有点像RelativeLayout，通过互相之间或者和RelativeLayout的依赖关系来展示。但是ConstraintLayout比之更灵活，且更容易在Android Studio 视图编辑器使用，你可以在视图编辑器中直接拖拽控件来完成整个布局。

使用须知

使用ConstraintLayout需要满足两个条件

Android 2.3 或者以上
Android Studio 2.3 或者以上

添加依赖，在需要使用ConstraintLayout的module下面添加两段

repositories {
    maven {
        url 'https://maven.google.com'
    }
}

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2' //这里的可能不是最新版本
}

如何开始ConstraintLayout

在旧布局中使用

QQ截图20170725143507.png
](https://img.haomeiwen.com/i5873376/5f53060ee56745b4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

把LinearLayout转换成constraintlayout后，基本上还是会保持之前的布局展示，但是不排除出现意外情况。

微信截图_20170725140750.png

上面是转换之前的Linearlayout

QQ截图20170725141050.png

上面是转换之后的ConstraintLayout,我们可以发现，布局的展示保持了一致

直接从ConstraintLayout开始布局

Project窗口，New > XML > Layout XML,然后选中android.support.constraint.ConstraintLayout作为Root Tag.下面是代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</android.support.constraint.ConstraintLayout>

开发导读

相对位置

你可以布局一个新widget相对于另外一个存在的widget.这种相对关系包括x轴和y轴

x轴：Left, Right, start, end
y轴: top, bottom, text baseline

下面各种图形象描述上面的文字

QQ截图20170725142125.png

可用的相对关系列表：

layout_constraintLeft_toLeftOf： 当前widget的left对齐另外一个widget的left
layout_constraintLeft_toRightOf ：当前widget的left对齐另外一个widget的right
layout_constraintRight_toLeftOf：** 当前widget的right对齐另外一个widget的left**
layout_constraintRight_toRightOf：** 当前widget的right对齐另外一个widget的right**
layout_constraintTop_toTopOf ：当前widget的top对齐另外一个widget的top
layout_constraintTop_toBottomOf：** 当前widget的top对齐另外一个widget的bottom**
layout_constraintBottom_toTopOf：** 当前widget的bottom对齐另外一个widget的top**
layout_constraintBottom_toBottomOf ：当前widget的bottom对齐另外一个widget的bottom
layout_constraintBaseline_toBaselineOf ：**当前widget的baseline对齐另外一个widget的baseline, 使用与带文字的widget
layout_constraintStart_toEndOf ：当前widget的start对齐另外一个widget的end
layout_constraintStart_toStartOf ：当前widget的start对齐另外一个widget的start
layout_constraintEnd_toStartOf ：当前widget的end对齐另外一个widget的start
layout_constraintEnd_toEndOf ：当前widget的end对齐另外一个widget的end

QQ截图20170725142631.png

上面B的Left对齐A的right,使用的 layout_constraintLeft_toRightOf

Margins

ConstraintLayout里可以使用marign(边距),查看源码，我们会发现ConstraintLayout的LayoutParams继承于MarginLayoutParams

public static class LayoutParams extends MarginLayoutParams {
    .
}

和其他的layout一样，constraintlayout也可以使用如下几种margin

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

比较特殊的是ConstraintLayout可以处理相对于gone widget的margin,和上面的对应关系一样

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

我们用视图来对比一下

A显示的时候

QQ截图20170725143455.png

A设置为GONE的时候

QQ截图20170725143507.png

我们可以明显的发现，A设置GONE的时候，B的左边距明显和之前的相对于A的左边距不一样，这是因为我在B设置了如下属性

android:layout_marginStart="8dp"
app:layout_goneMarginStart="28dp"

A设置GONE的时候，app:layout_goneMarginStart="28dp"起作用，所以我们上面看到的左边距显示的是28dp

居中位置和偏向位置

如何实现居中布局,如下图

QQ截图20170725144005.png

代码是如何实现的：

<Button
    android:id="@+id/button39"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="B"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginStart="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginEnd="8dp"/>

偏向位置

包括两种

layout_constraintHorizontal_bias 水平方向的偏向
layout_constraintVertical_bias 垂直方向的偏向

layout_constraintHorizontal_bias会作用于widget的left和right的位置
layout_constraintVertical_bias会作用于widget的top和bottom的位置

使用效果图来说明下

QQ截图20170725144747.png

对应的xml布局

.
app:layout_constraintVertical_bias="0.3"
.

尺寸限定

android:minWidth 设置widget的最小宽度
android:maxWidth 设置widget的最大宽度
android:minHeight 设置widget的最小高度
android:maxHeight 设置widget的最大高度
特定的尺寸，如:123dp
WRAP_CONTENT
0dp ，等于MATCH_CONSTRAINT

通过下图来分析WRAP_CONTENT和MATCH_CONSTRAINT

QQ截图20170725145517.png

a: WRAP_CONTENT
b: MATCH_CONSTRAINT
c: MATCH_CONSTRAINT,margin="8dp"

Ratio比例

可以app:layout_constraintDimensionRatio通过设置widget的宽和高的比例,必须满足layout_width和layout_height至少一个设置为0dp(MATCH_CONSTRAINT)

<Button android:layout_width="0dp"
   android:layout_height="0dp"
   app:layout_constraintDimensionRatio="H,16:9"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintTop_toTopOf="parent"/>

视图模式对应：

微信图片_20170725150407.png

分析:

W 限定宽度
H 限定高度
16:9 对应 -> 宽度：高度

相对链

Paste_Image.png

如上：我们创建了一个相对链,A和B会互相依赖于对方的相对位置

Paste_Image.png

A 是"head of Chain", 它会控制整个相对链，也就是说B,C的位置都是通过A来调整的。

相对链中的边距

在下面中会提到的spread chains,边距会分配的space中自动扣除

相对链的style(样式)

Paste_Image.png

如上图所示：我们可以通过修改相对链的style来实现不同的布局方式，还是很强大的。

相对链中的权重(weight)

在ConstraintLayout，我们也可以像LinearLayout一样使用权重来布局,
layout_constraintHorizontal_weight和layout_constraintVertical_weight会对使用了MATCH_CONSTRAINT的widget起作用

layout_constraintHorizontal_weight 水平方向的相对链中的权重
layout_constraintVertical_weight 垂直方向中的相对链中的权重

Guideline

Guideline是帮助来调整布局的，它本身不会在视图中显示出来。

Paste_Image.png

上面视图对应的xml布局

<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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
....
    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />

    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline2"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85"
        />

    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline3"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline4"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.15" />

    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline5"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.50097847" />

    <android.support.constraint.Guideline
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/guideline6"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.85" />

</android.support.constraint.ConstraintLayout>

Guideline可以使用的属性

android:orientation设置guideline的方向,horizontal代表水平方向（从左到右），vertical代表垂直方向（从上到下）
app:layout_constraintGuide_percent，guideline所在的百分比位置
app:layout_constraintGuide_begin,guideline所在位置和起始边界的距离
app:layout_constraintGuide_end,guideline所在位置和截止边界的距离

NOTE：当app:layout_constraintGuide_percent和app:layout_constraintGuide_begin（app:layout_constraintGuide_end）都设置的时候，app:layout_constraintGuide_percent优先

总结

使用ConstraintLayout可以有效的减小layout的层级深度, android-ConstraintLayoutExamples是google官方提供的关于demo

感谢

学会使用ConstraintLayout（提高布局加载速度）
什么是ConstraintLayout 你可以使用ConstraintLayout构建一个非常大且复杂的视图，而这...
性能优化
一，布局优化1.布局复用，使用标签重用layout；2.提高显示速度，使用延迟View加载；...
GPU渲染
1.渲染速度太慢 2.解决思路：减少布局嵌套层级 3.解决方案：使用ConstraintLayout约束布局 4....
Android开发 - 掌握ConstraintLayout（三
从本篇博客开始我们开始介绍如何使用ConstraintLayout。既然ConstraintLayout叫约束布局...
Android 界面与导航学习笔记
布局使用ConstraintLayout构建布局，减少层级，渲染性能提升使用RecyclerView创建列表R...
走马观花-ConstraintLayout
ConstraintLayout使用具体参考：约束布局ConstraintLayout看这一篇就够了 Const...
Android性能优化
布局优化减少布局层级，使用ViewStub提高显示速度，布局复用，尽可能减少使用warp_content，删除空...
ConstraintLayout使用笔记
ConstraintLayout是官方推荐使用的布局，使用它可以有效的减少布局层数... 使用Android St...
安卓自定义View 问题汇总
1.安卓布局ConstraintLayout使用自定ViewsetMeasuredDimension(width,...
列表类控件卡顿优化
1、使用ConstraintLayout减少布局层级。 2、可以的话，设置RecyclerView布局等高，然后设...

学会使用ConstraintLayout（提高布局加载速度）

什么是ConstraintLayout

使用须知

如何开始ConstraintLayout

在旧布局中使用

直接从ConstraintLayout开始布局

开发导读

相对位置

Margins

居中位置和偏向位置

偏向位置

尺寸限定

Ratio比例

相对链

相对链中的边距

相对链的style(样式)

相对链中的权重(weight)

Guideline

Guideline可以使用的属性

总结

相关文章

学会使用ConstraintLayout（提高布局加载速度）

性能优化

GPU渲染

Android开发 - 掌握ConstraintLayout（三

Android 界面与导航学习笔记

走马观花-ConstraintLayout

Android性能优化

ConstraintLayout使用笔记

安卓自定义View 问题汇总

列表类控件卡顿优化

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读