FrameLayout (frame layout)

Introduction to this section

FrameLayout (frame layout) can be said to be the simplest layout among the six layouts. This layout directly opens up a blank area on the screen. When we go inside When adding controls, they will be placed in the upper left corner of this area by default. However, this layout method does not have any positioning method, so it is not used in many scenarios; the size of the frame layout is determined by the largest sub-control in the control. Determine, if the sizes of the controls are the same, then only the top component can be seen at the same time! Subsequently added controls will cover the previous one! Although the control will be placed in the upper left corner by default, we can also pass the layout_gravity attribute , designated to other locations! In addition to showing you the simplest example, this section also brings you two interesting examples. If you are interested, you can take a look!

1. Common attributes

There are only two attributes of FrameLayout, but before we talk about it, let’s introduce one thing:

The foreground image: always at the top of the frame layout, directly facing the user’s image, it will not be Overlay pictures.

Two attributes:

##android:foreground:*Set the foreground image of the frame layout container
android:foregroundGravity:Set the position where the foreground image is displayed

2. Example demonstration

1) The simplest example

Running renderings:

The implementation code is as follows:

Code analysis: It’s very simple. The three TextViews are set to different sizes and background colors, covering them in turn. Then the lower right corner is the foreground image. Through android:foreground="@drawable/logo" sets the picture of the foreground image, android:foregroundGravity="right|bottom" sets the position of the foreground image in the lower right corner

2) The cute girl who moves with the finger

The effect is as follows:

Implementation process analysis:

step 1: First set the main.xml layout to a blank FrameLayout, and set a picture background for it
step 2: Create a new MeziView custom component class that inherits the View class, and initialize the initial coordinates of the view in the construction method
step 3: Override the onDraw() method , instantiate an empty brush class Paint
step 4: call BitmapFactory.decodeResource() to generate a bitmap object
step 5: call canvas.drawBitmap() draws the girl’s bitmap object
step 6: Determine whether the image is recycled, otherwise the image is forced to be recycled
step 7 : Obtain the frame layout object in the main Java code and instantiate a MeziView class
#step 8: Add a touch event listener to the instantiated mezi object and override the onTouch method , change the X, Y coordinates of mezi and call the invalidate() redraw method
step 9: Add the mezi object to the frame layout

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="../style/images/back" >
</FrameLayout>

CustomizedMeziView.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 relevant variables, followed by the X, Y coordinates of the girl’s display position
public float bitmapX;
public float bitmapY;
public MeziView(Context context) {
super(context);
//Set the starting coordinates of the girl
bitmapX = 0;
bitmapY = 200;
}

//Rewrite the View class onDraw() method
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//Create and instantiate the Paint object
Paint paint = new Paint();
//Generate a bitmap object based on the picture
Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.s_jump);
//Draw a cute girl
canvas.drawBitmap(bitmap, bitmapX, bitmapY,paint);
// Determine whether the picture is recycled, if not, force the picture to be recycled
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);
        //为我们的萌妹子添加触摸事件监听器
        mezi.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                //设置妹子显示的位置
                mezi.bitmapX = event.getX() - 150;
                mezi.bitmapY = event.getY() - 150;
                //调用重绘方法
                mezi.invalidate();
                return true;
            }
        });
        frame.addView(mezi);
    }
}

Code explanation: See the steps, it is very simple, just customize a View class, override the redraw method, and then add a touch time for it in the Activity and rewrite the onTouch method to obtain the touch time. Click the focus, and you also need -150, otherwise the coordinate is the upper left corner of the custom View, then call the invalidate() redraw method, and finally add it to the frame layout!

Code download:FrameLayoutDemo2.zip

3) Cute girl running

The rendering is as follows:

Implementation process:

#step 1: Define an empty FrameLayout layout and set the position of the foreground image to the center Position
#step 2: Obtain the FrameLayout layout in the Activity, create a new Handler object, override the handlerMessage() method, and call the image-updated method
step 3: Customize a move() method and dynamically set the bitmap displayed by the foreground image through switch
step 4: Create a new timing in the onCreate() method Timer object, override the run method, and send empty information to the 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 {
//Initialize variables, frame layout
FrameLayout frame = null;
//Customize a handler class object for regularly updating the UI interface
Handler handler = new Handler()
{
int i = 0;
           @Override
           public void handleMessage(Message msg)
                                                                                                                                                                                                                                                                         ,,,,,,,,,,, i % 8 );        };

    //定义走路时切换图片的方法
    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)
        {
            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 and send information to the handler regularly.
Send an empty message to notify the system to change the foreground image

# Code analysis:
The code is also very simple. It is to define a handler object to refresh the foreground image of the frame layout, and define a Timer to send timing information every 170 milliseconds, i++; move(i%8); This is because we use 8 pictures as animation materials!

Code download:

FrameLayoutDemo3.zip

Summary of this section

This section introduces FrameLayout (frame layout), mainly mastering the foreground and foregroundGravity attributes Just use it! Frame layout is slightly more used than the previous table layout! If you are interested, you can try writing some small examples like the author!

← TableLayout (table layout)

GridLayout (grid layout) →

submit

FrameLayout (frame layout)

Introduction to this section

1. Common attributes

2) The cute girl who moves with the finger

3) Cute girl running

php.cn