Example FrameLayout Android

Introduction to this FrameLayout Android
FrameLayout can be said to be the simplest layout among the six layouts. This layout directly creates a blank area on the screen. When we add controls to it, they will be placed in this area by default. In the upper left corner, this layout method does not have any positioning method, so it does not apply much scenes; the size of the frame layout is determined by the largest child control in the control. If the size of the control is the same, then only the same time You can see the top component! The subsequent added controls will overwrite the previous one! Although the control will be placed in the upper left corner by default, we can also assign it to other locations through the layout_gravity property! In addition to the simple example, I also brought you two fun examples. If you are interested, you can check it out!
1. Common attributes
The properties of FrameLayout are rarely two, but we will introduce one thing before we say it:
Foreground image: Always at the top of the frame layout, directly facing the user's image, is the image that will not be overwritten.
Two attributes:

Android:foreground:* sets the foreground image of the frame change layout container
Android:foregroundGravity: set the position of the foreground image display

2. Example demonstration
1) The simplest example
Running renderings:

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: Very simple, three TextViews set different sizes and background colors, then overlay, then the foreground image in the lower right corner, set the foreground image by android:foreground="@drawable/logo", android:foregroundGravity="right |bottom" sets the position of the foreground image in the lower right corner
2) Cute girl moving with the finger
The effect chart is as follows

Implement process analysis:

Step 1: First set the main.xml layout to a blank FrameLayout, 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 constructor.
Step 3: Rewrite the onDraw() method to instantiate an empty brush class Paint
Step 4: Call BitmapFactory.decodeResource() to generate a bitmap object
Step 5: Call canvas.drawBitmap() to draw the bitmap object of the sister
Step 6: Determine whether the image is recycled, otherwise force the image to be recycled.
Step 7: Get the frame layout object in the main Java code and instantiate a MeziView class
Step 8: The instantiated mezi object adds a touch event listener, overrides the onTouch method, changes the X, Y coordinates of mezi, and calls 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="@drawable/back" >   
</FrameLayout>    

create class a MeziView.java

public class MeziView extends View { 
    public float bitmapX; 
    public float bitmapY; 
    public MeziView(Context context) { 
        super(context); 
        bitmapX = 0; 
        bitmapY = 200; 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
        super.onDraw(canvas); 
        Paint paint = new Paint();
        Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.s_jump);
        canvas.drawBitmap(bitmap, bitmapX, bitmapY,paint); 
        if(bitmap.isRecycled()) 
        { 
            bitmap.recycle(); 
        } 
    }
}  

MainActivity.java:

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, very simple, is to customize a View class, override the redraw method, then add a touch time for him in the Activity to rewrite the onTouch method in the touch time to get the click focus, in addition to -150, Otherwise the coordinates are the top left corner of the custom View, then call the invalidate() redraw method, and finally add it to the frame layout!
3) Running sister
The effect chart is as follows:

Implementation process:

Step 1: define an empty FrameLayout android, set the position of the foreground image to the center 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, dynamically set the bitmap of the foreground image display through the switch
Step 4: Create a timer object Timer in the onCreate() method, override the run method, and send null 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:

public class MainActivity extends Activity {   
    FrameLayout frame = null;   
        Handler handler = new Handler()   
        {   
            int i = 0;   
            @Override   
            public void 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); 
        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);     
        new Timer().schedule(new TimerTask() {   
               
            @Override   
            public void run() {     
                handler.sendEmptyMessage(0x123);   
            }   
        }, 0,170);   
    }   
}