Android 入门必学:常见界面布局超详细总结(附代码 + 实战场景)

8 阅读3分钟

本文基于《Android 移动开发基础案例教程(第 2 版)》第 2 章整理,适合 Android 初学者、在校学生、入门开发者阅读。

Android 应用界面 = 布局(框架) + 控件(砖瓦) 。想写出规范、好看的 UI,必须先吃透四大常用布局。


一、先懂核心:View 与 ViewGroup

Android 所有 UI 元素,都由这两个基础组件构成:

  • View:基础 UI 控件(TextView、Button、ImageView 等)
  • ViewGroup:容器控件,所有布局都继承自它,可嵌套 View 或其他 ViewGroup

一句话总结:布局就是能装控件的 ViewGroup


二、两种布局编写方式(XML 永远首选)

Android 支持两种布局写法,开发中优先用 XML

1. 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="使用XML布局文件控制UI界面"
        android:textColor="#ff0000"
        android:textSize="18sp"
        android:layout_centerInParent="true"/>

</RelativeLayout>

2. Java 代码编写(动态界面)

全部用 new 创建,适合动态界面,可读性较差。

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布局唯一标识,@+id/xxx
android:layout_width布局宽度
android:layout_height布局高度
android:background背景(颜色 / 图片)
android:layout_margin外边距
android:padding内边距

三个关键尺寸值

  • match_parent:填满父容器(替代旧 fill_parent)
  • wrap_content:包裹内容
  • 固定值:如 50dp(尺寸用 dp,字体用 sp)

四、四大布局精讲(面试 + 开发高频)

1. 线性布局 LinearLayout

水平 / 垂直方向依次排列,最基础、最常用。

核心属性

  • android:orientation:vertical(垂直)/horizontal(水平)
  • android:layout_weight:权重,按比例分配空间

权重使用要点

使用权重时,对应方向宽 / 高设为 0dp,比例计算最精准。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

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

实战场景:仿动物连连看、按钮栏、表单。


2. 相对布局 RelativeLayout

通过相对定位摆放控件,灵活度最高,复杂界面首选。

常用定位属性

  • 居中:layout_centerInParent
  • 方位:layout_belowlayout_toRightOf
  • 对齐父控件:layout_alignParentTop
  • 默认:不设置位置 → 左上角对齐

实战场景:音乐播放器、个人中心。


3. 表格布局 TableLayout

行、列排列,类似 Excel 表格。

  • 外层:TableLayout
  • 每行:TableRow
  • 每列:TableRow 中的控件

专属属性

  • stretchColumns:拉伸列
  • shrinkColumns:收缩列
  • collapseColumns:隐藏列

实战场景:计算器、表单、数据表格。


4. 帧布局 FrameLayout

控件层层叠加,后添加的覆盖在先添加的之上,默认左上角对齐。

专属属性

  • android:foreground:前景图(永远在最上层)
  • android:foregroundGravity:前景图位置

实战场景:霓虹灯、Fragment 容器、悬浮窗。


五、布局快速选型指南

  • 横竖排队 → LinearLayout
  • 灵活定位 → RelativeLayout
  • 表格 / 计算器 → TableLayout
  • 叠加层 → FrameLayout

六、本章小结

  1. View 是控件,ViewGroup 是容器。
  2. 优先用 XML 编写布局,解耦易维护。
  3. 通用属性 + 四大布局,可完成大部分基础界面。
  4. 权重、相对定位、叠加规则是面试高频考点。