Article directory

1. Linear layout

2. Relative layout

3. Frame layout

4. Form layout

5. Constraint layout

Summarize

1. Linear layout

Linear Layout (LinearLayout) mainly displays the controls in the interface horizontally or vertically. When the controls are arranged horizontally, the display order is from left to right; when the controls are arranged vertically, the display order is from top to bottom.

Code example:

<?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/design_default_color_secondary"
    >


    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="button 1"
        android:layout_weight="1"
        android:layout_marginRight="5dp"
        >
    </Button>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="button 2"
        android:layout_weight="1"
        android:layout_marginRight="10dp"
        >
    </Button>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="button 3"
        android:layout_weight="2"
        >
    </Button>

</LinearLayout>

Notice:

• The android:layout_width attribute value in the LinearLayout layout cannot be set to wrap_content

• Because LinearLayout has a higher priority than Button, if it is set to wrap_content, the android:layout_weight attribute of the Button control will lose its effect

• When the control uses the weight attribute, the width attribute value of the layout is usually set to 0dp

2. Relative layout

Relative Layout (RelativeLayout) is to specify the position of child controls through relative positioning, that is, to place controls with other controls or parent containers as reference objects.

 

Relative layout control position property:

Code example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/design_default_color_secondary">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="button 1"
        android:layout_marginBottom="20dp"
        >
    </Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button 2"
        android:layout_centerInParent="true"
        android:layout_marginTop="260dp"
        android:id="@+id/button2"
        >
    </Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button 3"
        android:layout_toRightOf="@id/button2"
        android:layout_alignBottom="@id/button2"
        android:layout_marginBottom="100dp"
        >
    </Button>
    
</RelativeLayout>

 

3. Frame layout

Frame Layout (FrameLayout) is used to create a blank area on the screen. Each sub-control added to this area occupies one frame. These frames will be superimposed one by one, and the controls added later will be superimposed on the previous control. All controls are displayed by default in the upper left corner of the screen.

 

Code example:

<?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="211dp"
        android:layout_height="395dp"
        android:text="button 1"
        >
    </Button>
</FrameLayout>

4. Form layout

        The table layout (TableLayout) manages controls in the form of rows and columns. It does not need to explicitly declare how many rows and columns it contains. Instead, it controls the number of rows in the table by adding a TableRow layout to the TableLayout layout. By adding a TableRow layout to the TableRow layout Control to control the number of columns in the table.

 

Table layout properties:

Table layout control properties:

Code example:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0">
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button 1"
            android:layout_column="0">
        </Button>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button 2"
            android:layout_column="0">
        </Button>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="button 3"
            android:layout_column="0">
        </Button>
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="button 4">
        </Button>
        <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:text="button 5">
    </Button>
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="button 6">
            
        </Button>
    </TableRow>

</TableLayout>

 

5. Constraint layout

ConstraintLayout is a new layout added by Android Studio 2.2. The controls in the ConstraintLayout layout can be relatively positioned horizontally and vertically by adding constraints. Among them, the horizontal sides include Left, Start, Right, and End, and the vertical sides include Top, Bottom, and Baseline (the baseline at the bottom of the text).

 

Attributes of relative positioning relationship under constraint layout:

  be careful:

• In the ConstraintLayout layout, the control can determine the relative position of the control in the parent layout (ConstraintLayout) by adding constraints.

• When in the same direction (horizontal or vertical), both sides of the control add constraints to ConstraintLayout at the same time, the control is displayed in the center in the direction of adding constraints.

• Horizontally centered in the parent layout

• When the constraints are in the opposite direction, the default control is centered, but like a tug-of-war, when the forces of the two constraints are not equal, there will be a tendency.

 

Chain style:

Summarize

The five commonly used layouts provided by the Android system are directly or indirectly inherited from ViewGroup, so they also support the properties defined in ViewGroup, which can be regarded as general properties of the layout.

 END.