Android经典实战之约束布局ConstraintLayout的实用技巧和经验

AntDream

发布于 2024-08-19 16:18:40

1530

发布于 2024-08-19 16:18:40

文章被收录于专栏：程序员修炼之路

心里种花，人生才不会荒芜，如果你也想一起成长，请点个关注吧。

ConstraintLayout 是 Android 中一种强大的布局管理器，能够帮助你创建复杂而灵活的布局。它通过约束系统将一个 View 的位置和大小与其他 View 或父布局联系起来，使得布局代码更加简洁且易于维护。

ConstraintLayout 概述

ConstraintLayout 是一种基于约束的布局方式，与传统的布局（如 LinearLayout、RelativeLayout）相比，具有更高的灵活性和性能。它允许你在视图之间创建多种多样的约束条件，比如对齐、比例、偏移等。

基本用法

要使用 ConstraintLayout 需要在布局文件中声明它，通常使用 XML 文件来定义约束：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello, ConstraintLayout!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这个例子中，TextView 的宽度设为 0dp，表示它会根据约束条件自动调整大小。它的左右边缘约束到父布局左右边缘，顶部和底部分别约束到父布局顶部和底部，这样它就会在父布局中居中显示。

常用属性

layout_constraintLeft_toLeftOf、layout_constraintRight_toRightOf、layout_constraintTop_toTopOf、layout_constraintBottom_toBottomOf：用于设置视图四个边缘的约束，这些约束可以是父布局或者其他视图的边缘。
layout_constraintHorizontal_bias 和 layout_constraintVertical_bias：控制视图在其约束区间内的偏移量，取值范围是 0.0 - 1.0，默认为 0.5（居中）。
layout_constraintWidth_percent 和 layout_constraintHeight_percent：通过百分比来定义视图的宽度和高度。
layout_constraintDimensionRatio：设置视图的宽高比，如 "1:1" 表示正方形。

辅助工具

ConstraintLayout 提供了 ConstraintSet 和 ConstraintLayout Editor（在 Android Studio 中），可以更方便地创建和修改布局。

ConstraintSet

ConstraintSet 允许你通过代码动态地改变布局约束，以下是一个简单示例：

import androidx.constraintlayout.widget.ConstraintSet
import androidx.constraintlayout.widget.ConstraintLayout

val constraintLayout: ConstraintLayout = findViewById(R.id.constraintLayout)
val constraintSet = ConstraintSet()
constraintSet.clone(constraintLayout)

// 创建新的约束
constraintSet.connect(R.id.textView, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, 0)
constraintSet.connect(R.id.textView, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 0)

// 应用新的约束
constraintSet.applyTo(constraintLayout)

实用技巧和经验

尽可能多用 0dp（match constraints）：当你希望视图根据其约束条件自动调整大小时，使用 0dp 作为宽度或高度。
谨慎使用 wrap_content：wrap_content 可能会导致性能问题，考虑用 match constraints 来代替。
使用 chains：在需要多个视图沿某个方向排列时，可以使用链（horizontal chain，vertical chain），这比线性布局更高效。
减少嵌套布局：ConstraintLayout 可以大幅减少传统布局中的嵌套层级，从而提升性能。
ConstraintLayout Editor：使用 Android Studio 提供的可视化工具来设计和调整你的 ConstraintLayout，这会让布局设计更直观。
性能调优：ConstraintLayout 自身性能已经不错，但确保你不为每个小部件使用过多的复杂约束，这样可以保持较好的渲染性能。
Barrier 和 Guideline：使用 Barrier 可以实现动态的视图边界管理，而 Guideline 可以让你更容易地对齐视图。

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="button1,button2" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintGuide_percent="0.5" />