第二章 Android常见界面布局
📘 第二章：Android 常见界面布局
在 Android 中，界面布局（Layout） 决定了应用中各个界面元素（View）如何在屏幕上排列。
掌握布局，是 Android UI 开发的基础。
一、View 与 Layout 基本概念
1️⃣ View（视图）
是 所有界面元素的基类。
常见的 View：
TextView（文本）EditText（输入框）Button（按钮）ImageView（图片）CheckBox、RadioButton等。
👉 每个 View 都是一个矩形区域，可以响应用户事件（点击、滑动等）。
2️⃣ ViewGroup（视图组）
是 View 的子类，但作用是 容纳和管理其他 View（或 ViewGroup）。
常见的 ViewGroup 就是各种 布局（Layout）。
例如：
LinearLayout、RelativeLayout、FrameLayout、ConstraintLayout
二、界面布局的编写方式
Android 提供两种布局定义方式：
| 编写方式 | 特点 |
|---|---|
| XML 布局文件 | 常用、直观，可视化编辑。位于 res/layout/ 目录。 |
| Java / Kotlin 代码动态生成 | 灵活，适合运行时动态创建 UI。 |
✅ 示例：XML 方式（推荐）
<!-- res/layout/activity_main.xml -->
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:text="Hello Android!"android:layout_width="wrap_content"android:layout_height="wrap_content"/>
</LinearLayout>
✅ 示例：Java 方式
LinearLayout layout = new LinearLayout(this);
layout.setOrientation(LinearLayout.VERTICAL);TextView textView = new TextView(this);
textView.setText("Hello Android!");
layout.addView(textView);setContentView(layout);
三、布局的通用属性
| 属性 | 含义 |
|---|---|
android:id | 控件唯一标识，用于 Java 代码引用。 |
android:layout_width / android:layout_height | 控件的宽高，可取 match_parent、wrap_content、具体数值。 |
android:layout_margin | 控件与外部的间距。 |
android:padding | 控件内部内容与边框的间距。 |
android:background | 背景颜色或图片。 |
android:gravity | 控件内部内容的对齐方式。 |
android:layout_gravity | 控件在父布局中的对齐方式。 |
四、常见布局类型
1️⃣ LinearLayout（线性布局）
按 水平（horizontal） 或 垂直（vertical） 方向顺序排列子控件。
<LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextView android:text="用户名:" /><EditText android:hint="请输入用户名" />
</LinearLayout>
📌 特点：
按方向依次排列。
可使用
android:weight分配剩余空间。
2️⃣ RelativeLayout（相对布局）
子控件之间 通过相对位置关系 来定位。
<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/tv_name"android:text="姓名:"android:layout_alignParentStart="true"/><EditTextandroid:layout_toEndOf="@id/tv_name"android:hint="请输入姓名"/>
</RelativeLayout>
📌 特点：
控件间可使用属性如：
layout_below、layout_above、layout_toRightOf、layout_alignParentTop。
比 LinearLayout 更灵活，但复杂布局管理困难。
3️⃣ TableLayout（表格布局）
以 行（TableRow）为单位 组织控件，类似 HTML 表格。
<TableLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><TableRow><TextView android:text="账号:" /><EditText android:hint="输入账号" /></TableRow><TableRow><TextView android:text="密码:" /><EditText android:hint="输入密码" /></TableRow>
</TableLayout>
📌 特点：
每一行使用
<TableRow>包裹。适合表格或登录界面。
自动对齐列宽。
4️⃣ FrameLayout（帧布局）
所有子控件 叠放在一起（后面的覆盖前面的）。
<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:src="@drawable/bg"android:layout_width="match_parent"android:layout_height="match_parent"/><TextViewandroid:text="覆盖文字"android:layout_gravity="center"/>
</FrameLayout>
📌 特点：
后添加的控件显示在上层。
常用于重叠布局，如图片 + 文字叠加效果。
5️⃣ ConstraintLayout（约束布局）
Android Studio 推荐的 现代主流布局，通过 约束（Constraint） 实现复杂排版。
<androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/tv_title"android:text="标题"app:layout_constraintTop_toTopOf="parent"app:layout_constraintStart_toStartOf="parent"/><Buttonandroid:text="确定"app:layout_constraintTop_toBottomOf="@id/tv_title"app:layout_constraintStart_toStartOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
📌 特点：
性能高、层级少（避免嵌套）。
可实现复杂界面。
通过拖拽设计器直观布局。
推荐取代 RelativeLayout。
五、布局选择建议
| 场景 | 推荐布局 |
|---|---|
| 简单上下排列 | LinearLayout（vertical） |
| 相对位置控制 | RelativeLayout |
| 登录表单 | TableLayout |
| 图片叠加文字 | FrameLayout |
| 复杂界面、性能优先 | ConstraintLayout |
六、布局嵌套与优化
嵌套太多会影响性能（测量和绘制开销大）。
推荐使用：
ConstraintLayout（减少嵌套）
merge、include 标签 复用布局。
示例：
<include layout="@layout/item_user" />
✅ 小结
| 名称 | 排列方式 | 优点 | 缺点 |
|---|---|---|---|
| LinearLayout | 线性排列 | 简单易用 | 嵌套多时效率低 |
| RelativeLayout | 相对定位 | 灵活 | 层级复杂 |
| TableLayout | 表格排列 | 整齐对齐 | 不适合复杂 UI |
| FrameLayout | 叠加布局 | 可实现覆盖效果 | 控件多时难控制 |
| ConstraintLayout | 约束布局 | 性能高、功能强 | 学习曲线稍高 |