android布局 FrameLayout(帧布局)详解

最新推荐文章于 2024-07-25 16:37:52 发布
最新推荐文章于 2024-07-25 16:37:52 发布
阅读量3.3k 收藏
点赞数 3

  • FrameLayout(帧布局)

    前言

    作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域,

    当我们往里面添加组件的时候,所有的组件都会放置于这块区域的左上角;

    帧布局的大小由子控件中最大的子控件决定,

    如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了！

    当然我们也可以为组件添加layout_gravity属性,从而制定组件的对其方式

    帧布局在游戏开发方面用的比较多,等下后面会给大家演示一下比较有意思的两个实例

    前景图像:

    永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片

    常用属性:

    android:foreground:设置该帧布局容器的前景图像

    android:foregroundGravity:设置前景图像显示的位置

    应用实例:

    ①最简单的实例:

    属性很简单,接着演示下FrameLayout的基本用法

    真的很简单,网上大部分的例子都是这个= =,

    效果图:

    代码如下:

     

    view source print ?
    01. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    02. xmlns:tools="http://schemas.android.com/tools"
    03. android:id="@+id/FrameLayout1"
    04. android:layout_width="match_parent"
    05. android:layout_height="match_parent"
    06. tools:context=".MainActivity"
    07. android:foreground="@drawable/logo"
    08. android:foregroundGravity="right|bottom">
    09.  
    10. <TextView
    11. android:layout_width="200dp"
    12. android:layout_height="200dp"
    13. android:background="#FF6143" />
    14. <TextView
    15. android:layout_width="150dp"
    16. android:layout_height="150dp"
    17. android:background="#7BFE00" />
    18. <TextView
    19. android:layout_width="100dp"
    20. android:layout_height="100dp"
    21. android:background="#FFFF00" />
    22.  
    23. </FrameLayout>


     

    代码解释:

    如图,我们设置了三个图片块,而这些图片块仅仅是三个设置了不同背景颜色的TextView

    TextView都出现在了左上角,为了避免覆盖,大小是依次递减的

    在外层FrameLayout中设置了前景图像显示的图片,以及把它设置到了右下角

    ②跟随手指移动的萌妹子

    效果图:

    实现流程:

    step 1:先将main.xml布局设置为空白的FrameLayout,为其设置一个图片背景

    step 2:新建一个继承View类的MeziView自定义组件类,在构造方法中初始化view的初始坐标

    step 3:重写onDraw()方法,实例化一个空的画笔类Paint

    step 4:调用BitmapFactory.decodeResource()生成位图对象

    step 5:调用canvas.drawBitmap()绘制妹子的位图对象

    step 6:判断图片上是否回收,否则强制回收图片

    step 7:在主Java代码中获取帧布局对象,并且实例化一个MeziView类

    step 8:会实例化的mezi对象添加一个触摸事件的监听器,重写onTouch方法,改变mezi的X,Y坐标，调用invalidate()重绘方法

    step 9: 将mezi对象添加到帧布局中

    详细代码:

    布局代码:

     

    view source print ?
    01. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    02. xmlns:tools="http://schemas.android.com/tools"
    03. android:id="@+id/mylayout"
    04. android:layout_width="match_parent"
    05. android:layout_height="match_parent"
    06. tools:context=".MainActivity"
    07. android:background="@drawable/back" >
    08.  
    09. </FrameLayout>

    自定义的MeziView类

     

     

    view source print ?
    01. package com.jay.example.framelayoutdemo2;
    02.  
    03. import android.content.Context;
    04. import android.graphics.Bitmap;
    05. import android.graphics.BitmapFactory;
    06. import android.graphics.Canvas;
    07. import android.graphics.Paint;
    08. import android.view.View;
    09.  
    10. public class MeziView extends View {
    11. //定义相关变量,依次是妹子显示位置的X,Y坐标
    12. public float bitmapX;
    13. public float bitmapY;
    14.  
    15.  
    16. public MeziView(Context context) {
    17. super(context);
    18. //设置妹子的起始坐标
    19. bitmapX = 0;
    20. bitmapY = 200;
    21. }
    22.  
    23.  
    24. //重写View类的onDraw()方法
    25. @Override
    26. protected void onDraw(Canvas canvas) {
    27. super.onDraw(canvas);
    28. //创建,并且实例化Paint的对象
    29. Paint paint = new Paint();
    30. //根据图片生成位图对象
    31. Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.s_jump);
    32. //绘制萌妹子
    33. canvas.drawBitmap(bitmap, bitmapX, bitmapY,paint);
    34. //判断图片是否回收,木有回收的话强制收回图片
    35. if(bitmap.isRecycled())
    36. {
    37. bitmap.recycle();
    38. }
    39.  
    40. }
    41.  
    42. }

    主Activity类:

     

     

    view source print ?
    01. package com.jay.example.framelayoutdemo2;
    02.  
    03. import android.os.Bundle;
    04. import android.view.MotionEvent;
    05. import android.view.View;
    06. import android.view.View.OnTouchListener;
    07. import android.widget.FrameLayout;
    08. import android.app.Activity;
    09.  
    10.  
    11. public class MainActivity extends Activity {
    12.  
    13. @Override
    14. protected void onCreate(Bundle savedInstanceState) {
    15. super.onCreate(savedInstanceState);
    16. setContentView(R.layout.activity_main);
    17.  
    18. FrameLayout frame = (FrameLayout) findViewById(R.id.mylayout);
    19. final MeziView mezi = new MeziView(MainActivity.this);
    20.  
    21. //为我们的萌妹子添加触摸事件监听器
    22. mezi.setOnTouchListener(new OnTouchListener() {
    23.  
    24. @Override
    25. public boolean onTouch(View view, MotionEvent event) {
    26. //设置妹子显示的位置
    27. mezi.bitmapX = event.getX();
    28. mezi.bitmapY = event.getY();
    29. //调用重绘方法
    30. mezi.invalidate();
    31. return true;
    32. }
    33. });
    34.  
    35. frame.addView(mezi);
    36.  
    37. }
    38. }


     

    代码解释:

    步骤写的很详细,代码也不难,自己看看吧

    就是自定义了一个View类,然后重写了一下重绘方法,接着在主Activity中为它添加了一个触摸事件

    在触摸事件中重写onTouch方法获得点击坐标,调用invalidate()重绘方法;

    最后添加到帧布局中而已

    代码链接:

    http://pan.baidu.com/s/1pJJfKgz

    ③跑动的萌妹子

    效果图:

    实现流程:

    step 1:定义一个空的FrameLayout布局,将前景图像的位置设置为中央位置

    step 2:在Activity中获取到该FrameLayout布局,新建一个Handler对象,重写handlerMessage()方法,调用图像更新的方法

    step 3:自定义一个move()方法,通过switch动态设置前景图片显示的位图

    step 4:在onCreate()方法中新建一个计时器对象Timer,重写run方法,每隔170毫秒向handler发送空信息

    代码如下:

    xml布局代码:

     

    view source print ?
    1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. xmlns:tools="http://schemas.android.com/tools"
    3. android:id="@+id/myframe"
    4. android:layout_width="wrap_content"
    5. android:layout_height="wrap_content"
    6. android:foregroundGravity="center">
    7.  
    8. </FrameLayout>

    MainActivity.java:

     

     

    view source print ?
    001. package com.jay.example.framelayoutdemo3;
    002.  
    003. import java.util.Timer;
    004. import java.util.TimerTask;
    005.  
    006. import android.os.Bundle;
    007. import android.os.Handler;
    008. import android.os.Message;
    009. import android.view.View;
    010. import android.view.View.OnClickListener;
    011. import android.widget.FrameLayout;
    012. import android.app.Activity;
    013. import android.graphics.drawable.Drawable;
    014.  
    015.  
    016. public class MainActivity extends Activity {
    017.  
    018. //初始化变量,帧布局
    019. FrameLayout frame = null;
    020.  
    021.  
    022. //自定义一个用于定时更新UI界面的handler类对象
    023. Handler handler = new Handler()
    024. {
    025. int i = 0;
    026. @Override
    027. public void handleMessage(Message msg) {
    028. //判断信息是否为本应用发出的
    029. if(msg.what == 0x123)
    030. {
    031. i++;
    032. move(i % 8 );
    033.  
    034. }
    035. super.handleMessage(msg);
    036. }
    037. };     
    038.  
    039.  
    040.  
    041.  
    042.  
    043.  
    044. //定义走路时切换图片的方法
    045. void move(int i)
    046. {
    047. Drawable a = getResources().getDrawable(R.drawable.s_1);
    048. Drawable b = getResources().getDrawable(R.drawable.s_2);
    049. Drawable c = getResources().getDrawable(R.drawable.s_3);
    050. Drawable d = getResources().getDrawable(R.drawable.s_4);
    051. Drawable e = getResources().getDrawable(R.drawable.s_5);
    052. Drawable f = getResources().getDrawable(R.drawable.s_6);
    053. Drawable g = getResources().getDrawable(R.drawable.s_7);
    054. Drawable h = getResources().getDrawable(R.drawable.s_8);
    055. //通过setForeground来设置前景图像
    056. switch(i)
    057. {
    058. case 0:
    059. frame.setForeground(a);
    060. break;
    061. case 1:
    062. frame.setForeground(b);
    063. break;
    064. case 2:
    065. frame.setForeground(c);
    066. break;
    067. case 3:
    068. frame.setForeground(d);
    069. break;
    070. case 4:
    071. frame.setForeground(e);
    072. break;
    073. case 5:
    074. frame.setForeground(f);
    075. break;
    076. case 6:
    077. frame.setForeground(g);
    078. break;
    079. case 7:
    080. frame.setForeground(h);
    081. break;
    082. }
    083. }
    084.  
    085.  
    086.  
    087.  
    088. @Override
    089. protected void onCreate(Bundle savedInstanceState) {
    090. super.onCreate(savedInstanceState);
    091. setContentView(R.layout.activity_main);
    092.  
    093. frame = (FrameLayout) findViewById(R.id.myframe);
    094. //定义一个定时器对象,定时发送信息给handler
    095. new Timer().schedule(new TimerTask() {
    096.  
    097. @Override
    098. public void run() {
    099. //发送一条空信息来通知系统改变前景图片
    100. handler.sendEmptyMessage(0x123);
    101. }
    102. }, 0,170);
    103. }
    104.  
    105.  
    106.  
    107. }


     

    代码解释:

    代码也不是很发杂,就是定义一个handler对象来刷新帧布局的前景图像

    用Timer对来定时发送信息

    i++; move(i % 8 ); //这里是因为有8个图片作为动画的素材

    代码链接:

    http://pan.baidu.com/s/1c0vL8PE

     

延伸阅读：

Crystal_Plum9
关注
android中帧布局效果,布局之FrameLayout(帧布局)详解
weixin_36163672的博客
05-26 1884
New UI-布局之FrameLayout(帧布局)详解 ——转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途!本节引言:FrameLayout(帧布局)可以说是六大布局中最为简单的一New UI-布局之FrameLayout(帧布局)详解——转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途!小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以...
Android 基础知识4-2.9 FrameLayout（帧布局）详解
yyxhzdm的博客
02-19 1450
又称作帧布局，它相比于和要简单很多，因为它的应用场景也少了很多。这种布局没有方便的定位方式，所有的控件都会默认摆放在布局的左上角。示例1代码：
Android 中 FrameLayout 布局及属性的使用详解
最新发布
chinaherolts2008的博客
07-25 70
到此这篇关于Android 中 FrameLayout 布局及属性的使用详解的文章就介绍到这了,更多相关Android FrameLayout 布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持。这篇文章主要介绍了Android 中 FrameLayout 布局及属性的使用,FrameLayout 在实现简单布局时非常方便,特别适用于叠加式布局,如显示叠加的图层或浮动按钮等,需要的朋友可以参考下。这个属性用于设置子视图在 FrameLayout 中的对齐方式。
android布局------FrameLayout(帧布局)详解
大爱无疆的博客
10-16 2875
FrameLayout(帧布局) 前言 作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域, 当我们往里面添加组件的时候,所有的组件都会放置于这块区域的左上角; 帧布局的大小由子控件中最大的子控件决定, 如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了！ 当然我们也可以为组件添加layout_gravity属性,从而制定组件的对
Android 的 FrameLayout (帧布局)
leyang0910的博客
06-01 3955
FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;见步骤,很简单,就是自定义一个View类,重写重绘方法,接着在Activity中为他添加一个触摸时间在触摸时间中重写onTouch方法获取点击焦点,另外还需要-150,不然那个坐标是自定义View的左上角,接着调用invalidate( )重绘方法,最后添加到帧布局中而已!
Android FrameLayout布局
weixin_34303897的博客
09-30 96
2019独角兽企业重金招聘Python工程师标准>>> ...
Android应用开发之FrameLayout(帧布局)
u012739527的博客
03-29 4192
帧布局介绍
Android布局之帧布局FrameLayout详解
08-29
帧布局（FrameLayout）是Android布局管理器的一种，它的设计思想简单直观，主要用于展示单个或少量的组件，尤其适用于需要元素叠加的情况。在FrameLayout中，所有的子视图（如TextView、ImageView等）默认都会放置在...
Android常用布局（FrameLayout、LinearLayout、RelativeLayout）详解
01-04
很多开发者一听说Android终端的屏幕尺寸五花八门，屏幕分辨率千奇百怪，就觉得Android开发在屏幕适配方面是必定是一件头疼的事情...这里想来说说布局，在Android SDK刚刚问世的时候，Android提供了AbsoluteLayout，Fra
【Android 布局】FrameLayout(帧布局)
懂得一千零一种,赋予你失败的方法！
06-04 689
文章目录FrameLayout(帧布局)本节引言1.常用属性2.实例演示1)最简单的例子2)随手指移动的图片3)跑动的萌妹子 FrameLayout(帧布局) 本节引言 FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!.
Android 底部导航菜单
weixin_30569033的博客
10-29 127
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="65.32999d...
【Android从零单排系列三十三】《Android布局介绍——FrameLayout》
再见孙悟空的专栏
06-30 2807
小伙伴们，在上文中我们介绍了Android布局AbsoluteLayout，本文我们继续盘点介绍Android开发中另一个常见的布局，帧布局FrameLayout。FrameLayout是Android中的一种布局容器，它允许在单个视图组中重叠放置子视图。FrameLayout会将所有子视图堆叠在同一个位置上，后添加的子视图会覆盖先前添加的子视图。总结来说，FrameLayout是一种简单且灵活的布局容器，适用于在单个位置上重叠显示不同的子视图。
《详解Android四大布局》之FrameLayout布局
潜心修炼2016
01-25 627
FrameLayout布局        FrameLayout 是一种层叠布局，每一个控件都是覆盖上一个控件上，所有的控件都是摆放在布局的左上角，这种布局比较简单，就不多讲了。 代码: xml version="1.0" encoding="utf-8"?>FrameLayout xmlns:android="http://schemas.android.com
Android UI布局之FrameLayout
11-05 4146
一个FrameLayout对象就好比一块屏幕上提前预定好的空白区域，然后可以填充一些元素到里边，比方说一张图片等。需要注意的是，所有的元素都被放置在FrameLayout区域最左边上的区域。而且无法为这些元素指定一个确切的位置。如果一个FrameLayout里边有多个子元素，那么后边的子元素的显示会重叠在前一个元素上。 实例：LayoutDemo 运行效果： 代码清单： 布局文
Android常用布局总结之（FrameLayout、ConstraintLayout）
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
12-22 5286
一、FrameLayout 帧布局： 这种布局类似叠加的图片，没有任何的定位方式，当我们往里面添加组件的时候，会默认把他们放到容器的左上角。 上面的组件显示在底层，下面的组件显示在上层 二、ConstraintLayout 约束布局： 从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件，能够更好地适配屏幕大小不同的机型。
android 自定义 framelayout_无需自定义View，轻松打造流式布局（热搜标签效果）
weixin_39927288的博客
11-27 524
效果前言我们在很多应用的搜索模块都会看到如上样式的热搜词标签，直接点击标签就可以进行搜索。现在已经有一些开源库和自定义 View 可以实现这样的效果,个人觉得那样还是麻烦了一些，下面介绍一下直接使用 FrameLayout 和 TextView 实现的做法。这种流式布局的关键在于每一行末尾控件的换行，需要在平铺控件时计算剩余空间宽度能否容下新控件，如果无法容下新控件则需要进行换行。布局代码。热搜词...
android布局的特点,android布局之frame布局方式
weixin_39779528的博客
05-27 177
android:layout_width="match_parent"android:layout_height="match_parent" >android:layout_width="240dp"android:layout_height="240dp"android:background="#ff0000"android:layout_gravity="center"/>and...
Android Studio开发学习（六）———TableLayout(表格布局)、FrameLayout(帧布局)
m0_73391179的博客
04-07 2868
前面已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,小编在实际开发中用得比较多的也是这两个,虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢!你说是吧,学多点东西没什么的,又不吃亏！TableLayout(表格布局)一
Android开发：FrameLayout帧布局详解与示例
"Android开发课程资料，讲解了FrameLayout帧布局的使用，以及Android开发的基础知识，包括平台概述、开发环境搭建、布局管理器、UI组件、事件处理、Intent、高级组件、对话框、SQLite数据库操作和应用发布等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值