[关闭]
@coder-pig 2015-07-02T07:38:57.000000Z 字数 6157 阅读 1350

Android基础入门教程——2.2.4 FrameLayout(帧布局)

Android基础入门教程


本节引言:

FrameLayout(帧布局)可以说是六大布局中最为简单的一个布局,这个布局直接在屏幕上开辟出
一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角,而这种布局方式
却没有任何的定位方式,所以它应用的场景并不多;帧布局的大小由控件中最大的子控件决定,如果控件
的大小一样大的话,那么同一时刻就只能看到最上面的那个组件!后续添加的控件会覆盖前一个!
虽然默认会将控件放置在左上角,但是我们也可以通过layout_gravity属性,指定到其他的位置!
本节除了给大家演示一个最简单的例子外,还给大家带了两个好玩的例子,有兴趣的可以看看!


1.常用属性

FrameLayout的属性很少就两个,但是在说之前我们先介绍一个东西:
前景图像:永远处于帧布局最上面,直接面对用户的图像,就是不会被覆盖的图片
两个属性:
android:foreground:设置改帧布局容器的前景图像
android:foregroundGravity:设置前景图像显示的位置


2.实例演示


1)最简单的例子

运行效果图:

实现代码如下:

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/FrameLayout1"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. tools:context=".MainActivity"
  7. android:foreground="@drawable/logo"
  8. android:foregroundGravity="right|bottom">
  9. <TextView
  10. android:layout_width="200dp"
  11. android:layout_height="200dp"
  12. android:background="#FF6143" />
  13. <TextView
  14. android:layout_width="150dp"
  15. android:layout_height="150dp"
  16. android:background="#7BFE00" />
  17. <TextView
  18. android:layout_width="100dp"
  19. android:layout_height="100dp"
  20. android:background="#FFFF00" />
  21. </FrameLayout>

代码解析:

很简单,三个TextView设置不同大小与背景色,依次覆盖,接着右下角的是前景图像,通过
android:foreground="@drawable/logo"设置前景图像的图片
android:foregroundGravity="right|bottom"设置前景图像的位置在右下角


2)随手指移动的萌妹子

效果图如下:

实现流程解析:

  • 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对象添加到帧布局中

实现代码如下:
布局代码:main_activity.xml

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/mylayout"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. tools:context=".MainActivity"
  7. android:background="@drawable/back" >
  8. </FrameLayout>

自定义的MeziView.java

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

MainActivity.java:

  1. package com.jay.example.framelayoutdemo2;
  2. import android.os.Bundle;
  3. import android.view.MotionEvent;
  4. import android.view.View;
  5. import android.view.View.OnTouchListener;
  6. import android.widget.FrameLayout;
  7. import android.app.Activity;
  8. public class MainActivity extends Activity {
  9. @Override
  10. protected void onCreate(Bundle savedInstanceState) {
  11. super.onCreate(savedInstanceState);
  12. setContentView(R.layout.activity_main);
  13. FrameLayout frame = (FrameLayout) findViewById(R.id.mylayout);
  14. final MeziView mezi = new MeziView(MainActivity.this);
  15. //为我们的萌妹子添加触摸事件监听器
  16. mezi.setOnTouchListener(new OnTouchListener() {
  17. @Override
  18. public boolean onTouch(View view, MotionEvent event) {
  19. //设置妹子显示的位置
  20. mezi.bitmapX = event.getX() - 150;
  21. mezi.bitmapY = event.getY() - 150;
  22. //调用重绘方法
  23. mezi.invalidate();
  24. return true;
  25. }
  26. });
  27. frame.addView(mezi);
  28. }
  29. }

代码解释:
见步骤,很简单,就是自定义一个View类,重写重绘方法,接着在Activity中为他添加一个触摸时间
在触摸时间中重写onTouch方法获取点击焦点,另外还需要-150,不然那个坐标是自定义View的
左上角,接着调用invalidate( )重绘方法,最后添加到帧布局中而已!
代码下载:http://pan.baidu.com/s/1pJJfKgz


3)跑动的萌妹子

效果图如下:

实现流程:

  • step 1:定义一个空的FrameLayout布局,将前景图像的位置设置为中央位置
  • step 2:在Activity中获取到该FrameLayout布局,新建一个Handler对象,重写handlerMessage()方法,调用图像- 更新的方法
  • step 3:自定义一个move()方法,通过switch动态设置前景图片显示的位图
  • step 4:在onCreate()方法中新建一个计时器对象Timer,重写run方法,每隔170毫秒向handler发送空信息

实现代码如下:

布局文件:main_activity.xml:

  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. </FrameLayout>

MainActivity.java:

  1. package com.jay.example.framelayoutdemo3;
  2. import java.util.Timer;
  3. import java.util.TimerTask;
  4. import android.os.Bundle;
  5. import android.os.Handler;
  6. import android.os.Message;
  7. import android.view.View;
  8. import android.view.View.OnClickListener;
  9. import android.widget.FrameLayout;
  10. import android.app.Activity;
  11. import android.graphics.drawable.Drawable;
  12. public class MainActivity extends Activity {
  13. //初始化变量,帧布局
  14. FrameLayout frame = null;
  15. //自定义一个用于定时更新UI界面的handler类对象
  16. Handler handler = new Handler()
  17. {
  18. int i = 0;
  19. @Override
  20. public void handleMessage(Message msg) {
  21. //判断信息是否为本应用发出的
  22. if(msg.what == 0x123)
  23. {
  24. i++;
  25. move(i % 8 );
  26. }
  27. super.handleMessage(msg);
  28. }
  29. };
  30. //定义走路时切换图片的方法
  31. void move(int i)
  32. {
  33. Drawable a = getResources().getDrawable(R.drawable.s_1);
  34. Drawable b = getResources().getDrawable(R.drawable.s_2);
  35. Drawable c = getResources().getDrawable(R.drawable.s_3);
  36. Drawable d = getResources().getDrawable(R.drawable.s_4);
  37. Drawable e = getResources().getDrawable(R.drawable.s_5);
  38. Drawable f = getResources().getDrawable(R.drawable.s_6);
  39. Drawable g = getResources().getDrawable(R.drawable.s_7);
  40. Drawable h = getResources().getDrawable(R.drawable.s_8);
  41. //通过setForeground来设置前景图像
  42. switch(i)
  43. {
  44. case 0:
  45. frame.setForeground(a);
  46. break;
  47. case 1:
  48. frame.setForeground(b);
  49. break;
  50. case 2:
  51. frame.setForeground(c);
  52. break;
  53. case 3:
  54. frame.setForeground(d);
  55. break;
  56. case 4:
  57. frame.setForeground(e);
  58. break;
  59. case 5:
  60. frame.setForeground(f);
  61. break;
  62. case 6:
  63. frame.setForeground(g);
  64. break;
  65. case 7:
  66. frame.setForeground(h);
  67. break;
  68. }
  69. }
  70. @Override
  71. protected void onCreate(Bundle savedInstanceState) {
  72. super.onCreate(savedInstanceState);
  73. setContentView(R.layout.activity_main);
  74. frame = (FrameLayout) findViewById(R.id.myframe);
  75. //定义一个定时器对象,定时发送信息给handler
  76. new Timer().schedule(new TimerTask() {
  77. @Override
  78. public void run() {
  79. //发送一条空信息来通知系统改变前景图片
  80. handler.sendEmptyMessage(0x123);
  81. }
  82. }, 0,170);
  83. }
  84. }

代码解析:
代码也很简单,就是定义一个handler对象来刷新帧布局的前景图像,定义一个Timer定时器
每隔170毫秒发送定时信息,i++;move(i%8);这里是因为我们使用8个图片作为动画素材!
代码下载:http://pan.baidu.com/s/1c0vL8PE


本节小结:

本节介绍了下FrameLayout(帧布局),主要掌握foreground和foregroundGravity属性的使用即可!
帧布局比前面的表格布局用得稍微多一点!有兴趣可以像笔者这样写点小例子试试!

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注