Android 常见界面布局全解析｜从基础到实战

用户01320143603
0 阅读5分钟

一、Android 界面布局基础

Android 界面由 View 控件 和 ViewGroup 容器 构成：

  • View：界面的最小单元，如 Button、TextView 等，负责展示内容与交互。

  • ViewGroup：作为容器，可包含 View 或其他 ViewGroup，负责控件的排列与布局。

  • 布局编写方式：

    1. XML 布局文件：代码与界面分离，结构清晰，是主流方式。
    2. Java 代码：动态创建布局，适合复杂交互场景。

java

运行

// Java 代码创建 RelativeLayout 示例
RelativeLayout relativeLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.WRAP_CONTENT,
    RelativeLayout.LayoutParams.WRAP_CONTENT
);
params.addRule(RelativeLayout.CENTER_IN_PARENT);

TextView textView = new TextView(this);
textView.setText("Java 代码实现界面布局");
textView.setTextColor(Color.RED);
textView.setTextSize(18);

relativeLayout.addView(textView, params);
setContentView(relativeLayout);

布局通用属性

四种布局均继承自 ViewGroup，共享以下通用属性：

表格

属性名功能描述
android:id布局唯一标识，用于代码中获取控件
android:layout_width布局宽度（match_parent/wrap_content/ 具体尺寸）
android:layout_height布局高度（同宽度）
android:background背景（颜色 / 图片）
android:layout_margin布局与外部的距离
android:padding布局与内部控件的距离

二、LinearLayout（线性布局）

核心特性

子控件按 水平（horizontal） 或 垂直（vertical） 方向线性排列，支持通过 android:layout_weight 按比例分配剩余空间。

关键属性

  • android:orientation：排列方向
  • android:layout_weight：权重，用于按比例分配空间（需将对应方向的 layout_width 或 layout_height 设为 0dp）

实战代码

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮2"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="按钮3"/>
</LinearLayout>

运行效果

  • LinearLayout 项目：三个按钮水平排列，宽度比例为 1:1:2。
  • 动物连连看项目：多个 LinearLayout 嵌套，实现水平排列的动物图片网格。

a55a6e76574fb4ece1a77984f9ebae30.png

适用场景

表单、工具栏、列表项、水平 / 垂直排列的简单界面。

三、RelativeLayout（相对布局）

核心特性

子控件以 父容器或其他控件 为参照物，通过相对位置属性进行定位，可有效减少布局嵌套。

关键属性

表格

属性名功能描述
android:layout_centerInParent在父容器中居中
android:layout_below位于某控件下方
android:layout_toRightOf位于某控件右侧
android:layout_alignParentBottom与父容器底部对齐

实战代码

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"/>

    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="260dp"/>

    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_alignBottom="@id/btn_two"
        android:layout_toRightOf="@id/btn_two"
        android:layout_marginBottom="100dp"/>
</RelativeLayout>

运行效果

  • RelativeLayout 项目：三个按钮按相对位置精准定位。
  • 音乐播放器项目：实现封面图、控制按钮等复杂界面的相对对齐。

58195a0e0874c533e8eafd70e013eac1.png

适用场景

登录页、个人中心、音乐播放器等需要复杂控件定位的界面。

四、TableLayout（表格布局）

核心特性

以 行（TableRow） 和 列 的形式管理控件，列宽由该列最宽控件决定，支持拉伸、收缩列。

关键属性

  • android:stretchColumns：设置可拉伸的列（下标从 0 开始）
  • android:shrinkColumns：设置可收缩的列
  • android:layout_column：指定控件位于第几列

实战代码

xml

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*">

    <TableRow>
        <Button android:text="按钮1" android:layout_column="0"/>
        <Button android:text="按钮2" android:layout_column="1"/>
        <Button android:text="按钮3" android:layout_column="2"/>
    </TableRow>

    <TableRow>
        <Button android:text="按钮4" android:layout_column="0"/>
        <Button android:text="按钮5" android:layout_column="2"/>
    </TableRow>
</TableLayout>

运行效果

  • TableLayout 项目：按钮按 3 行 3 列的表格形式整齐排列。
  • 计算器项目：实现 5 行 4 列的计算器键盘界面。

bf12220e5d41a9d30ce575c2ffde5243.png

适用场景

计算器、表单、数据表格等需要规整行列的界面。

五、FrameLayout（帧布局）

核心特性

所有子控件默认叠加在 左上角，后添加的控件会覆盖在先添加的控件之上，可通过 android:foreground 设置前景图。

关键属性

  • android:foreground：设置前景图像（始终在最上层）
  • android:foregroundGravity：设置前景图像的显示位置

实战代码

xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="left">

    <Button
        android:layout_width="300dp"
        android:layout_height="450dp"
        android:text="按钮1"/>

    <Button
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:text="按钮2"/>
</FrameLayout>

运行效果

  • FrameLayout 项目：按钮 2 覆盖在按钮 1 之上，前景图始终显示在最上层。
  • 霓虹灯项目（NeonLamp） ：多个不同大小、颜色的按钮层叠，实现霓虹灯效果。

89499ed4d51a7b0e845e1e2c031d649e.png

适用场景

Fragment 容器、加载动画遮罩、霓虹灯效果、悬浮按钮等。

六、四种布局对比与选型

表格

布局类型核心特点优点缺点代表项目
LinearLayout线性排列，支持权重简单易用，结构清晰复杂界面需多层嵌套动物连连看
RelativeLayout相对定位灵活，减少嵌套属性繁多，学习成本略高音乐播放器
TableLayout表格行列规整对齐，适合表单灵活性差计算器
FrameLayout层叠叠加轻量高效，渲染快定位单一，控件易重叠霓虹灯

七、总结

Android 四种传统布局是构建界面的基石：

  • LinearLayout：适合顺序排列，是布局的基础。
  • RelativeLayout：适合复杂定位，是处理不规则界面的利器。
  • TableLayout：适合规整表格，是表单开发的首选。
  • FrameLayout：适合层叠效果，是实现特殊 UI 的高效选择。

掌握这些布局的核心特性与用法，能快速完成绝大多数 Android 界面开发，为后续学习 ConstraintLayout 等现代布局打下坚实基础。

avatar
文章
阅读
粉丝