Android UI 实战:结合四个经典项目带你彻底掌握四种常用布局

0 阅读4分钟

Android UI 实战:结合四个经典项目带你彻底掌握四种常用布局

在 Android 开发中,优秀的 UI 界面离不开合理的布局(Layout)。布局就像是建筑的骨架,决定了各种 UI 控件(如按钮、文本框等)在屏幕上的摆放方式。今天,我们将结合四个实际跑通的入门项目,图文并茂地带大家深入理解 Android 中最常用的四种布局类型。

1. LinearLayout (线性布局)

核心概念:

线性布局是最简单、最常用的布局之一。顾名思义,它会将容器内的所有子控件按照单一方向(水平方向或垂直方向)依次排列。

关键属性:

  • android:orientation:决定排列方向。可选值为 horizontal(水平,默认值)和 vertical(垂直)。
  • android:layout_weight:权重属性,用于按比例分配剩余空间。

项目实战分析:

1.png

从运行截图可以看出,应用名为 LinearLayout。界面中包含三个按钮(按钮1、按钮2、按钮3),它们像排队一样从左到右水平依次排列。这就是典型的 android:orientation="horizontal" 的效果。如果屏幕空间不够,超出部分的控件将无法显示。


2. FrameLayout (帧布局)

核心概念:

帧布局是 Android 中最简单的布局对象。它在屏幕上开辟出一块区域(一帧),所有子控件都会默认被放置在屏幕的左上角。如果放入多个控件,后放入的控件会**叠加(覆盖)**在先放入的控件之上,形成 Z 轴上的层叠效果。

关键属性:

  • android:layout_gravity:用于控制子控件在帧布局容器中的对齐方式(如居中、靠右等),以此来避免控件完全重叠死板。

项目实战分析:

2.png

这个名为 NeonLamp(霓虹灯)的项目完美展示了 FrameLayout 的层叠特性。截图中我们可以看到由外向内依次是:大红块、绿块、蓝块、小红块、深蓝小块。

在 XML 代码中,最底层的大红块是第一个声明的 View,而最顶层的深蓝色小块是最后声明的。通过配合 layout_gravity="center" 属性,所有的色块都居中对齐,由于它们尺寸逐渐减小,叠加在一起就形成了这种类似“霓虹灯”或“靶心”的视觉效果。


3. RelativeLayout (相对布局)

核心概念:

相对布局非常灵活且强大。它允许子控件指定它们相对于父容器(比如屏幕边缘)或相对于其他兄弟控件(比如在某个按钮的左边或下方)的位置。这种布局可以有效减少布局的嵌套层级,提升渲染性能。

关键属性:

  • 相对于父容器: layout_alignParentBottom, layout_centerInParent 等。
  • 相对于兄弟控件: layout_toRightOf, layout_below 等。

项目实战分析:

3.png

在这个 RelativeLayout 项目中,三个按钮的位置非常自由:

  • 按钮1:位于屏幕的左下角(相对于父容器底部和左侧对齐)。

  • 按钮2:位于屏幕的正中央(相对于父容器完全居中)。

  • 按钮3:位于屏幕的中上部偏右的位置。

    这种非线性的、散落的排列方式,如果用线性布局需要嵌套好几层,而用相对布局只需要为每个按钮指定好各自的相对参考点即可轻松实现。


4. TableLayout (表格布局)

核心概念:

表格布局继承自 LinearLayout,它将屏幕划分为网格(行和列)。但与直接指定行列不同,它主要通过 TableRow 对象来定义行,而在 TableRow 中添加的控件数量就决定了该行的列数。

关键属性:

  • android:stretchColumns:指定哪些列可以被拉伸以填满剩余空间。
  • android:shrinkColumns:指定哪些列可以被收缩以防超出屏幕。
  • android:layout_column / android:layout_span:用于控件控制跨列显示(类似 Excel 的合并单元格)。

项目实战分析:

4.png

TableLayout 项目的截图,界面的布局呈现明显的表格状:

  • 第一行:包含按钮1、按钮2。

  • 第二行:包含按钮3、按钮4。可以看出按钮4可能占据了特定的列位置或者使用了跨列属性。

  • 第三行:只有一个按钮5,但它的宽度似乎跨越了多个单元格。

    这种布局非常适合用于处理表单、计算器界面或任何需要规整对齐的 UI 设计。


总结

四种布局各有千秋,在实际开发中往往是组合使用的:

布局类型特点一句话总结适用场景
LinearLayout单一方向依次排列简单的列表、表单、工具栏排列
FrameLayout视图层叠,Z轴叠加悬浮按钮、视频播放器加载遮罩、碎片(Fragment)容器
RelativeLayout灵活的相对位置定位复杂的、非对称的界面,减少布局嵌套
TableLayout规整的行列表格形式设置页面、计算器键盘、数据展示报表