Detailed analysis of linear layout (LinearLayout) and horizontal layout (ReativeLayout) under Android studio + typical examples and their codes

1: Linear layout

Linear layout has two types: horizontal linear layout: android :orientation ="horizontal" ; and vertical linear layout: android :orientation ="vertical" .

When the code indicates android :orientation ="horizontal" , it means that all child elements under this layout must be arranged horizontally.

When the code indicates android :orientation ="verticalall" , it means that all child elements under this layout must be arranged vertically.

Speaking of orientation, we must also mention weight. These two are closely related. We often see android :layout_weight = "1". What does it mean? It represents the proportion of the layout occupied by all child elements under this layout. If the three weights are all 1, it means that each accounts for 1/3 of the average.

Let’s give a typical example to illustrate:

 This is the effect of linear layout.

The complete code is as follows:

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">
            <TextView
               android:layout_height="match_parent"
              android:layout_width="0dp"
                android:layout_weight="1"
               android:background="#00ff00"
                />
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:background="#ff0000"
                />
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:background="#0000ff"
                />
        </LinearLayout>
<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ff0000"
   />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#00ff00"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#0000ff"
        />

    </LinearLayout>
    </LinearLayout>

Idea: There are three linear (LinearLayout) layouts. They are divided into three layouts: large, medium and small. The large layout is the entire virtual mobile page, and the middle layout is the layout composed of and . A deeper explanation is that the first layout divides the virtual machine into two middle layouts, upper and lower. Since the two middle layouts are arranged vertically downward, their orientation=”vertical”, that is, vertically downward.

Next, we will discuss the situation below the upper and lower small linear layouts:

The purpose of the small layout above is to make it three horizontally arranged textviews (views) with green, red, and blue weights all equal to 1. Because it is horizontal, orientation = "horizontal", the layout extends to the right, so the height is determined, the same as the parent layout; and the width is uncertain, generally set to 0dp, and the width is specifically divided by weight values. size. The code is height=”match_parent” width=”0dp” weight=”1” ( Note: The two '0dp and weight' must appear at the same time, otherwise an error will be reported.

The purpose of the small layout below is to make three vertically arranged textviews ( views) of red, green, and blue with a weight of 1. Because it is arranged vertically downward, orientation=”vertical”. Extend downwards in turn, that is, the width is determined and the height is uncertain. Therefore width=” match_parent”

Height=”0dp”weight=”1”

Regarding color, I don’t know if you all know it, so let me explain it:

#000000 displays black, #ff0000 displays red, #00ff00 displays green, #0000ff displays blue, and #ffffff displays white.

This is just one of the representation methods. If you are interested in other methods, you can search for them.

2: Relative layout

The most common relative layout is the control buttons when playing games. I will also give you this example and its code below.

We often use a lot of code in relative layout, such as the following code:

android:layout_centerInParent="true" -- Place the control in the center of the parent control

android:layout_centerHorizontal="true" -- Center the control horizontally

android:layout_centerVertical="true" -- Center the control vertically

 The attribute value must be the reference name of id "@id/id-name"

android:layout_above means above the element where its id is located

 android:layout_below means below the element where its id is located

android:layout_toLeftOf means to the left of the element where its id is located

android:layout_toRightOf means to the right of the element where its id is located

android:layout_alignTop The top edge of this element is aligned with the top edge of the element where its id is located.

android:layout_alignLeft The left edge of this element is aligned with the left edge of the element whose id is located.

android:layout_alignBottom The bottom edge of this element is aligned with the bottom edge of the element where its id is located.

android:layout_alignRight The right edge of this element is aligned with the right edge of the element whose id is located.

Oh yes, there is another knowledge point, android:layout_gravity under <TextView represents the position of the entire TextView under the layout.

The following is an example of a typical relative layout:

Rendering of the game button:

The complete code is as follows:

<LinearLayout
    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=".MainActivity"
    android:orientation="horizontal">
    <RelativeLayout
       android:layout_width="0dp"
        android:layout_height="match_parent"
      android:layout_weight="1"
        >
        <Button
            android:id="@+id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="⚪"
          android:layout_centerInParent="true"
            />
        <Button
            android:layout_above="@id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="↑"
            android:layout_alignLeft="@id/btn_center"
            android:textSize="25sp"

            />
        <Button
            android:layout_below="@id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="↓"
            android:layout_alignLeft="@id/btn_center"
            android:textSize="25sp"
            />
        <Button
            android:layout_toLeftOf="@id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="←"
           android:layout_alignTop="@id/btn_center"
            android:textSize="25sp"
            />
        <Button
            android:layout_toRightOf="@id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="→"
            android:layout_alignTop="@id/btn_center"
            android:textSize="25sp"
            />
    </RelativeLayout>
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >
        <Button
            android:id="@+id/btn_zhongquan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:text="A"
            />
        <Button

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@id/btn_zhongquan"
            android:text="B"
            />
    </RelativeLayout>

</LinearLayout>

I hope my answer can help you! 

Guess you like

Origin blog.csdn.net/m0_68403626/article/details/129641748