章节索引 :

FrameLayout 应该说是 Android 常用UI布局里面最简单的一种,顾名思义,它的布局方式就是将 View 一帧一帧的叠加到一起,有点类似 Photoshop 里面的图层的概念。在学习 FrameLayout 的过程中,你会发现基于它可以设计出很多有意思的 Android UI。那么接下来,我们来一起一探究竟。

1. FrameLayout 的特性

FrameLayout 是最简单且最高效的布局形式,不过 FrameLayout 的使用频率相比其他的 Layout 来讲要更少很多,主要是因为很多时候它只是作为一个容器来显示单个 View 或者多个 View 重叠的场景。

用过 Photoshop 的朋友对“图层”的概念应该比较熟悉,我们可以插入很多个图层,后添加的图层会挡住先添加的图层,然后针对每个图层我们可以任意的设置它在整个图片中的位置。同样的,我们可以设置 FrameLayout 内部 View 所处的位置,与 RelativeLayout 相似,可以设置放置在上下左右,同样也可以设置边距。如果放置了多个 View,那么他们会按照放置的顺序依次叠加,后加入 View 的会挡住前面加入的 View。

2. FrameLayout 的常用设置

在第 1 小节我们提到过,FrameLayout 可以设置内部 View 所在的位置,那么这几个属性和 RelativeLayout 一样,这里不再重复,主要介绍一下 FrameLayout 特有又常用的两个属性:android:foregroundandroid:foregroundGravity

2.1 前景图像

android:foreground: 设置 FrameLayout 的前景图像
前景图像会置于 FrameLayout 内部所有 View 的层级之上,直接设置图片的资源 id 即可,如下:

android:foreground="@drawable/emercy"

2.2 前景位置

android:foregroundGravity: 设置 FrameLayout 前景图片的摆放位置,设置方式与 RelativeLayout 中的 View 一样,如:

android:foregroundGravity="bottom|right"

3. 通过 XML 完成一个 FrameLayout

我们的 FrameLayout 需要满足以下要求:

  • 一个图片,作为 FrameLayout 的前景;
  • 一个 Android Logo 图片资源(ImageView);
  • 一个文本资源,和 Logo 重叠,可以看到后添加的 View 会挡住前面添加的 View;
  • 一个文本资源,和前景图片重叠,可以看到前景图片时钟会在内部 View 之上显示。

完成以上功能的布局代码比较简单:

<?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="@drawable/emercy"
    android:foregroundGravity="bottom|right"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="#4C374A"
        android:padding="10dp"
        android:text="Welcome to iMooc"
        android:textColor="#FFFFFF"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left|bottom"
        android:background="#1E64D8"
        android:padding="10dp"
        android:text="Emercy Android"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />
</FrameLayout>

效果如下:

FrameLayout示例

这就是 FrameLayout 的基本用法。

4. FrameLayout 的适用场景

到这里,基本上你已经掌握了 FrameLayout 的用法,可能你会有所疑惑,看起来 FrameLayout 也没有什么特别好的地方,似乎完全可以被 RelativeLayout 替代,所以很多人在开发过程中,往往会忘记还有这么个 Layout。其实越是往后学你越会发现,FrameLayout 的简单不仅仅体现在使用上,更大的优势是在于其性能。当你的屏幕上控件不太多时,比如 Android 的桌面 Widget,或者 Home 应用,大多都是直接采用 FrameLayout 完成的布局。

事实上,还有一处是 FrameLayout 用的最多的地方,也是一个非常隐蔽的地方。如果我们打开 Hierarchy Viewer 或者类似的 View 分析工具,我们可以看到Android的每一个页面都是在一个 FrameLayout 中完成的布局,也就是无论你定义的布局有多复杂,最终都会被放到一个 FrameLayout 当中显示,这也体现了 FrameLayout 的强大,在今后的学习工作中,希望大家一定不要忽视了 FrameLayout,在此为大家埋下一个伏笔。

5. 小结

这里需要再次强调:FrameLayout 是最简单,最高效的布局方式。它的布局方式很容易理解,我们通过它可以将内部的 View 防止到任意的方位,如果内部有多个 View,那么按照防止顺序,后加入的View会挡住前面加入的 View。

环境搭建,开发相关
Android 系统背景及结构概述 Android 开发环境搭建 Genymotion 的安装与使用 Android 工程解析及使用 Android 程序签名打包
常用 UI 布局
Android 的 UI 根基 View与View Android 线性布局 LinearLayout Android相对布局RelativeLayout Android 表格布局 TableLayout Android 网格布局 GridLayout Android 帧布局 FrameLayout Android绝对布局AbsoluteLayout
基础控件
Android 文本框 TextView Android 文本输入框 EditText 按钮 Button/ImageButton 选择框 RadioButton/Check 开关控件ToggleButton/Switch Android 图片控件 ImageView Android 进度条 ProgressBar Android 拖动条 SeekBar Android 评分条 RatingBar Android 滚动条 ScrollView 轮播滚动视图 ViewFlipper
Adapter 相关控件
Android 适配器 Adapter Android 列表控件 ListView Android 网格视图 GridView Android 下拉选择框 Spinner 自动补全文本框 AutoCompleteText 折叠列表 ExpandableListView
提示类控件
吐司提示:Toast 的使用方法 状态栏通知:Notification 对话框:AlertDialog 悬浮窗:PopupWindow
菜单类控件
菜单:Menu
其他控件
视频页面:ViewPager 侧滑菜单:DrawerLayout
事件处理机制
基于监听的事件处理机制 Handler 消息传递机制 触摸事件分发处理 AsyncTask:异步任务 Android 手势处理
Android 四大组件
活动:Activity 服务:Service 广播接收器:Broadcast Receiver 内容提供者 - Content Provider
数据存储
文件存储 SharedPreferences 存储 数据库:SQLite 的使用
网络编程
HTTP 使用详解 xml 数据解析 JSON 数据解析 网页视图:WebView Socket 网络接口
绘图与动画
图片资源:Drawable 位图:Bitmap
多媒体开发
媒体播放器:MediaPlayer 相机:Camera 音频录制:MediaRecorder
并发编程
多线程