Thursday, March 12, 2020

Android FrameLayout Example

FrameLayout can be said to be the simplest of the six layouts. This layout directly opens a blank area on the screen. When we add controls to it, they will be placed in this area by default. The upper left corner, but 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 child control in the control. If the size of the control is the same, then only the same size You can see the top component! The controls added later will overwrite the previous one! Although the controls will be placed in the upper left corner by default, we can also specify other locations through the layout_gravity property! This section will show you the most In addition to the simple example, I also brought two fun examples to everyone, who are interested can check it out!

1. Common attributes

FrameLayout's properties are rarely two, but before we say one thing:
Foreground image: An image that is always at the top of the frame layout and directly faces the user, that is, an image that will not be covered.
Two attributes:
android: foreground: * Set the foreground image of the reframe container
android: foregroundGravity: set the foreground image display position
Android FrameLayout Example

2. Example demonstration
1) The simplest example
Operation effect diagram:
<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: Very simple, the three TextViews set different sizes and background colors, and cover them in turn. Then the foreground image is set in the lower right corner. The foreground image is set by android: foreground = "@ drawable / logo". | bottom "sets the position of the foreground image in the lower right corner
2) cute girl moving with fingers
The effect diagram is 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 new 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 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: determine whether the picture is recycled, otherwise force the picture to be 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 of the instantiated mezi object, override the onTouch method, change the X and Y coordinates of the mezi, and call the invalidate () redraw method
step 9: add mezi objects 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>    
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); 
    } 
}  

No comments:

Post a Comment