Kotlin classroom learning--setting layout related operations (linear layout, relative layout, frame layout)

Table of contents

Layout introduction

operate

introduce

 Linear LayoutLinearLayout

Arrangement

 ButtonButton settings

Input box EditText settings

RelativeLayout

relatively overall layout

 Relative to the layout of a certain control

frame layout

Layout introduction

Operation:

Enter the default xml file, first delete the components inside, then adjust it to split form, click on the display box, right-click to enter the convent view, and the following selection box will appear.

Note: Failure to delete components may result in the following selection box appearing

Intervention

LinearLayout represents a linear layout, that is, the included controls are arranged linearly.

RelativeLayout represents a relative layout, that is, the included controls can appear anywhere in the layout through relative positioning.

FrameLayout represents the frame layout, that is, the included controls are in the default position (upper left corner).

 Linear LayoutLinearLayout

Note: height and width must be set towrap_content. If set to match_parent, overwriting will occur. .

Arrangement

Remove the default TextView control and add the following properties to the LinearLayout control:

android:orientation="horizontal"

1.android:orientation = "horizontal"Specify the arrangement of controls in the layout as Horizontalarrangement 

2.android:orientation = "vertical"Specify the arrangement of controls in the layout as Verticallyarrange

3. If not set, thendefault levelarrangement

 ButtonButton settings

Add three buttons:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="2"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:text="3"
        />

The control is displayed horizontally by default:

Generally, the length and width of a control cannot be set to 0.

When height or width is set to 0, the weight needs to be set so that its width or length is not controlled by height or width, but its proportion is controlled by the weight. as follows:

Show only one button setting:

<Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="2"
        android:gravity="left"
        android:layout_weight="2"
        />

In the example, the width is set to 0dp, while the lower part is set to left alignment and the weight is 3. After setting several other buttons, the width is allocated according to the weight proportion.

gravity is used to set the alignment of the control, layout_weight sets the weight of the control.

Set the width of the three controls to 0dp, the alignment to left, and the proportions to 3, 2, and 1, as shown below: 

Input box EditText settings

EditText control is used to set the input box, where:hint is used to set the prompt text of the input box

<EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/edittext1"
        android:hint="pls input something"
        android:layout_weight="1"
        />

Effect: (EditText and Button overall proportion distribution)

RelativeLayout

relatively overall layout

Field Effect

layout_alignParentTop

above view
layout_alignParentButtom below the view
layout_alignParentLeft on the left side of the view
layout_alignParentRight on the right side of the view
layout_centerInParent in the middle of the view

Set five buttons

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:text="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="2"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="3"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="4"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="5"
        />

Effect:

 Relative to the layout of a certain control

Field Effect
layout_above above the specified control
layout_below below the specified control
layout_toLeftOf Located to the left of the specified control
layout_toRightOf Located to the right of the specified control
layout_centerInParent in the middle of the view

Set five buttons

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="2"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="3"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="4"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="5"
        />

Effect:

frame layout

Default layout, all controls are in the default position (upper left corner)

Guess you like

Origin blog.csdn.net/m0_61059796/article/details/129932669