Android development study notes-02 layout manager (linear layout, relative layout)

concept of layout

Layout is about arranging our controls, such as pictures, buttons, text boxes, etc., in a certain order. The most commonly used layouts in Android are linear layout and relative layout.

linear layout

Linear layout, as the name implies, is a layout in which elements are arranged linearly .
Common properties:

1. android:id, a unique name used to identify the layout for easy reference
2. android:layout_width, layout width
3. android:layout_height, layout height
4. android:background, the background color of the layout
5. android:layout_magin, the margins of the layout
6. android:layout_padding, the padding of the layout
7. android:orientation, the arrangement direction of elements within the layout, horizontal or vertical

Example of linear layout:
final effect:

• analyze:

It is disassembled into three linear layouts arranged vertically, and the corresponding elements are laid out in each linear layout.

• Layout source dismantling:

1. First place a linear layout as the root layout, the root layout sets the internal elements to be arranged vertically , and place three linear layouts.

    <!--  根布局  -->
    <LinearLayout
        android:id="@+id/ll_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--  布局1   -->
        <LinearLayout
            android:id="@+id/ll_1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#66CCCC">
        </LinearLayout>
        <!--  布局2   -->
        <LinearLayout
            android:id="@+id/ll_2"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#666699"
            android:padding="20dp">
        </LinearLayout>
        <!--  布局3   -->
        <LinearLayout
            android:id="@+id/ll_3"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#669999">
        </LinearLayout>
    </LinearLayout>

Effect:

2. Arrange two View basic controls horizontally in layout 1, and set different background colors.

        <!--  布局1   -->
        <LinearLayout
            android:id="@+id/ll_1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#66CCCC">
            <View
                android:id="@+id/view_1"
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:background="#FFFF00"/>
            <View
                android:id="@+id/view_2"
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:background="#FF99CC"/>
        </LinearLayout>

Effect:

3. Set the padding of layout 2 to 20dp, and place a View.

        <!--  布局2   -->
        <LinearLayout
            android:id="@+id/ll_2"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#666699"
            android:padding="20dp">

            <View
                android:id="@+id/view_3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ffffff"/>
        </LinearLayout>

Effect:

4. A View control is placed in Layout 3, and layout_marginthe property value of the control is set to 30dp.

        <!--  布局3   -->
        <LinearLayout
            android:id="@+id/ll_3"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#669999">
            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FFFFCC"
                android:layout_margin="30dp"/>
        </LinearLayout> 

Effect:

Pay attention to distinguishing paddingand margin: padding is the inner margin, margin is the outer margin, one is set on the upper layer, and the other is set on this layer.

5. final effect:

<?xml version="1.0" encoding="utf-8"?>
<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">
    <!--  根布局  -->
    <LinearLayout
        android:id="@+id/ll_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--  布局1   -->
        <LinearLayout
            android:id="@+id/ll_1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#66CCCC">
            <View
                android:id="@+id/view_1"
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:background="#FFFF00"/>
            <View
                android:id="@+id/view_2"
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:background="#FF99CC"/>
        </LinearLayout>
        <!--  布局2   -->
        <LinearLayout
            android:id="@+id/ll_2"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#666699"
            android:padding="20dp">

            <View
                android:id="@+id/view_3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ffffff"/>
        </LinearLayout>
        <!--  布局3   -->
        <LinearLayout
            android:id="@+id/ll_3"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#669999">
            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#FFFFCC"
                android:layout_margin="30dp"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

relative layout

Relative layout: It seems that there is nothing to explain, it is relative layout, and everyone understands it. For example: a is on the left of b, then b is on the right of a, which is relative.
Common properties:

1. android:layout_toLeftOf, located to the left of the xx element, the value is the id of a certain control or element.
2. android:layout_toRightOf, located to the right of the xx element, the value is the id of a certain control or element.
3. android:layout_alignBottom, aligned to the bottom of the xx element
4. android:layout_alignParentBottom, aligned to the bottom of the parent control
5. android:layout_below, located below the xx element

Relative layout example:
to achieve the same effect as the previous example:

the code is also similar, so it will not be analyzed:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
    <!--  布局1 -->
    <RelativeLayout
        android:id="@+id/rl_1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#66CCCC">
        <View
            android:id="@+id/View1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="#FFFF00"/>
        <View
            android:layout_toRightOf="@+id/View1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:background="#FF99CC"/>
    </RelativeLayout>
    <!--  布局2 -->
    <RelativeLayout
        android:id="@+id/rl_2"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#666699"
        android:layout_below="@+id/rl_1"
        android:padding="20dp">

        <View
            android:id="@+id/view_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ffffff"/>
    </RelativeLayout>
    <!--  布局3 -->
    <RelativeLayout
        android:id="@+id/rl_3"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#669999"
        android:layout_below="@+id/rl_2">
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFCC"
            android:layout_margin="30dp"/>
    </RelativeLayout>

</RelativeLayout>