第二章 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 -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android: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） 方向顺序排列子控件。

复制代码

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:text="用户名:" />
    <EditText android:hint="请输入用户名" />
</LinearLayout>

📌 特点：

按方向依次排列。
可使用 android:weight 分配剩余空间。

2️⃣ RelativeLayout（相对布局）

子控件之间 通过相对位置关系 来定位。

复制代码

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_name"
        android:text="姓名:"
        android:layout_alignParentStart="true"/>

    <EditText
        android:layout_toEndOf="@id/tv_name"
        android:hint="请输入姓名"/>
</RelativeLayout>

📌 特点：

控件间可使用属性如：
- layout_below、layout_above、layout_toRightOf、layout_alignParentTop。
比 LinearLayout 更灵活，但复杂布局管理困难。

3️⃣ TableLayout（表格布局）

以 行（TableRow）为单位 组织控件，类似 HTML 表格。

复制代码

<TableLayout
    android: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（帧布局）

所有子控件 叠放在一起（后面的覆盖前面的）。

复制代码

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:src="@drawable/bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:text="覆盖文字"
        android:layout_gravity="center"/>
</FrameLayout>

📌 特点：

后添加的控件显示在上层。
常用于重叠布局，如图片 + 文字叠加效果。

5️⃣ ConstraintLayout（约束布局）

Android Studio 推荐的 现代主流布局 ，通过 约束（Constraint） 实现复杂排版。

复制代码

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_title"
        android:text="标题"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <Button
        android: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	约束布局	性能高、功能强	学习曲线稍高