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_toTopOf 和 app: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，因此高度会等于宽度（与目标控件同宽同高）
效果：在目标控件正下方形成一个与目标控件等大的正方形，显示 "+" 符号

布局整体特点

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

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