2.2.4 FrameLayout (Frame Layout)
Category Android Basic Tutorial
Introduction to This Section
FrameLayout (Frame Layout) can be considered the simplest of the six major layouts. This layout simply creates an empty area on the screen. When we add controls to it, they are, by default, placed at the top-left corner of this area. However, this layout does not have any positioning methods, so its applications are limited. The size of the FrameLayout is determined by the largest child control within it. If the sizes of the controls are the same, then only the topmost component can be seen at any given time! Subsequently added controls will cover the previous ones! Although the controls are placed at the top-left corner by default, we can also specify other positions through the layout_gravity attribute! In addition to demonstrating a simple example, this section also brings two interesting examples for those who are interested!
1. Common Attributes
There are only two attributes for FrameLayout, but before we discuss them, let's introduce one thing:
Foreground Image: The image that is always on top of the FrameLayout, facing the user, is the image that will not be covered.
Two attributes:
android:foreground: Sets the foreground image of this FrameLayout container.
android:foregroundGravity: Sets the position where the foreground image is displayed.
2. Example Demonstration
1) The Simplest Example
Running effect picture:
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 Analysis: It's very simple, three TextViews set different sizes and background colors, covering each other in sequence, followed by the foreground image in the lower right corner. The foreground image is set by android:foreground="@drawable/logo" to set the foreground image, android:foregroundGravity="right|bottom" to set the position of the foreground image in the lower right corner.
2) The Cute Girl Moving with Finger Touch
Effect picture as follows:
Implementation process analysis:
step 1: First, set the main.xml layout to an empty FrameLayout and set a picture background for it.
step 2: Create a custom component class MeziView that inherits from the View class, and initialize the initial coordinates of the view in the constructor.
step 3: Override the onDraw() method and instantiate an empty brush 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: Check if the picture is recycled, if not, force the picture to be recycled.
step 7: In the main Java code, get the FrameLayout object and instantiate a MeziView class.
step 8: Add a touch event listener to the instantiated Mezi object, override the onTouch method, change the X, Y coordinates of Mezi, and call the redraw method invalidate().
step 9: Add the Mezi object to the FrameLayout.
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>
Custom 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;
public class MeziView extends View {
//Define related variables, in order, the
Step 4: In the onCreate() method, create a new Timer object, override the run method, and send an empty message to the handler every 170 milliseconds.
**Implementation Code is as follows:**
**Layout file: main_activity.xml:**
```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 {
// Initialize variables, frame layout
FrameLayout frame = null;
// Define a custom handler object for periodically updating the UI interface
Handler handler = new Handler()
{
int i = 0;
@Override
public void handleMessage(Message msg) {
// Determine if the message is sent by this application
if(msg.what == 0x123)
{
i++;
move(i % 8 );
}
super.handleMessage(msg);
}
};
// Define a method to switch images 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);
// Set the foreground image through setForeground
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);
// Define a timer object to send periodic messages to the 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 Analysis: The code is quite simple, defining a handler object to refresh the foreground image of the frame layout, defining a Timer to send timed messages every 170 milliseconds, i++;move(i%8); because we use 8 images as the animation material!
Code Download: FrameLayoutDemo3.zip
Summary of This Section
This section introduced FrameLayout, mainly mastering the use of the foreground and foregroundGravity properties! Frame layout is used a bit more than the previous table layout! If you are interested, you can try writing some small examples like the author!
[1.2.2 Developing Android APPs with Android Studio
2.5.4 AutoCompleteTextView (Auto-Complete Text Box) Basic Usage
2.5.8 Notification (Status Bar Notification) Detailed Explanation
3.6 Responding to System Setting Events (Configuration Class)
[4.2.1 Service
8.3.4 Paint API - Detailed Explanation of Xfermode and PorterDuff (Part One)
8.3.5 Paint API - Detailed Explanation of Xfermode and PorterDuff (Part Two)
8.3.6 Paint API - Detailed Explanation of Xfermode and PorterDuff (Part Three)
8.3.7 Paint API - Detailed Explanation of Xfermode and PorterDuff (Part Four)
8.3.8 Paint API - Detailed Explanation of Xfermode and PorterDuff (Part Five)
8.3.14 Paint Several Enum/Constant Values and ShadowLayer Shadow Effects
8.3.17 Detailed Explanation of Canvas API (Part 2) - A Collection of Clipping Methods
8.3.18 Detailed Explanation of Canvas API (Part 3) - Matrix and drawBitmapMesh
8.4.3 Android Animation Collection - Property Animation - First Encounter
8.4.4 Android Animation Collection - Property Animation - Revisited
[10.2