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

简介: ConstraintLayout是Android中一款强大的布局管理器,它通过视图间的约束轻松创建复杂灵活的界面。相较于传统布局,它提供更高灵活性与性能。基本用法涉及XML定义约束,如视图与父布局对齐。此外,它支持百分比尺寸、偏移量控制等高级功能,并配有ConstraintSet和编辑器辅助设计。合理运用可显著提高布局效率及性能。

本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点

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_toLeftOflayout_constraintRight_toRightOflayout_constraintTop_toTopOflayout_constraintBottom_toBottomOf
    用于设置视图四个边缘的约束,这些约束可以是父布局或者其他视图的边缘。

  • layout_constraintHorizontal_biaslayout_constraintVertical_bias
    控制视图在其约束区间内的偏移量,取值范围是 0.0 - 1.0,默认为 0.5(居中)。

  • layout_constraintWidth_percentlayout_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)

实用技巧和经验

  1. 尽可能多用 0dp(match constraints):
    当你希望视图根据其约束条件自动调整大小时,使用 0dp 作为宽度或高度。

  2. 谨慎使用 wrap_content:
    wrap_content 可能会导致性能问题,考虑用 match constraints 来代替。

  3. 使用 chains:
    在需要多个视图沿某个方向排列时,可以使用链(horizontal chain,vertical chain),这比线性布局更高效。

  4. 减少嵌套布局:
    ConstraintLayout 可以大幅减少传统布局中的嵌套层级,从而提升性能。

  5. ConstraintLayout Editor:
    使用 Android Studio 提供的可视化工具来设计和调整你的 ConstraintLayout,这会让布局设计更直观。

  6. 性能调优:
    ConstraintLayout 自身性能已经不错,但确保你不为每个小部件使用过多的复杂约束,这样可以保持较好的渲染性能。

  7. 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" />

总结

通过合理使用和理解 ConstraintLayout 及其提供的丰富 API 和工具集,可以让你高效地创建和管理复杂且灵活的 Android 布局。希望这些讲解和技巧能帮助你更好地使用 ConstraintLayout。


欢迎关注我的公众号AntDream查看更多精彩文章!

目录
相关文章
|
3月前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
136 3
|
2月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
307 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
274 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
639 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
3月前
|
存储 消息中间件 人工智能
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
282 10
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
|
3月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
129 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
2月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
165 0
|
3月前
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
115 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
|
3月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
169 4
|
3月前
|
存储 API Android开发
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
199 4
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡

热门文章

最新文章