Basic Android tutorial -- 2.2.4 FrameLayout (frame layout) and androidframelayout

Basic Android tutorial -- 2.2.4 FrameLayout (frame layout) and androidframelayout
Basic Android tutorial -- 2.2.4 FrameLayout (frame layout)

Tags (separated by spaces): basic Android tutorial

This section introduces:

FrameLayout (frame layout) is the simplest layout in the six la s, which is directly opened on the screen.
When we add controls to a blank area, they are placed in the upper left corner of the area by default.
There is no positioning method, so there are not many application scenarios. The size of the frame layout is determined by the largest sub-control in the control.
If the size is the same as the size, you can only see the top component at the same time! The control that will be added later will overwrite the previous one!
Although the control is placed in the upper left corner by default, we can also specify other locations through the layout_gravity attribute!
In addition to presenting the simplest example, this section also provides two interesting examples. If you are interested, please take a look!

1. common attributes

FrameLayout has very few attributes, but before we talk about it, we should first introduce one thing:
Foreground image: always at the top of the frame layout, directly facing the user's image, that is, the image that will not be overwritten
Two attributes:
Android: foreground:Set foreground image of the modified frame layout container
Android: foregroundGravity:Set the foreground image display position

2. Example 1) the simplest example

Run:

The implementation code is as follows:

<FrameLayout xmlns: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">        <TextView            android:layout_width="200dp"            android:layout_height="200dp"            android:background="#FF6143" />        <TextView            android:layout_width="150dp"            android:layout_height="150dp"            android:background="#7BFE00" />         <TextView            android:layout_width="100dp"            android:layout_height="100dp"            android:background="#FFFF00" />    </FrameLayout>    

Code parsing:

It is easy to set different sizes and background colors for the three textviews, overwrite them one by one, and then the foreground image in the lower right corner.
Android: foreground = "@ drawable/logo"
Android: foregroundGravity = "right | bottom": Specifies the position of the foreground image in the lower right corner.

2) Cute girl moving with her fingers

As follows:

Implementation Process Analysis:

• Step 1: first set the main. xml layout to a blank FrameLayout and set an image background for it.
• Step 2: Create a MeziView custom component class that inherits the View class and initialize the initial coordinates of the view in the constructor.
• Step 3: override the onDraw () method and instantiate an empty Paint class Paint
• Step 4: Call BitmapFactory. decodeResource () to generate a bitmap object
• Step 5: Call canvas. drawBitmap () to draw the girl's bitmap object
• Step 6: Determine whether the image is recycled. Otherwise, the image is forcibly recycled.
• Step 7: Get the frame layout object in the main Java code and instantiate a MeziView class
• Step 8: Add a listener for the touch event to the instantiated mezi object, override the onTouch method, change the X and Y coordinates of mezi, and call the invalidate () re-painting method.
• Step 9: add the mezi object to the frame Layout

The implementation code is as follows:
Layout code:Main_activity.xml

<FrameLayout xmlns: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>    

CustomMeziView. 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; public class MeziView extends View {// defines the relevant variables, which are the X and Y coordinates of the sister's position in sequence: public float bitmapX; public float bitmapY; public MeziView (Context context) {super (context); // set the starting coordinate of the sister, bitmapX = 0; bitmapY = 200;} // rewrite the onDraw () of the View class () method @ Override protected void onDraw (Canvas canvas) {super. onDraw (canvas); // create and instantiate the Paint object. The Paint paint = new Paint (); // Bitmap object bitmap = BitmapFactory is generated based on the image. decodeResource (this. getResources (), R. drawable. s_jump); // draw the canvas of the cute girl. drawBitmap (bitmap, bitmapX, bitmapY, paint); // determines whether the image is recycled. if the wood is recycled, the image is forcibly withdrawn 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; public class MainActivity extends Activity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); FrameLayout frame = (FrameLayout) findViewById (R. id. mylayout); final MeziView mezi = new MeziView (MainActivity. this); // Add the touch event listener mezi for our cute girl. setOnTouchListener (new OnTouchListener () {@ Override public boolean onTouch (View view, MotionEvent event) {// set the mezi position displayed by the sister. bitmapX = event. getX ()-150; mezi. bitmapY = event. getY ()-150; // call the re-painting method mezi. invalidate (); return true ;}}); frame. addView (mezi );}}

Code explanation:
See the steps. It is very easy to define a View class, override the repainting method, and then add a touch time for him in the Activity.
In the touch time, rewrite the onTouch method to obtain the click focus. In addition, you also need-150. Otherwise, the coordinate is the custom View.
In the upper left corner, call the invalidate () method and add it to the frame layout!
Code download: http://pan.baidu.com/s/1pJJfKgz

3) Running cute girl

As follows:

Implementation process:

• Step 1: Define an empty FrameLayout layout and set the foreground image position to the central position.
• Step 2: Get the FrameLayout layout in the Activity, create a new Handler object, override the handlerMessage () method, and call the image-update method.
• Step 3: Customize a move () method to dynamically set the foreground Image Display bitmap through the switch
• Step 4: Create a Timer object Timer In the onCreate () method, override the run method, and send an empty message to handler every 170 milliseconds.

The implementation code is as follows:

Layout file: main_activity.xml:

<FrameLayout xmlns: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; public class MainActivity extends Activity {// initialization variable, frame layout FrameLayout frame = null; // customize a handler Class Object Handler handler = new Handler () {int I = 0; @ Override public void handleMessage (Message msg) used to regularly update the UI Interface) {// determine whether the information is the if (msg. what = 0x123) {I ++; move (I % 8);} super. handleMessage (msg) ;}}; // defines the way to switch the image when walking 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); // use setForeground to set the foreground image switch (I) {case 0: frame. setForeground (a); break; case 1: frame. setForeground (B); break; case 2: frame. setForeground (c); break; case 3: frame. setForeground (d); break; case 4: frame. setForeground (e); break; case 5: frame. setForeground (f); break; case 6: frame. setForeground (g); break; case 7: frame. setForeground (h); break ;}@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); frame = (FrameLayout) findViewById (R. id. myframe); // defines a Timer object and regularly sends information to handler new Timer (). schedule (new TimerTask () {@ Override public void run () {// send an empty message to notify the system to change the foreground image handler. sendEmptyMessage (0x123) ;}, 0,170 );}}

Code parsing:
The Code is also very simple, that is, defining a handler object to refresh the foreground image of the frame layout and defining a Timer
Send the scheduled message every 170 milliseconds, I ++; move (I % 8); this is because we use 8 images as the animation material!
Code download: http://pan.baidu.com/s/1c0vL8PE

Summary:

This section describes FrameLayout (frame layout). You can use the foreground and foregroundGravity attributes!
The frame layout is a little more than the previous table layout! If you are interested, try writing a small example like the author!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.