CoordinatorLayout基本使用与分析<三>

这个布局使用 ConstraintLayout 构建了一个以 "目标控件" 为中心的界面,包含多个相互关联的文本视图,重点展示了尺寸比例约束和相对定位的用法。以下是详细解析:

1. 根布局(ConstraintLayout)

  • 宽高均为 match_parent,占据整个屏幕空间
  • 定义了必要的命名空间,支持系统属性、ConstraintLayout 自定义属性和工具属性
  • 作为容器提供约束定位基础,保持布局层级扁平

2. 核心目标控件(@+id/target)

xml

ini 复制代码
<TextView
    android:id="@+id/target"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintWidth_min="120dp"
    android:text="目标控件"
    ...
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />
  • 定位:通过四个方向与父布局对齐,约束在屏幕正中心

  • 尺寸控制

    • android:layout_width="wrap_content":宽度自适应内容
    • android:layout_height="0dp":高度由约束决定
    • app:layout_constraintDimensionRatio="1:1":关键属性,强制宽高比为 1:1(正方形)
    • app:layout_constraintWidth_min="120dp":确保最小宽度为 120dp
  • 效果:无论内容如何,目标控件始终是正方形,且居中显示

3. A 控件(左侧文本)

xml

ini 复制代码
<TextView
    ...
    android:text="A"
    android:layout_marginEnd="16dp"
    app:layout_constraintBottom_toBottomOf="@+id/target"
    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_toTopOfapp:layout_constraintBottom_toBottomOf
    • 与目标控件保持 16dp 间距(android:layout_marginEnd="16dp"
  • 尺寸与位置

    • 宽度至少 120dp,高度与目标控件完全一致(因上下边缘对齐)
    • 位于目标控件左侧,高度与目标控件相同,形成垂直对齐效果

4. B 控件(右上角文本)

xml

ini 复制代码
<TextView
    ...
    android:text="B"
    app:layout_constraintBottom_toTopOf="@+id/target"
    app:layout_constraintEnd_toEndOf="@+id/target"
    app:layout_constraintStart_toEndOf="@+id/target"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_min="120dp" />
  • 定位关系

    • 下边缘与目标控件上边缘对齐(app:layout_constraintBottom_toTopOf="@+id/target"
    • 左右边缘分别与目标控件右边缘和父布局顶部对齐
    • 上边缘与父布局顶部对齐
  • 尺寸与位置

    • 宽度至少 120dp,高度填充父布局顶部到目标控件顶部的空间
    • 位于目标控件的右上角区域,宽度与目标控件右侧对齐

5. 加号控件(底部中央)

xml

ini 复制代码
<TextView
    ...
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="+"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@+id/target"
    app:layout_constraintEnd_toEndOf="@+id/target"
    app:layout_constraintStart_toStartOf="@+id/target"
    app:layout_constraintTop_toBottomOf="@+id/target" />
  • 定位关系

    • 上边缘与目标控件下边缘对齐(app:layout_constraintTop_toBottomOf="@+id/target"
    • 左右边缘与目标控件的左右边缘对齐(水平方向完全覆盖目标控件宽度)
  • 尺寸控制

    • android:layout_width="0dp":宽度由左右约束决定(与目标控件同宽)
    • app:layout_constraintDimensionRatio="1:1":宽高比 1:1,因此高度会等于宽度(与目标控件同宽同高)
  • 效果:在目标控件正下方形成一个与目标控件等大的正方形,显示 "+" 符号

布局整体特点

  1. 比例约束的应用 :两个控件(目标控件和加号控件)使用 app:layout_constraintDimensionRatio 强制保持正方形,确保在不同屏幕尺寸下形状一致
  2. 关联定位:所有控件都以目标控件为基准进行定位,形成紧密关联的布局结构
  3. 尺寸自适应 :通过 0dp 配合约束实现尺寸自适应,使控件能根据关联元素自动调整大小
  4. 空间分布:控件分布在目标控件的左方、上方和下方,形成围绕中心的布局结构

这种布局充分利用了 ConstraintLayout 的比例约束和相对定位特性,实现了既灵活又保持固定比例关系的界面设计。

相关推荐
行墨2 小时前
CoordinatorLayout基本使用与分析<二>
android
行墨3 小时前
CoordinatorLayout基本使用与分析<一>
android
tracyZhang4 小时前
Android低版本bitmap native分配实现原理
android·性能优化
奥尔特星云大使15 小时前
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·音视频