CoordinatorLayout基本使用与分析—— Group 批量控制

ini 复制代码
<?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">

    <androidx.constraintlayout.widget.Group
        app:constraint_referenced_ids="tv3,tv4,tv5"
        android:visibility="visible"
        android:layout_width="0dp"
        android:layout_height="0dp"/>

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_min="120dp"
        android:text="左上角"
        android:gravity="center"
        android:textSize="32sp"
        android:background="@color/color_3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_min="120dp"
        android:text="右上角"
        android:gravity="center"
        android:textSize="32sp"
        android:background="@color/color_1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_min="120dp"
        android:text="右下角"
        android:gravity="center"
        android:textSize="32sp"
        android:background="@color/color_8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/tv4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_min="120dp"
        android:text="左下角"
        android:gravity="center"
        android:textSize="32sp"
        android:background="@color/color_12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/tv5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_min="120dp"
        android:text="中间位置"
        android:gravity="center"
        android:textSize="32sp"
        android:background="@color/color_10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

这个布局使用 ConstraintLayout 作为根容器,并结合 Group 控件实现了对多个 TextView 的批量控制,整体布局清晰地展示了屏幕五个关键位置的文本控件。以下是详细解析:

1. 根布局(ConstraintLayout)

xml

ini 复制代码
<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">
  • 宽高均为 match_parent,占据整个屏幕空间
  • 定义了必要的命名空间,支持系统属性、ConstraintLayout 自定义属性和工具属性
  • 作为容器承载所有子控件,提供约束定位基础

2. Group 控件(批量控制可见性)

xml

ini 复制代码
<androidx.constraintlayout.widget.Group
    app:constraint_referenced_ids="tv3,tv4,tv5"  <!-- 关联的控件ID列表 -->
    android:visibility="visible"  <!-- 控制关联控件的可见性 -->
    android:layout_width="0dp"
    android:layout_height="0dp"/>
  • 核心作用 :通过 app:constraint_referenced_ids 关联多个控件(这里是 tv3tv4tv5),统一控制它们的可见性

    • android:visibility="visible" 时,关联的三个控件都可见
    • 若改为 invisiblegone,这三个控件会同时隐藏(无需逐个设置)
  • 特点

    • 自身宽高设为 0dp,不占用任何屏幕空间,也不会在界面上显示
    • 仅用于逻辑上的控件分组,方便批量操作(主要是可见性控制)
  • 优势 :对于需要同时显示 / 隐藏的多个控件,使用 Group 可以简化代码,避免重复设置

3. 各 TextView 解析

(1)左上角文本(tv1)

xml

ini 复制代码
<TextView
    android:id="@+id/tv1"
    android:text="左上角"
    android:background="@color/color_3"
    app:layout_constraintStart_toStartOf="parent"  <!-- 左边缘与父布局左对齐 -->
    app:layout_constraintTop_toTopOf="parent" />  <!-- 上边缘与父布局上对齐 -->
  • 定位:通过左上角与父布局对齐,固定在屏幕左上角
  • 尺寸wrap_content 自适应内容,app:layout_constraintWidth_min="120dp" 确保宽度至少 120dp
  • 样式 :32sp 字体,文字居中,背景色为 color_3

(2)右上角文本(tv2)

xml

ini 复制代码
<TextView
    android:id="@+id/tv2"
    android:text="右上角"
    android:background="@color/color_1"
    app:layout_constraintEnd_toEndOf="parent"  <!-- 右边缘与父布局右对齐 -->
    app:layout_constraintTop_toTopOf="parent" />  <!-- 上边缘与父布局上对齐 -->
  • 定位:通过右上角与父布局对齐,固定在屏幕右上角
  • 其他属性(尺寸、样式)与 tv1 一致,背景色为 color_1
  • 注意 :tv2 未被 Group 关联,其可见性不受 Group 控制

(3)右下角文本(tv3)

xml

ini 复制代码
<TextView
    android:id="@+id/tv3"
    android:text="右下角"
    android:background="@color/color_8"
    app:layout_constraintEnd_toEndOf="parent"  <!-- 右边缘与父布局右对齐 -->
    app:layout_constraintBottom_toBottomOf="parent" />  <!-- 下边缘与父布局下对齐 -->
  • 定位:通过右下角与父布局对齐,固定在屏幕右下角
  • 属于 Group 关联的控件(tv3constraint_referenced_ids 中),可见性由 Group 控制

(4)左下角文本(tv4)

xml

ini 复制代码
<TextView
    android:id="@+id/tv4"
    android:text="左下角"
    android:background="@color/color_12"
    app:layout_constraintStart_toStartOf="parent"  <!-- 左边缘与父布局左对齐 -->
    app:layout_constraintBottom_toBottomOf="parent" />  <!-- 下边缘与父布局下对齐 -->
  • 定位:通过左下角与父布局对齐,固定在屏幕左下角
  • 属于 Group 关联的控件,可见性由 Group 控制

(5)中间位置文本(tv5)

xml

ini 复制代码
<TextView
    android:id="@+id/tv5"
    android:text="中间位置"
    android:background="@color/color_10"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />
  • 定位:通过上下左右四个方向与父布局对齐,被约束在屏幕正中心
  • 属于 Group 关联的控件,可见性由 Group 控制

布局核心特点

  1. Group 控件的应用

    • 实现了对 tv3tv4tv5 的批量可见性控制,体现了 ConstraintLayout 对控件分组管理的支持
    • 当需要动态切换部分控件的显示状态时(如点击按钮隐藏 / 显示一组控件),只需修改 Groupvisibility 属性,无需逐个操作
  2. 定位逻辑清晰

    • 五个文本控件分别位于屏幕的左上角、右上角、右下角、左下角和正中心,通过简单的边缘约束实现精确定位
  3. 尺寸控制统一

    • 所有文本控件都通过 app:layout_constraintWidth_min="120dp" 保证最小宽度,避免内容过短时控件过窄,保持布局一致性
  4. 布局层级扁平

    • 所有控件直接位于 ConstraintLayout 下,无嵌套布局,有利于提升渲染性能

这个布局展示了 Group 控件在批量控制控件可见性方面的便捷性,特别适合需要统一管理多个相关控件显示状态的场景(如表单区域、功能模块的显示 / 隐藏)。

相关推荐
阿巴斯甜2 天前
Android 报错:Zip file '/Users/lyy/develop/repoAndroidLapp/l-app-android-ble/app/bu
android
Kapaseker2 天前
实战 Compose 中的 IntrinsicSize
android·kotlin
xq95272 天前
Andorid Google 登录接入文档
android
黄林晴2 天前
告别 Modifier 地狱,Compose 样式系统要变天了
android·android jetpack
冬奇Lab2 天前
Android触摸事件分发、手势识别与输入优化实战
android·源码阅读
城东米粉儿2 天前
Android MediaPlayer 笔记
android
Jony_2 天前
Android 启动优化方案
android
阿巴斯甜2 天前
Android studio 报错:Cause: error=86, Bad CPU type in executable
android
张小潇2 天前
AOSP15 Input专题InputReader源码分析
android
_小马快跑_3 天前
Kotlin | 协程调度器选择:何时用CoroutineScope配置,何时用launch指定?
android