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详解
08-29
帧布局（FrameLayout）是Android布局管理器的一种，它的设计思想简单直观，主要用于展示单个或少量的组件，尤其适用于需要元素叠加的情况。在FrameLayout中，所有的子视图（如TextView、ImageView等）默认都会放置在...
Android 的 FrameLayout (帧布局)
leyang0910的博客
06-01 3938
FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式却没有任何的定位方式,所以它应用的场景并不多;见步骤,很简单,就是自定义一个View类,重写重绘方法,接着在Activity中为他添加一个触摸时间在触摸时间中重写onTouch方法获取点击焦点,另外还需要-150,不然那个坐标是自定义View的左上角,接着调用invalidate( )重绘方法,最后添加到帧布局中而已!
【Android从零单排系列三十三】《Android布局介绍——FrameLayout》
再见孙悟空的专栏
06-30 2804
小伙伴们，在上文中我们介绍了Android布局AbsoluteLayout，本文我们继续盘点介绍Android开发中另一个常见的布局，帧布局FrameLayout。FrameLayout是Android中的一种布局容器，它允许在单个视图组中重叠放置子视图。FrameLayout会将所有子视图堆叠在同一个位置上，后添加的子视图会覆盖先前添加的子视图。总结来说，FrameLayout是一种简单且灵活的布局容器，适用于在单个位置上重叠显示不同的子视图。
Android 中 FrameLayout 布局及属性的使用详解
最新发布
chinaherolts2008的博客
07-25 63
到此这篇关于Android 中 FrameLayout 布局及属性的使用详解的文章就介绍到这了,更多相关Android FrameLayout 布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持。这篇文章主要介绍了Android 中 FrameLayout 布局及属性的使用,FrameLayout 在实现简单布局时非常方便,特别适用于叠加式布局,如显示叠加的图层或浮动按钮等,需要的朋友可以参考下。这个属性用于设置子视图在 FrameLayout 中的对齐方式。
Android常用布局总结之（FrameLayout、ConstraintLayout）
不积跬步无以至千里，不积小流无以成江海。一个喜欢学习分享的程序员
12-22 5281
一、FrameLayout 帧布局： 这种布局类似叠加的图片，没有任何的定位方式，当我们往里面添加组件的时候，会默认把他们放到容器的左上角。 上面的组件显示在底层，下面的组件显示在上层 二、ConstraintLayout 约束布局： 从 Android Studio 2.3 起，官方的模板默认使用 ConstraintLayout，它的出现主要是为了解决布局嵌套过多的问题，以灵活的方式定位和调整小部件，能够更好地适配屏幕大小不同的机型。
【Android容器组件—FrameLayout】
m0_56233309的博客
03-15 5929
帧布局（FrameLayout）用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层 所有控件都默认显示在屏幕左上角。
android布局------FrameLayout(帧布局)详解
大爱无疆的博客
10-16 2873
FrameLayout(帧布局) 前言 作为android六大布局中最为简单的布局之一,该布局直接在屏幕上开辟出了一块空白区域, 当我们往里面添加组件的时候,所有的组件都会放置于这块区域的左上角; 帧布局的大小由子控件中最大的子控件决定, 如果都组件都一样大的话,同一时刻就只能能看到最上面的那个组件了！ 当然我们也可以为组件添加layout_gravity属性,从而制定组件的对
Android常用布局（FrameLayout、LinearLayout、RelativeLayout）详解
09-02
本篇文章将详细介绍Android三种基本布局：FrameLayout、LinearLayout和RelativeLayout。 1. **FrameLayout** FrameLayout是最基础的布局，它的特点是所有子视图（View）都会按照从上到下、从左到右的顺序重叠在...
Android 五大布局方式详解
09-01
2. 帧布局(FrameLayout) 帧布局允许组件从屏幕左上角开始布局，后面的组件会覆盖前面的组件。在帧布局中，通常最后一个添加的组件会位于最上方。帧布局没有特定的布局属性，组件的位置完全取决于它们添加的顺序。 3...
（八）Android布局类型（帧布局FrameLayout）
以秘
03-18 822
Android布局类型（帧布局FrameLayout）
Android 基础知识4-2.9 FrameLayout（帧布局）详解
yyxhzdm的博客
02-19 1449
又称作帧布局，它相比于和要简单很多，因为它的应用场景也少了很多。这种布局没有方便的定位方式，所有的控件都会默认摆放在布局的左上角。示例1代码：
Android动态布局framelayout
cf8833的博客
05-10 1312
功能说明 最近碰到一个需求，要求在网页端拖控件，动态配置app控件的模块，大小和位置，显示不同的功能，然后在app大屏展示。 技术难点： 1.动态控件位置和大小难调，会出现布局混乱，位置错乱等问题 2.动态控件样式多样，有相册，有新闻列表，有个人信息展示，有轮播图等等，解决方案就是用cardview嵌入frame layout，引入fragment，独立布局 代码说明： step1:引入依赖，用gson进行json解析~\app\build.gradle step2:清单文件，用于新增application
Android应用开发之FrameLayout(帧布局)
u012739527的博客
03-29 4190
帧布局介绍
Android开发之FrameLayout
ShadyPi的IT笔记
03-14 3821
FrameLayout帧布局
Android Studio开发学习（六）———TableLayout(表格布局)、FrameLayout(帧布局)
m0_73391179的博客
04-07 2733
前面已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,小编在实际开发中用得比较多的也是这两个,虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢!你说是吧,学多点东西没什么的,又不吃亏！TableLayout(表格布局)一
Android自定义控件
weixin_44911775的博客
01-27 1502
自定义布局加一个条栏 代码如下 <?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"> <View android:id="
Android开发中自定义View设定到FrameLayout布局中实现多组件显示
Cocos2d-x,Android,IOS,游戏，HTML5开发/交流/学习/资源 沈大海
12-25 4146
在Android开发中，如果我们想自定义View视图组件，并实现在FrameLayout布局中多个组件的同时显示呢？ 举例来说想在自定义的View上面显示Button 等View组件需要完成如下任务1.在自定义View的类中覆盖父类的构造(注意是2个参数的)public class MyView2 extends View{  public MyView2(Context
Android基础入门教程——2.2.4 FrameLayout(帧布局)
不知
11-05 516
本节引言： FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出  一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式  却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件  的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!后续添加的控件会覆盖前
Android五大布局：FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout和TableLayout
一个IT人的技术成长历程。
11-07 1734
AndroidSDK 定义了多种布局方式以方便用户设计 UI。各种布局方式均为 ViewGroup 类的子类，结构如图 1 所示。本节将对 FrameLayout（单帧布局）、LinearLayout（线性布局）、AbsoluteLayout（绝对布局）、RelativeLayout（相对布局）和TableLayout（表格布局）进行简单的介绍。
Android开发：FrameLayout帧布局详解与示例
"Android开发课程资料，讲解了FrameLayout帧布局的使用，以及Android开发的基础知识，包括平台概述、开发环境搭建、布局管理器、UI组件、事件处理、Intent、高级组件、对话框、SQLite数据库操作和应用发布等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值