11. 【Android教程】帧布局 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 即可,如下:

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 mybj"
        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 的基本用法。

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。

  • 18
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
这段代码实现了一个简单的 Android 应用程序,用于在屏幕上显示一个小兔子,并且允许用户通过触摸屏幕移动小兔子的位置。下面是代码的详细解释: 1. 导入需要使用的类和包: ```java import android.app.Activity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.widget.FrameLayout; ``` 2. 定义 MainActivity 类,该类继承自 Activity 类: ```java public class MainActivity extends Activity { ``` 3. 实现 onCreate() 方法,在该方法中初始化应用程序: ```java @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); FrameLayout frameLayout = (FrameLayout) findViewById(R.id.mylayout); RabbitView rabbit = new RabbitView(MainActivity.this); rabbit.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { rabbit.bitmapX = event.getX(); rabbit.bitmapY = event.getY(); rabbit.invalidate(); return true; } }); frameLayout.addView(rabbit); } ``` 在该方法中,我们完成了以下操作: - 使用 setContentView() 方法设置布局文件; - 获取布局管理器并实例化一个 RabbitView 对象; - 为 RabbitView 添加触摸事件监听器; - 将 RabbitView 添加到布局管理器中。 4. 实现 RabbitView 类,该类继承自 View 类: ```java public class RabbitView extends View { ``` 5. 在 RabbitView 类中定义了一个 bitmapX 和 bitmapY 变量,它们分别表示小兔子在屏幕上的 X 和 Y 坐标: ```java public float bitmapX; public float bitmapY; ``` 6. 在 RabbitView 类中实现了一个 draw() 方法,该方法用于在屏幕上绘制小兔子: ```java @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.rabbit); canvas.drawBitmap(bitmap, bitmapX, bitmapY, null); bitmap.recycle(); } ``` 在该方法中,我们首先从资源文件中加载小兔子的图片,然后使用 drawBitmap() 方法在屏幕上绘制小兔子。 7. 最后,在 RabbitView 类中实现了一个构造方法,用于初始化小兔子的位置和大小: ```java public RabbitView(Context context) { super(context); bitmapX = 0; bitmapY = 0; } ``` 在该构造方法中,我们将小兔子的 X 和 Y 坐标初始化为 0。 综上所述,这段代码的作用是实现一个简单的 Android 应用程序,用于在屏幕上显示一个小兔子,并且允许用户通过触摸屏幕移动小兔子的位置。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红薯不甜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值