android四种布局

anzhiyubuchiyu
0 阅读7分钟

Android布局资源四种常用类型详解

在Android应用开发中，布局资源是构建用户界面的基础，它定义了界面中各个组件的排列方式和相互关系。Android系统提供了多种布局类型，本文将结合实际项目案例，详细介绍最常用的四种布局：线性布局(LinearLayout)、相对布局(RelativeLayout)、表格布局(TableLayout)和帧布局(FrameLayout)。

一、线性布局（LinearLayout）

1.1 基本概念

LinearLayout是Android中最基础、最常用的布局之一，它会将包含的所有子控件按照垂直或水平方向依次排列。

核心特性：

  • 支持android:orientation属性指定排列方向：vertical（垂直排列）/horizontal（水平排列）
  • 支持android:layout_weight属性实现子控件的权重分配，可按比例划分屏幕空间
  • 子控件排列不会重叠，按照添加顺序依次展示

适用场景：

  • 简单的水平/垂直排列的界面
  • 需要按比例分配空间的场景
  • 作为其他复杂布局的基础单元组合使用

1.2 项目代码解析

对应项目：LinearLayout

<?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>

1.3 运行效果说明

运行效果：三个按钮水平排列，按钮1和按钮2各占1份宽度，按钮3占2份宽度，整体宽度比例为1:1:2。

图片描述

二、相对布局（RelativeLayout）

2.1 基本概念

RelativeLayout是一种非常灵活的布局，允许子控件通过相对位置关系来确定自己的位置，可以相对于父容器，也可以相对于其他子控件。

核心特性：

  • 支持多种相对位置属性：layout_alignParentTop、layout_centerInParent、layout_toRightOf、layout_above等
  • 可以实现复杂的界面布局，减少布局嵌套层级
  • 子控件位置关系灵活，适配性强

适用场景：

  • 控件位置关系复杂的界面
  • 需要减少布局嵌套层级优化性能的场景
  • 非规则排列的界面设计

2.2 项目代码解析

对应项目：RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/AppTheme"
    android:id="@+id/mainRelativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="1dp">
    
    <!-- 按钮1：位于父容器底部 -->
    <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"/>
        
    <!-- 按钮2：水平居中，距离顶部260dp -->
    <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"/>

    <!-- 按钮3：位于按钮2右侧，底部与按钮2底部对齐但向上偏移151dp -->
    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/btn_two"
        android:layout_marginLeft="-5dp"
        android:layout_marginBottom="151dp"
        android:layout_toRightOf="@id/btn_two"
        android:text="按钮3" />
</RelativeLayout>

2.3 运行效果说明

运行效果：按钮1固定在屏幕底部，按钮2在屏幕水平居中位置偏上，按钮3在按钮2的右上方位置，三个按钮位置完全通过相对关系确定。

图片描述

三、表格布局（TableLayout）

3.1 基本概念

TableLayout是一种以行列形式排列子控件的布局，类似HTML中的表格，通过TableRow来定义行，每个TableRow中可以添加多个子控件代表列。

核心特性：

  • 继承自LinearLayout，本质是特殊的线性布局
  • 支持stretchColumns、shrinkColumns、collapseColumns属性控制列的行为
  • 每一行的列数由包含子控件最多的TableRow决定
  • 不需要明确声明行数和列数，通过TableRow自动计算

适用场景：

  • 类似表格结构的界面
  • 需要对齐多列内容的场景
  • 表单类、数据展示类界面

3.2 项目代码解析

对应项目：TableLayout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2" >
    
    <!-- 第一行 -->
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="按钮1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮2" />
    </TableRow>
    
    <!-- 第二行 -->
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮4" />
    </TableRow>
    
    <!-- 第三行 -->
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮5" />
    </TableRow>
</TableLayout>

3.3 运行效果说明

运行效果：界面呈现三行三列的表格结构，第3列被设置为可拉伸，按钮1在(0,0)位置，按钮2在(0,1)位置，按钮3在(1,1)位置，按钮4在(1,2)位置，按钮5在(2,2)位置。

四、帧布局（FrameLayout）

4.1 基本概念

FrameLayout是最简单的布局类型，所有子控件都会被放置在布局的左上角，后添加的子控件会覆盖在前一个子控件之上，类似层叠效果。

核心特性：

  • 子控件默认从左上角开始绘制
  • 支持layout_gravity属性控制子控件在父容器中的对齐方式
  • 后添加的子控件层级更高，会覆盖前面的控件
  • 布局效率最高，渲染速度最快

适用场景：

  • 层叠效果的界面设计
  • 简单的单一控件占位布局
  • Fragment容器、自定义View的载体
  • 霓虹灯、加载动画等层叠效果实现

4.2 项目代码解析

对应项目：NeonLamp

<FrameLayout 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="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#ff0000" />
    <Button
        android:id="@+id/btn_two"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:background="#00ff00" />
    <Button
        android:id="@+id/btn_three"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:background="#0000ff" />
    <Button
        android:id="@+id/btn_four"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:background="#ff1243" />
    <Button
        android:id="@+id/btn_five"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:background="#324678" />
</FrameLayout>

4.3 运行效果说明

运行效果：五个不同颜色不同大小的正方形按钮都居中对齐，层层叠加，形成类似霓虹灯的同心圆效果，从外到内依次是红色、绿色、蓝色、粉红色、深蓝色。

图片描述

五、四种布局对比总结

布局类型优势劣势适用场景性能排序
LinearLayout简单易用、权重分配方便复杂布局容易嵌套过多简单水平/垂直排列2
RelativeLayout灵活、嵌套层级少属性复杂、测量性能开销大复杂位置关系界面4
TableLayout表格排列整齐、列控制方便不够灵活、仅适合表格场景表格类、表单界面3
FrameLayout最简单、性能最高功能有限、仅支持层叠层叠效果、容器场景1

布局选择建议：

  1. 优先考虑性能：简单布局优先使用LinearLayout/FrameLayout
  2. 减少嵌套层级：复杂布局优先使用RelativeLayout或者ConstraintLayout（进阶布局）
  3. 场景匹配：表格类场景用TableLayout，层叠类场景用FrameLayout
  4. 实际开发中通常是多种布局组合使用，达到最佳实现效果

扩展阅读

avatar
文章
阅读
粉丝