android佈局 FrameLayout(幀佈局)詳解

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

android佈局 FrameLayout(幀佈局)詳解

FrameLayout(幀佈局)

前言

前景圖像:

常用屬性:

應用實例:

①最簡單的實例:

②跟隨手指移動的萌妹子

③跑動的萌妹子

延伸閱讀：

Listview與Adapter用法

5種 (UI線程與後臺線程交互設計的方法)

Handler消息創建簡圖

較常用的sql語句

Intent-Filter的匹配規則

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結