11 帧布局——FrameLayout

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。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容