1. What is Layout?

Layout - Interface layout that provides an interface architecture for applications.How to control the size, position, color and other properties of controls in an Activity.

The relationship between Layout and ViewGroup

• ViewGroup is a container that inherits from View.
• ViewGroup is the base class for Layout and some other components.

There are several common layouts available in Android:
LinearLayout Linear Layout

RelativeLayout relative layout

FrameLayout Frame Layout

AbsoluteLayout Absolute Layout

TableLayout table layout

GridLayout grid layout

Today we will focus on linear layout, and the rest of the common layouts will be detailed in the later articles.

2. LinearLayout linear layout:

Refers to the horizontal or vertical arrangement of child controls, in which all the controls in the layout are arranged in a linear order, just as their names are.

Common properties:

1. android:id: Adds a resource id, or identifier, to the component that allows it to find the layout or control.
2. android:layout_width: The width of the layout, wrap_content for the actual width of the component, match_parent for filling the parent container
3. android:layout_height: The length of the layout, wrap_content for the actual length of the component, match_parent for filling the parent container
4. android:orientation: There are two ways to arrange the layout: horizontal level, vertical vertical, and default horizontal if not set
5. android:gravity: Controls the alignment of child elements contained in a component
6. android:layout_gravity: Controls the alignment of the component in the parent container
7. android:background: Adds a background picture or background color to the component, often in hexadecimal format with six digits
8. android:layout_margin: Outer margin, the margin between a layout or control and an external element
9. android:layout_padding: Inside margin, the margin between the layout or control and the internal element
10. android:layout_weight: Weight, which allocates space other than the space occupied by the display, and then allocates space according to the size of the weight. Using weights usually sets the width of the direction in which the weight is assigned to 0dp. If 0dp is not set, the control occupies the specified width, then adds the space allocated according to the weight.space

The following are examples of how to use them

orientation is a group of views that can distribute all subitems vertically or horizontally in one direction

When android:orientation="vertical", only the horizontal setting works, but the vertical setting does not. That is, left,right,center_horizontal is valid.
When android:orientation="horizontal", only the vertical setting works, but the horizontal setting does not. That is, top,bottom,center_vertical is valid.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_here"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here 1"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here 2"
        android:textColor="@color/black"
        android:textSize="16sp" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here 1"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here 2"
        android:textColor="@color/black"
        android:textSize="16sp" />
</LinearLayout>

gravity:

android:layout_gravity is the alignment of this (child) element relative to the parent element set on the child element.
android:gravity="bottom|right" is the alignment of all child elements of this (parent) element, set on the parent element, with multiple values separated by |.

The attribute values are center (overall center), center_vertical (vertical center), center_horizontal (horizontal center), right (right), left (left), bottom (bottom), and top (top) respectively.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here 1"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/color_F9658E"
        android:gravity="bottom"
        android:text="Here 2"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/color_A9BEFF"
        android:gravity="center_vertical|right"
        android:text="Here 3"
        android:textColor="@color/black"
        android:textSize="16sp" />
</LinearLayout>

background

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/ic_launcher"
    android:orientation="vertical">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:background="@color/color_FF6F65"
        android:gravity="center"
        android:text="Here 1"
        android:textColor="@color/black"
        android:textSize="16sp" />
</LinearLayout>

padding && margin:
android:padding="10dp" (the distance between all child elements of this element and the edge of the parent element, set on the parent element).
android:layout_marginLeft="10dp" (distance between child element and parent element edge, set on child element).

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_FF6F65"
        android:text="Here 1"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/color_F9658E"
        android:gravity="bottom"
        android:padding="15dp"
        android:text="Here 2"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/color_A9BEFF"
        android:gravity="center_vertical|right"
        android:paddingRight="15dp"
        android:text="Here 3"
        android:textColor="@color/black"
        android:textSize="16sp" />
</LinearLayout>

weight:
android:layout_weight ="1" (subelements in a linear layout assign weight values to unoccupied space [horizontal or vertical]. The smaller the value, the larger the weight.
The premise is that the child element has the android:layout_width = "match_parent" attribute set (horizontal) or the android:layout_height = "match_parent" attribute set (vertical).
If android:layout_width = "0dp" or android:layout_height="0dp" for a child element, the setting value for android:layout_weight assigns exactly the opposite amount of space in that direction.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:background="@color/color_FF6F65"
        android:paddingLeft="10dp"
        android:paddingTop="20dp"
        android:paddingRight="40dp"
        android:paddingBottom="60dp"
        android:text="Here 1"
        android:textColor="@color/black"
        android:textSize="16sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/color_F9658E"
            android:paddingLeft="15dp"
            android:text="Here 2"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_weight="2"
            android:background="@color/color_A9BEFF"
            android:paddingRight="15dp"
            android:text="Here 3"
            android:textColor="@color/black"
            android:textSize="16sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@color/color_29CFFF"
            android:paddingLeft="15dp"
            android:text="Here 4"
            android:textColor="@color/black"
            android:textSize="16sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="2"
            android:background="@color/color_D6E519"
            android:paddingRight="15dp"
            android:text="Here 5"
            android:textColor="@color/black"
            android:textSize="16sp" />
    </LinearLayout>
</LinearLayout>

Writing a linearlayout layout in code

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //Create LinearLayout Layout Object
        LinearLayout liHello = new LinearLayout(this);
        //Set the layout properties this way
        LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        //Set the layout arrangement of the layout LinearLayout
        liHello.setOrientation(LinearLayout.VERTICAL);
        //Set layout background color
        liHello.setBackgroundColor(Color.parseColor("#F9658E"));
        //Set the inside margin of the layout, note that you can't set the outside margin here
        liHello.setPadding(10, 20, 30, 40);
        //Sets the alignment of child elements contained within a component
        liHello.setGravity(Gravity.CENTER);

        TextView tvHello = new TextView(this);
        tvHello.setText("Hello");

        liHello.addView(tvHello, param);
        //Set display liHello layout
        setContentView(liHello);
    }

epilogue

Our software is made up of many interfaces, and each interface is made up of N controls. Android uses layout to organize the space on the interface.Layout can be thought of as a container where many controls can be placed. It can adjust the position of controls according to certain rules, thus achieving a beautiful interface.Layouts can also be placed in layouts, which allow more complex interfaces to be achieved by nesting multiple layers of layouts.Believe your little buddies have learned how to use LinearLayout, so practice it now.

PS: If you still have some unrecognized partners, please join our QQ technical exchange group: 892271582, which contains all kinds of gods to answer the questions they encounter.