FrameLayout(幀佈局) -- 講得太好了
阿新 • • 發佈：2019-01-10
轉自： http://www.runoob.com/w3cnote/android-tutorial-framelayout.html
本節引言
FrameLayout(幀佈局)可以說是六大布局中最為簡單的一個佈局,這個佈局直接在螢幕上開闢出一塊空白的區域,當我們往裡面新增控制元件的時候,會預設把他們放到這塊區域的左上角,而這種佈局方式卻沒有任何的定位方式,所以它應用的場景並不多;幀佈局的大小由控制元件中最大的子控制元件決定,如果控制元件的大小一樣大的話,那麼同一時刻就只能看到最上面的那個元件!後續新增的控制元件會覆蓋前一個!雖然預設會將控制元件放置在左上角,但是我們也可以通過layout_gravity屬性,指定到其他的位置!本節除了給大家演示一個最簡單的例子外,還給大家帶了兩個好玩的例子,有興趣的可以看看!
1.常用屬性
FrameLayout的屬性很少就兩個,但是在說之前我們先介紹一個東西:
前景影象:永遠處於幀佈局最上面,直接面對使用者的影象,就是不會被覆蓋的圖片。
兩個屬性:
- android:foreground:*設定改幀佈局容器的前景影象
- android:foregroundGravity:設定前景影象顯示的位置
2.例項演示
1)最簡單的例子
執行效果圖：
實現程式碼如下：
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/FrameLayout1"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:foreground="@drawable/logo"android:foregroundGravity="right|bottom"><TextViewandroid:layout_width="200dp"android:layout_height="200dp"android:background="#FF6143"/><TextViewandroid:layout_width="150dp"android:layout_height="150dp"android:background="#7BFE00"/><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:background="#FFFF00"/></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
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/mylayout"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"android:background="@drawable/back"></FrameLayout>
自定義的MeziView.java
package com.jay.example.framelayoutdemo2;import android.content.Context;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Paint;import android.view.View;publicclassMeziViewextendsView{//定義相關變數,依次是妹子顯示位置的X,Y座標 publicfloat bitmapX;publicfloat bitmapY;publicMeziView(Context context){super(context);//設定妹子的起始座標 bitmapX =0; bitmapY =200;}//重寫View類的onDraw()方法 @Overrideprotectedvoid onDraw(Canvas canvas){super.onDraw(canvas);//建立,並且例項化Paint的物件 Paint paint =newPaint();//根據圖片生成點陣圖物件 Bitmap bitmap =BitmapFactory.decodeResource(this.getResources(), R.drawable.s_jump);//繪製萌妹子 canvas.drawBitmap(bitmap, bitmapX, bitmapY,paint);//判斷圖片是否回收,木有回收的話強制收回圖片 if(bitmap.isRecycled()){ bitmap.recycle();}}}
MainActivity.java:
package com.jay.example.framelayoutdemo2;import android.os.Bundle;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;import android.widget.FrameLayout;import android.app.Activity;publicclassMainActivityextendsActivity{@Overrideprotectedvoid onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);FrameLayout frame =(FrameLayout) findViewById(R.id.mylayout);finalMeziView mezi =newMeziView(MainActivity.this);//為我們的萌妹子新增觸控事件監聽器 mezi.setOnTouchListener(newOnTouchListener(){@Overridepublicboolean onTouch(View view,MotionEventevent){//設定妹子顯示的位置 mezi.bitmapX =event.getX()-150; mezi.bitmapY =event.getY()-150;//呼叫重繪方法 mezi.invalidate();returntrue;}}); frame.addView(mezi);}}
程式碼解釋: 見步驟,很簡單,就是自定義一個View類,重寫重繪方法,接著在Activity中為他新增一個觸控時間在觸控時間中重寫onTouch方法獲取點選焦點,另外還需要-150,不然那個座標是自定義View的左上角,接著呼叫invalidate( )重繪方法,最後新增到幀佈局中而已!
3)跑動的萌妹子
效果圖如下：
實現流程:
- step 1:定義一個空的FrameLayout佈局,將前景影象的位置設定為中央位置
- step 2:在Activity中獲取到該FrameLayout佈局,新建一個Handler物件,重寫handlerMessage()方法,呼叫影象- 更新的方法
- step 3:自定義一個move()方法,通過switch動態設定前景圖片顯示的點陣圖
- step 4:在onCreate()方法中新建一個計時器物件Timer,重寫run方法,每隔170毫秒向handler傳送空資訊
實現程式碼如下:
佈局檔案:main_activity.xml:
<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/myframe"android:layout_width="wrap_content"android:layout_height="wrap_content"android:foregroundGravity="center"></FrameLayout>
MainActivity.java:
package com.jay.example.framelayoutdemo3;import java.util.Timer;import java.util.TimerTask;import android.os.Bundle;import android.os.Handler;import android.os.Message;import android.view.View;import android.view.View.OnClickListener;import android.widget.FrameLayout;import android.app.Activity;import android.graphics.drawable.Drawable;publicclassMainActivityextendsActivity{//初始化變數,幀佈局 FrameLayout frame =null;//自定義一個用於定時更新UI介面的handler類物件 Handler handler =newHandler(){int i =0;@Overridepublicvoid handleMessage(Message msg){//判斷資訊是否為本應用發出的 if(msg.what ==0x123){ i++; move(i %8);}super.handleMessage(msg);}};//定義走路時切換圖片的方法 void move(int i){Drawable a = getResources().getDrawable(R.drawable.s_1);Drawable b = getResources().getDrawable(R.drawable.s_2);Drawable c = getResources().getDrawable(R.drawable.s_3);Drawable d = getResources().getDrawable(R.drawable.s_4);Drawable e = getResources().getDrawable(R.drawable.s_5);Drawable f = getResources().getDrawable(R.drawable.s_6);Drawable g = getResources().getDrawable(R.drawable.s_7);Drawable h = getResources().getDrawable(R.drawable.s_8);//通過setForeground來設定前景影象 switch(i){case0: frame.setForeground(a);break;case1: frame.setForeground(b);break;case2: frame.setForeground(c);break;case3: frame.setForeground(d);break;case4: frame.setForeground(e);break;case5: frame.setForeground(f);break;case6: frame.setForeground(g);break