CoordinatorLayout基本使用与分析<二>

这个布局使用 ConstraintLayout 作为根容器,以一个 "目标控件" 为中心,围绕它放置了多个文本视图,形成了有明确空间关系的布局结构。下面是详细解析:

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. 核心目标控件(target)

xml

ini 复制代码
<TextView
    android:id="@+id/target"
    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" />
  • 定位:通过四个方向(上下左右)都与父布局对齐,被约束在屏幕正中心
  • 尺寸 :宽度自适应内容,但最小宽度为 120dp(app:layout_constraintWidth_min
  • 样式 :32sp 大字体,文字居中显示,背景色为color_10(需在 colors.xml 中定义)
  • 这是整个布局的核心参考点,其他多个控件都以它为基准进行定位

3. 无约束的 TextView("没有约束")

xml

ini 复制代码
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/color_7"
    android:gravity="center"
    android:text="没有约束"
    android:textSize="32sp"
    app:layout_constraintWidth_min="120dp" />
  • 特点 :没有设置任何app:layout_constraintXXX属性,也没有tools:属性
  • 实际位置:在运行时会默认显示在屏幕左上角(0,0 坐标)
  • 问题:这是不规范的写法,没有约束的控件在不同设备上可能出现位置偏移

4. A 控件(左侧文本)

xml

ini 复制代码
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/color_3"
    android:gravity="center"
    android:text="A"
    android:textSize="32sp"
    android:layout_marginEnd="16dp"
    app:layout_constraintEnd_toStartOf="@+id/target"
    app:layout_constraintTop_toTopOf="@+id/target"
    app:layout_constraintWidth_min="120dp" />
  • 定位关系

    • app:layout_constraintEnd_toStartOf="@+id/target":右边缘与目标控件的左边缘对齐
    • app:layout_constraintTop_toTopOf="@+id/target":上边缘与目标控件的上边缘对齐
    • android:layout_marginEnd="16dp":与目标控件之间保持 16dp 的间距
  • 最终位置:位于目标控件的左侧,且与目标控件顶部对齐

5. B 控件(上方文本)

xml

ini 复制代码
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/color_1"
    android:gravity="center"
    android:text="B"
    android:textSize="32sp"
    app:layout_constraintBottom_toTopOf="@+id/target"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_min="120dp" />
  • 定位关系

    • app:layout_constraintBottom_toTopOf="@+id/target":下边缘与目标控件的上边缘对齐
    • app:layout_constraintEnd_toEndOf="parent":右边缘与父布局右边缘对齐
    • app:layout_constraintTop_toTopOf="parent":上边缘与父布局上边缘对齐
  • 最终位置:位于屏幕右侧、目标控件的上方,高度会拉伸填充父布局顶部到目标控件顶部之间的空间

6. C 控件(右侧文本)

xml

ini 复制代码
<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/color_8"
    android:gravity="center"
    android:text="C"
    android:textSize="32sp"
    app:layout_constraintBottom_toBottomOf="@+id/target"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/target"
    app:layout_constraintWidth_min="120dp" />
  • 定位关系

    • app:layout_constraintStart_toEndOf="@+id/target":左边缘与目标控件的右边缘对齐
    • app:layout_constraintBottom_toBottomOf="@+id/target":下边缘与目标控件的下边缘对齐
    • app:layout_constraintEnd_toEndOf="parent":右边缘与父布局右边缘对齐
  • 最终位置:位于目标控件的右侧,与目标控件底部对齐,宽度会拉伸填充目标控件右侧到父布局右边缘的空间

7. D 控件(下方文本)

xml

ini 复制代码
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/color_12"
    android:gravity="center"
    android:text="D"
    android:textSize="32sp"
    app:layout_constraintEnd_toEndOf="@+id/target"
    app:layout_constraintTop_toBottomOf="@+id/target"
    app:layout_constraintWidth_min="120dp" />
  • 定位关系

    • app:layout_constraintTop_toBottomOf="@+id/target":上边缘与目标控件的下边缘对齐
    • app:layout_constraintEnd_toEndOf="@+id/target":右边缘与目标控件的右边缘对齐
  • 最终位置:位于目标控件的正下方,且与目标控件右对齐

整体布局效果

  • 屏幕中心是 "目标控件"
  • 目标控件左侧是 "A" 控件
  • 目标控件右侧是 "C" 控件
  • 目标控件上方右侧是 "B" 控件
  • 目标控件下方右侧是 "D" 控件
  • 屏幕左上角是 "没有约束" 控件(运行时位置)

这个布局展示了 ConstraintLayout 的核心能力:以一个中心控件为参考点,通过简单的约束关系实现其他控件的精确定位,形成清晰的空间结构,同时保持布局层级的扁平化。

相关推荐
tracyZhang4 小时前
Android低版本bitmap native分配实现原理
android·性能优化
奥尔特星云大使14 小时前
MySQL 慢查询日志slow query log
android·数据库·mysql·adb·慢日志·slow query log
2501_9159184119 小时前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview
K24B;19 小时前
多模态大语言模型LISA++
android·人工智能·语言模型·分割·多模态大语言模型
molihuan1 天前
开源 全平台 哔哩哔哩缓存视频合并 Github地址:https://github.com/molihuan/hlbmerge_flutter
android·flutter·缓存·ffmpeg·开源·github·音视频
奶糖 肥晨1 天前
批量重命名技巧:使用PowerShell一键整理图片文件命名规范
android·服务器·数据库
Momentary_SixthSense1 天前
如何对较长的Stream链进行Debug
android·java·开发语言
little_fat_sheep1 天前
【Rive】rive-android源码分析
android
教程分享大师1 天前
新魔百和m401h全部版本当贝桌面固件卡刷包和线刷包带adb权限
android