CoordinatorLayout基本使用与分析<一>

这个布局使用 ConstraintLayout 作为根容器,在屏幕的五个个角落和中心各放置了一个 TextView,并额外放置了一个位置固定的 Button。下面是详细解析:

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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  • 根布局宽高均为 match_parent,即填满整个屏幕。
  • 定义了三个命名空间:android(系统属性)、app(ConstraintLayout 自定义属性)、tools(仅用于布局编辑器的临时属性)。
  • 给根布局设置了 ID @+id/root,用于子控件约束定位。

2. Button(button13)

xml

ini 复制代码
<Button
    android:id="@+id/button13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    tools:layout_editor_absoluteX="80dp"
    tools:layout_editor_absoluteY="149dp" />
  • 宽高均为 wrap_content,即大小由文字内容决定。
  • 注意 :仅使用了 tools: 前缀的属性(layout_editor_absoluteX/Y),这些属性仅在 Android Studio 布局编辑器中生效,实际运行时不会生效。因此,这个 Button 在真机 / 模拟器中会因缺少约束而默认显示在屏幕左上角(0,0 位置)。
  • 这是一个不规范的写法,实际开发中必须添加真实约束(如 app:layout_constraintXXX)来确定位置。

3. 左上角 TextView

xml

xml 复制代码
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_min="120dp"  <!-- 最小宽度120dp -->
    android:text="左上角"
    android:gravity="center"  <!-- 文字居中显示 -->
    android:textSize="32sp"
    android:background="@color/color_3"  <!-- 背景色(需在colors.xml中定义) -->
    app:layout_constraintStart_toStartOf="@id/root"  <!-- 左边缘与根布局左边缘对齐 -->
    app:layout_constraintTop_toTopOf="parent" />  <!-- 上边缘与根布局上边缘对齐 -->
  • 定位 :通过 Start_toStartOfTop_toTopOf 约束,固定在屏幕左上角。
  • 尺寸wrap_content 自适应内容,但 app:layout_constraintWidth_min="120dp" 保证宽度至少为 120dp(即使文字很短也不会窄于 120dp)。

4. 右上角 TextView

xml

ini 复制代码
<TextView
    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" />  <!-- 上边缘与根布局上边缘对齐 -->
  • 定位 :通过 End_toEndOfTop_toTopOf 约束,固定在屏幕右上角。
  • 其他属性(尺寸、文字样式等)与左上角 TextView 一致。

5. 右下角 TextView

xml

ini 复制代码
<TextView
    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" />  <!-- 下边缘与根布局下边缘对齐 -->
  • 定位 :通过 End_toEndOfBottom_toBottomOf 约束,固定在屏幕右下角。

6. 左下角 TextView

xml

ini 复制代码
<TextView
    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" />  <!-- 下边缘与根布局下边缘对齐 -->
  • 定位 :通过 Start_toStartOfBottom_toBottomOf 约束,固定在屏幕左下角。

7. 中间位置 TextView

xml

xml 复制代码
<TextView
    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" />  <!-- 下边缘与根布局下边缘对齐 -->
  • 定位:同时约束了上下左右四个方向与根布局对齐,因此会被 "拉" 到屏幕正中心。
  • 原理:上下约束使控件在垂直方向居中,左右约束使控件在水平方向居中,最终整体位于屏幕中心。

布局效果总结

  • 屏幕四个角落分别有一个带背景色的 TextView,文字分别为 "左上角""右上角""右下角""左下角"。
  • 屏幕正中心有一个 TextView,文字为 "中间位置"。
  • Button 由于仅使用 tools: 属性,实际运行时会默认显示在屏幕左上角(0,0 位置),需补充真实约束才能正确定位。

这种布局方式充分利用了 ConstraintLayout 的相对定位特性,通过简单的约束关系即可实现控件在屏幕关键位置的精确定位,且布局层级扁平(仅一层),性能优于嵌套布局。

相关推荐
用户091 小时前
Kotlin Flow的6个必知高阶技巧
android·面试·kotlin
用户091 小时前
Flutter插件与包的本质差异
android·flutter·面试
用户091 小时前
Jetpack Compose静态与动态CompositionLocal深度解析
android·面试·kotlin
聆风吟º4 小时前
【Spring Boot 报错已解决】别让端口配置卡壳!Spring Boot “Binding to target failed” 报错解决思路
android·java·spring boot
非专业程序员Ping12 小时前
HarfBuzz概览
android·ios·swift·font
Jeled13 小时前
「高级 Android 架构师成长路线」的第 1 阶段 —— 强化体系与架构思维(Clean Architecture 实战)
android·kotlin·android studio·1024程序员节
明道源码15 小时前
Kotlin 控制流、函数、Lambda、高阶函数
android·开发语言·kotlin
消失的旧时光-194317 小时前
Kotlin × Gson:为什么遍历 JsonObject 要用 entrySet()
android·kotlin·数据处理·1024程序员节
G果18 小时前
安卓APP页面之间传参(Android studio 开发)
android·java·android studio
曾凡宇先生19 小时前
无法远程连接 MySQL
android·开发语言·数据库·sql·tcp/ip·mysql·adb