【笔记】性能优化——ConstraintLayout使用

最新推荐文章于 2023-11-07 23:10:44 发布

成长零一

最新推荐文章于 2023-11-07 23:10:44 发布

阅读量309

点赞数

分类专栏： Android View 文章标签： ConstraintLayout 性能优化控件宽高比例

本文链接：https://blog.csdn.net/q1113225201/article/details/88777447

版权

Android 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

View

13 篇文章 0 订阅

订阅专栏

官网对ConstraintLayout的描述是这样的：
ConstraintLayout是一个允许你用灵活的方式定位和调整控件尺寸的ViewGroup。

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.

为了减少布局的嵌套，减少视图绘制时间，ConstraintLayout诞生了，它与RelativeLayout很像，但功能更加强大，使用也更加灵活。

相对定位

与RelativeLayout里的layout_above、layout_below等有些相似，ConstraintLayout有如下常用相对定位属性：

layout_constraintLeft_toLeftOf

layout_constraintLeft_toRightOf

layout_constraintRight_toLeftOf

layout_constraintRight_toRightOf

layout_constraintTop_toTopOf

layout_constraintTop_toBottomOf

layout_constraintBottom_toTopOf

layout_constraintBottom_toBottomOf

layout_constraintStart_toEndOf

layout_constraintStart_toStartOf

layout_constraintEnd_toStartOf

layout_constraintEnd_toEndOf

layout_constraintBaseline_toBaselineOf

示例

<?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"
    tools:context=".basic.widget.ConstrainLayout.ConstraintLayoutLocationActivity">

    <Button
        android:id="@+id/btn_rt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右上"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_rb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左下"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

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

    <Button
        android:id="@+id/btn_ct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="中间上方"
        app:layout_constraintBottom_toTopOf="@id/btn_center"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

包裹与填充

即使相对定位完全一样，设置的layout_width和layout_height不同意义也是不一样的。

设置wrap_content是包裹内容，设置成0dp就是填充

示例

<?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"
    tools:context=".basic.widget.ConstrainLayout.ConstrainLayoutFillActivity">

    <Button
        android:id="@+id/btn_wrap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="包裹内容"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_wrap_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="包裹内容"
        app:layout_constraintLeft_toRightOf="@+id/btn_wrap"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_wrap" />

    <Button
        android:id="@+id/btn_fill"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="填充"
        app:layout_constraintLeft_toRightOf="@+id/btn_wrap"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_wrap_right" />
</android.support.constraint.ConstraintLayout>

角度定位

使用layout_constraintCircle设置相对控件，使用layout_constraintCircleAngle设置相对角度，使用layout_constraintCircleRadius设置相对半径

示例

<?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"
    tools:context=".basic.widget.ConstrainLayout.ConstraintLayoutCircleActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_person"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_person_white_24dp"
        app:layout_constraintCircle="@id/fab_menu"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="150dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_sms_white_24dp"
        app:layout_constraintCircle="@id/fab_menu"
        app:layout_constraintCircleAngle="135"
        app:layout_constraintCircleRadius="150dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_star"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_star_white_24dp"
        app:layout_constraintCircle="@id/fab_menu"
        app:layout_constraintCircleAngle="180"
        app:layout_constraintCircleRadius="150dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_menu_white_24dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

配上动画可以实现一个不错的效果，动画实现

比例定位

在相对定位基础上添加bias设置比例

<?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"
    tools:context=".basic.widget.ConstrainLayout.ConstrainLayoutBiasActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位置垂直 1/4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.25" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="位置水平 3/4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.75"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

引导线定位

GuideLine是在实际中看不到的线，可以用它来定位。

示例（编辑器中可以看到GuideLine的虚线）

<?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"
    tools:context=".basic.widget.ConstrainLayout.ConstrainLayoutGuideLineActivity">

    <android.support.constraint.Guideline
        android:id="@+id/gl_vertical_50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="50dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="水平引导线左边50dp"
        app:layout_constraintLeft_toLeftOf="@+id/gl_vertical_50"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/gl_horizontal_50"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_end="50dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="垂直引导线下边50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/gl_horizontal_50" />

    <android.support.constraint.Guideline
        android:id="@+id/gl_percent_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.25" />

    <android.support.constraint.Guideline
        android:id="@+id/gl_percent_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="百分比引导线左上各25%"
        app:layout_constraintTop_toTopOf="@+id/gl_percent_horizontal"
        app:layout_constraintLeft_toLeftOf="@+id/gl_percent_vertical"/>
</android.support.constraint.ConstraintLayout>

控件宽高比例

常常会有设置图片宽高比例这样的需求，以前面对这样的需求常常是自己去实现一个可以设置宽高比例的控件，但使用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:id="@+id/root_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".basic.widget.ConstrainLayout.ConstrainLayoutRatioActivity">

    <Button
        android:layout_width="50dp"
        android:layout_height="0dp"
        android:text="控件 1:3"
        app:layout_constraintDimensionRatio="1:3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="控件 2:1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="2:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="控件 1:1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.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"
    tools:context=".basic.widget.ConstrainLayout.ConstrainLayoutChainActivity">

    <Button
        android:id="@+id/btn_packed1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="packed1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_packed2"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_packed2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="packed2"
        app:layout_constraintBaseline_toBaselineOf="@id/btn_packed1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toRightOf="@+id/btn_packed1"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/btn_spread1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="spread1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_spread2"
        app:layout_constraintTop_toBottomOf="@id/btn_packed1" />

    <Button
        android:id="@+id/btn_spread2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="spread2"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_spread1"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintLeft_toRightOf="@+id/btn_spread1"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/btn_spread_inside1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="spread1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_spread_inside2"
        app:layout_constraintTop_toBottomOf="@id/btn_spread1" />

    <Button
        android:id="@+id/btn_spread_inside2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="spread2"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_spread_inside1"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintLeft_toRightOf="@+id/btn_spread_inside1"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/btn_weight1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="spread1"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_weight2"
        app:layout_constraintTop_toBottomOf="@id/btn_spread_inside1" />

    <Button
        android:id="@+id/btn_weight2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="spread2"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_weight1"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toRightOf="@+id/btn_weight1"
        app:layout_constraintRight_toRightOf="parent" />

    <Button
        android:id="@+id/btn_bias1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bias1"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_bias2"
        app:layout_constraintTop_toBottomOf="@id/btn_weight1" />

    <Button
        android:id="@+id/btn_bias2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="bias2"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_bias1"
        app:layout_constraintLeft_toRightOf="@+id/btn_bias1"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

成长零一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【笔记】性能优化——ConstraintLayout使用

目录相对定位包裹与填充角度定位比例定位引导线定位控件宽高比例链式布局官网对ConstraintLayout的描述是这样的：ConstraintLayout是一个允许你用灵活的方式定位和调整控件尺寸的ViewGroup。A ConstraintLayout is a ViewGroup which allows you to position and size...
复制链接

扫一扫