[Android container component - FrameLayout]

I. Overview

       FrameLayout lays out components in a cascade: only one of them can be displayed at a time. Similar to playing cards, only the top card is visible when stacked together. FrameLayout provides an XML configuration property for the components that are laid out in it: Android:layout_gravity . Through this property, components laid out in FrameLayout can specify their center of gravity position in the container, for example, left, right, etc. All controls are displayed in the upper left corner of the screen by default.

FrameLayout globally defined properties

2. Exercise 1

Implement the following layout

Code:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@mipmap/ic_launcher"
    android:foregroundGravity="left">

    <Button
        android:layout_width="340dp"
        android:layout_height="570dp"
        android:text="按钮1"
        android:background="#A0230E"
        />

    <Button
        android:layout_width="250dp"
        android:layout_height="220dp"
        android:text="按钮2"
        android:background="#0A6188"
        />

</FrameLayout>

Exercise two:

Realize the effect of clicking the picture with the mouse, and then switching the picture (4 pictures to choose by yourself)

Code:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/p1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/p1"
        android:scaleType="fitCenter"
        android:visibility="gone"
        />
    <ImageView
        android:id="@+id/p2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/p2"
        android:scaleType="fitCenter"
        android:visibility="gone"
        />
    <ImageView
        android:id="@+id/p3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/p3"
        android:scaleType="fitCenter"
        android:visibility="gone"
        />
    <ImageView
        android:id="@+id/p4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/p4"
        android:scaleType="fitCenter"
        android:visibility="visible"
        />


</FrameLayout>

MainActivity.java

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toolbar;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
    private ImageView p1,p2,p3,p4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        p1=(ImageView)this.findViewById(R.id.p1);
        p1.setOnClickListener(this);
        p2=(ImageView)this.findViewById(R.id.p2);
        p2.setOnClickListener(this);
        p3=(ImageView)this.findViewById(R.id.p3);
        p3.setOnClickListener(this);
        p4=(ImageView)this.findViewById(R.id.p4);
        p4.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        int id= view.getId();
        switch (id){
            case R.id.p1:
                p1.setVisibility(View.GONE);
                p2.setVisibility(View.VISIBLE);
                break;
            case R.id.p2:
                p2.setVisibility(View.GONE);
                p3.setVisibility(View.VISIBLE);
                break;
            case R.id.p3:
                p3.setVisibility(View.GONE);
                p4.setVisibility(View.VISIBLE);
                break;
            case R.id.p4:
                p4.setVisibility(View.GONE);
                p1.setVisibility(View.VISIBLE);
                break;
        }
    }
}