Android commonly used layout FrameLayout (frame layout)

FrameLayout (frame layout)

FrameLayout 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 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 there are not many application scenarios; the size of the frame layout is determined by the largest sub-control in the control. If the sizes of the controls are the same, then only You can see the top component. Subsequently added controls will overwrite the previous ones. Although the control is placed in the upper left corner by default, we can also specify other locations through the layout_gravity attribute!

FrameLayout is generally not used to display multiple content because its layout is difficult to adjust!        

Without the layout_gravity attribute, multiple contents will overlap; with layout_gravity, different positions can be set.

---

layout_gravity can take on values:

• top places the object on top of its container without changing its size.
• bottom places the object at the bottom of its container, without changing its size.
• left places the object to the left of its container, without changing its size.
• right places the object to the right of its container, without changing its size.
• center_vertical Centers the object vertically without changing its size. Vertical alignment: Center-aligned vertically.
• fill_vertical Increases the vertical size of the object when necessary to completely fill its container. Vertical fill
• center_horizontal Centers the object horizontally without changing its size. Horizontal alignment: Center aligned horizontally
• fill_horizontal increases the horizontal size of the object when necessary to completely fill its container. Fill horizontally
• center Centers the object horizontally and vertically without changing its size.
• fill increases the horizontal and vertical size of the object if necessary to completely fill its container.
• clip_vertical Additional option for clipping the top and/or bottom content of an object along the sides of its container. Clipping is based on its vertical alignment setting: when aligned top, clips the bottom; when aligned bottom, clips the top; otherwise Cut top and bottom. Crop vertically
• clip_horizontal Additional option for clipping the left and/or right content of an object according to the edge of the container. Clipping is based on its horizontal alignment setting: when aligned left, clips the right; when aligned right, clips the left side; otherwise crop the left and right sides. Crop horizontally

There is something to note here:

Distinguish between "android:gravity" and "android:layout_gravity".

android:gravity: It is for the control itself. It is used to set where the "control's own content" should be displayed in the "control's own volume". The default value is the left side.
android:layout_gravity: relative to the parent element of the control, sets the position of the control on its parent element.

There are also 2 special properties:

android:foregroundGravity

Set the position where the foreground image is displayed

android:foreground

Sets the foreground image of the frame layout container (always on top of all child controls)

Example:

In a normal sequence (text first, then image) the image would cover part of the text. like:

Implementation code:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FrameLayoutActivity">
    <!--整体布局为帧布局-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="帧布局"
        android:textSize="50dp"
        android:gravity="right"/>
    <TextView
        android:layout_width="500px"
        android:layout_height="100px"
        android:text="这是一个图片"
        android:textSize="80px"
        android:textStyle="bold"></TextView>
    <ImageView
        android:layout_width="400px"
        android:layout_height="400px"
        android:src="@mipmap/ic_launcher">
    </ImageView>

</FrameLayout>

Swap the positions of the text and the image so that the text will no longer be covered by the image. like:

Under the entire layout, add the android:foreground attribute. No matter how many child controls you have, the image added by this attribute will cover them all.

 Code: (The foreground image is set by myself, and I found this picture myself)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/img_2"
    tools:context=".FrameLayoutActivity">
    <!--整体布局为帧布局-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="帧布局"
        android:textSize="50dp"
        android:gravity="right"/>
    <TextView
        android:id="@+id/text"
        android:layout_width="500px"
        android:layout_height="100px"
        android:text="这是一个图片"
        android:textSize="80px"
        android:textStyle="bold"></TextView>
    <ImageView
        android:id="@+id/image"
        android:layout_width="400px"
        android:layout_height="400px"
        android:src="@mipmap/ic_launcher">
    </ImageView>

</FrameLayout>

Because this layout is too difficult to adjust its position, its frequency of use is even less than that of the table layout.