Android界面布局实验报告与代码实现

本仓库是针对“Android界面布局实验”的代码实现集合，包含5个实验子项目，分别对应线性布局、表格布局及约束布局的基础与进阶实践。通过本仓库代码，可直观理解Android中LinearLayout、TableLayout和ConstraintLayout的核心用法，完成实验要求的界面实现。

实验背景与目标

实验背景

Android布局是界面开发的基础，通过XML或代码定义控件的位置与关系，直接影响用户交互体验。本实验聚焦官方文档中三种核心布局：

• 线性布局（LinearLayout）：按水平/垂直方向排列控件，适合简单线性结构界面
• 表格布局（TableLayout）：以行列结构组织控件，适合展示表格类数据
• 约束布局（ConstraintLayout）：通过约束关系定义控件位置，灵活适配复杂界面

实验目标

1. 掌握线性布局的方向设置、权重分配及控件排列逻辑
2. 理解表格布局的行列管理、单元格合并及自适应规则
3. 熟练使用约束布局的基础约束（位置、尺寸）与高级特性（链式布局、比例约束等）
4. 能够根据界面需求选择合适的布局类型，并独立实现指定界面效果

项目结构与实验对应关系

仓库包含5个子项目，对应实验的不同任务，结构如下：

子项目名称	对应实验内容	核心布局类型	说明
Test2.1	线性布局实验	LinearLayout	基础线性布局界面实现
Test2.1_modify	线性布局扩展实验	LinearLayout	线性布局进阶特性测试
Test2.2	表格布局实验	TableLayout	表格结构界面实现
Test2.3	约束布局1（基础）	ConstraintLayout	约束布局基础界面实现
Test2.4	约束布局2（进阶）	ConstraintLayout	含图片资源的复杂约束布局

各子项目实验实现详情

1. Test2.1（线性布局实验）

实验要求

利用线性布局实现指定界面，重点掌握：

• 线性布局的orientation属性（水平/垂直方向切换）
• 控件layout_weight属性的权重分配（实现比例适配）
• 控件间距与对齐方式（layout_margin、gravity）

实现说明

• 布局文件：res/layout/linear_layout.xml
• 核心逻辑：通过垂直线性布局嵌套水平线性布局，实现多层级控件排列；使用权重分配按钮宽度，确保在不同屏幕尺寸下比例一致；通过gravity控制控件在父布局中的对齐方式。
• 主题配置：使用Test21Theme，支持Android 12+动态颜色适配。

2. Test2.1_modify（线性布局扩展实验）

实验要求

基于线性布局实验进行扩展，测试边界场景（如控件超出屏幕、权重异常分配等）的处理逻辑。

实现说明

• 布局文件：res/layout/linear_layout_test.xml
• 核心逻辑：在基础线性布局上增加控件数量与层级，测试layout_weight在嵌套布局中的传递规则；验证wrap_content与match_parent在不同方向下的表现；添加滚动控件（ScrollView）处理超出屏幕的内容。
• 依赖特点：引入Compose基础库，用于对比XML布局与声明式布局的实现差异（实验扩展内容）。

3. Test2.2（表格布局实验）

实验要求

利用表格布局实现指定界面，重点掌握：

• TableLayout与TableRow的嵌套关系
• 单元格合并（layout_span属性）
• 列宽自适应与固定宽度设置

实现说明

• 布局文件：res/layout/table_layout.xml
• 核心逻辑：通过TableLayout定义表格框架，TableRow作为行容器；使用layout_span实现跨列合并（如标题栏占满整行）；通过stretchColumns与shrinkColumns属性控制列的拉伸与收缩规则，适配不同屏幕。
• 依赖说明：显式引入material3:1.4.0库，确保表格内按钮、文本等控件的样式统一。

4. Test2.3（约束布局1 - 基础）

实验要求

利用ConstraintLayout实现指定界面，掌握基础约束关系：

• 控件与父布局的约束（左、右、上、下边缘对齐）
• 控件之间的约束（如A控件的左边对齐B控件的右边）
• 尺寸约束（固定尺寸、wrap_content、match_constraint）

实现说明

• 布局文件：res/layout/constraint_layout.xml
• 核心逻辑：通过app:layout_constraintStart_toStartOf、app:layout_constraintEnd_toEndOf等属性定义控件与父布局的边距约束；通过控件ID建立相互约束（如按钮1的右边对齐按钮2的左边）；使用match_constraint配合比例（layout_constraintDimensionRatio）实现正方形等特殊尺寸控件。
• 依赖说明：引入androidx.constraintlayout:2.2.1，提供约束布局核心支持。

5. Test2.4（约束布局2 - 进阶）

实验要求

利用ConstraintLayout实现含图片资源的复杂界面，掌握高级特性：

• 链式布局（水平/垂直链的分布方式：spread、spread_inside、packed）
• Guideline辅助线（固定位置或比例位置的参考线）
• 图片资源的约束适配（确保图片在不同屏幕下的显示比例）

实现说明

• 布局文件：res/layout/constraint_layout2.xml
• 图片资源：需从群文件下载图片，放置于res/drawable/目录（支持.png/.jpg格式）
• 核心逻辑：使用水平链排列多个图片控件，设置chainStyle为spread_inside实现均匀分布；通过垂直Guideline（比例50%）对齐控件左右位置；图片控件设置scaleType="centerCrop"确保图片不失真，同时通过约束限制最大尺寸避免拉伸。

技术栈与环境要求

技术栈

• 开发语言：Kotlin
• 布局定义：XML（res/layout/目录）
• 构建工具：Gradle（KTS脚本配置）
• 核心库：
  • AndroidX基础库（core-ktx、appcompat）
  • 约束布局库（constraintlayout:2.2.1）
  • Material Design 3（material3:1.4.0）
  • 测试库（JUnit、Espresso）

环境要求

• Android Studio：2023.1+（Electric Eel及以上版本）
• JDK：11+
• Android SDK：
  • 编译版本（compileSdk）：36
  • 最小支持版本（minSdk）：24（Android 7.0+）
  • 目标版本（targetSdk）：36
• 图片资源：Test2.4需提前下载群文件中的图片，放置于app/src/main/res/drawable/目录

构建与运行步骤

1. 克隆仓库到本地：

   git clone <仓库地址>
   cd <仓库目录>

2. 运行项目：

   • 打开Android Studio，点击“Open”选择对应子项目（如Test2.1）
   • 等待Gradle同步完成（首次同步可能需要下载依赖，耗时较长）
   • 连接Android设备（API 24+）或启动模拟器
   • 点击工具栏“Run”按钮（▶️），选择设备后运行

实验验证与测试

每个子项目包含基础单元测试（ExampleUnitTest.kt），验证布局逻辑的正确性：

• 测试内容：布局加载是否正常、控件是否正确显示
• 运行方式：
  1. 在Android Studio中展开app/src/test/java/目录
  2. 右键点击测试类（如ExampleUnitTest）
  3. 选择“Run ExampleUnitTest”

注意：测试需确保布局文件与资源存在，否则会出现ResourceNotFoundException。

注意事项

1. 布局文件命名：各子项目布局文件严格对应实验内容，请勿随意修改文件名（否则setContentView会加载失败）。
2. 图片资源：Test2.4的图片需保持文件名与布局中引用一致（如布局中使用@drawable/ic_test，则图片文件需命名为ic_test.png）。
3. 依赖冲突：部分子项目为测试不同依赖版本存在重复引入，实际开发中建议统一依赖版本（可在build.gradle.kts中调整）。
4. 屏幕适配：实验布局已适配主流屏幕尺寸，若在特殊分辨率设备上显示异常，可调整layout_weight或约束比例。

通过本仓库代码，可系统掌握Android三种核心布局的使用方法，完成实验要求的界面实现。建议结合官方文档深入理解布局原理，逐步优化布局性能与适配效果。