- LinearLayoutLinearLayout
- Relative layout RelativeLayout
- Table layout TableLayout
- Absolute layout AbsoluteLayout
- Grid Layout GridLayout
- Frame layout FrameLayout
Layout Common Properties
| attribute name | Functional description |
| android:id | Set the identity of the layout |
| android:layout_width | Set the width of the layout |
| android:layout_height | set the height of the layout |
| android:background | Set the background of the layout |
| android:layout_margin | Set the distance between the current layout and the screen boundary or the surrounding controls |
| android:padding | Set the distance between the current layout and the controls in this layout |
| android:minWidth | Set view minimum width |
| android:minHeight | Set view minimum height |
(1) Linear layout (LinearLayput)
Linear layout is the most commonly used layout method, which can be divided into horizontal linear layout and vertical linear layout
When laying out vertically, each row has only one element, and multiple elements go down vertically at a time
When laying out horizontally, there is only one line, and no element is arranged to the right at a time
Features: Arranged horizontally or vertically
Common attributes:
| control properties | Functional description |
| android:oriientation | Arrangement of components in a layout (with horizontal layout and vertical layout) |
| android:gravity | Controls the alignment of this component in the parent container |
| android:layout_gravity | Controls the alignment of this component in its parent container |
| android:layout_weight | Weight, used to divide the area equally |
| android:divider | Dividing line |
| android:showDividers | Set the position of the dividing line none (none) beginning (start) end (end) minddle (between every two components) |
| android:dividerPadding | Set the padding of the dividing line |
case:
code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
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="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="权重1"
android:gravity="center"
android:background="#afdfe4"/>
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="权重2"
android:gravity="center"
android:background="#94d6da"/>
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="权重3"
android:gravity="center"
android:background="#78cdd1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="#cde6c7">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第一个线性布局" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="#84bf96">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第二个线性布局"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="#abc88b">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="第三个线性布局"/>
</LinearLayout>
</LinearLayout>(2) Relative Layout (RelativeLayout)
Relative layout can be understood as a layout method in which an element is positioned as a reference
That is, the position is set with reference to other controls or parent containers.
Features: arranged by relative positioning
Common attributes:
| category | control properties | Functional description |
| Position according to parent container |
android:layout_centerInParent | Set the current control to be positioned at the center of the parent layout |
| android:layout_centerVertical | Set the current control to be positioned vertically in the center of the parent layout | |
| android:layout_centerHorizontal | Set the current control to be positioned at the horizontal center of the parent control | |
| android:layout_alignParentTop | Set whether the current control is aligned with the top of the parent control | |
| android:layout_alignParentLeft | Set whether the current control is left-aligned with the parent control | |
| android:layout_alignParentRight | Set whether the current control is right-aligned with the parent control | |
| android:layout_alignParentBottom | Set whether the current control is aligned with the bottom of the parent control | |
| Positioning according to sibling components | android:layout_above | Set the current control to be above a control |
| android:layout_below | Set the current control to be located below a control | |
| android:layout_toLeftOf | Set the current control to the left of a control | |
| android:layout_toRightOf | Set the current control to the right of a control | |
| android:layout_alignTop | Set the upper boundary of the current control to align with the upper boundary of a control | |
| android:layout_alignBottom | Set the upper boundary of the current control to align with the lower boundary of a control | |
| android:layout_alignLeft | Set the upper border of the current control to align with the left border of a control | |
| android:layout_alignRight | Set the upper boundary of the current control to align with the right boundary of a control |
case:
code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text1"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="100dp"
android:layout_marginTop="100dp"
android:text="text1"
android:background="#afdfe4"
android:gravity="center"/>
<TextView
android:id="@+id/text2"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_marginStart="60dp"
android:layout_marginTop="230dp"
android:layout_toEndOf="@+id/text4"
android:text="text2"
android:background="#afdfe4"
android:gravity="center"/>
<TextView
android:id="@+id/text3"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="123dp"
android:layout_marginBottom="200dp"
android:text="text3"
android:background="#afdfe4"
android:gravity="center"/>
<TextView
android:id="@+id/text4"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="23dp"
android:layout_marginTop="293dp"
android:text="text4"
android:background="#afdfe4"
android:gravity="center"/>
<TextView
android:id="@+id/text5"
android:layout_width="60dp"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="266dp"
android:layout_marginEnd="53dp"
android:text="text5"
android:background="#afdfe4"
android:gravity="center"/>
</RelativeLayout>(3) Table Layout (TableLayout)
A tableLayout is composed of many tableRows, and each tableLayout has a table row tableRow in it, and each element can be specifically defined in the TableRow.
Features: Arranged in table form
Common attributes:
| layout properties | Functional description |
| android:stretchColumns | set the column to be stretched |
| android:shrinkColumns | set the column to be shrunk |
| android:collapseColumns | set the column to be hidden |
| control properties | Functional description |
| android:layout_column | Set the display position of the cell |
| android:layout_span | Set how many rows the cell occupies, the default is 1 row |
case:
code:
<?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="1"
android:collapseColumns="2">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button2"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button3"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button4"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button5"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button6"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button7"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button8"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button9"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button10"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button11"/>
</TableRow>
</TableLayout>(4) Absolute Layout (AbsoluteLayout)
Absolute layout uses X and Y coordinates to specify the position of elements. This layout is relatively simple, but problems often occur when the screen is rotated, and the calculation is more troublesome when there are multiple elements.
Common attributes:
| layout properties | Functional description |
| android:layout_x | Set the abscissa of the view |
| android:layout_y | Set the vertical coordinate of the view |
case:
code:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="23dp"
android:layout_y="123dp"
android:text="Button1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="83dp"
android:layout_y="223dp"
android:text="Button2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="143dp"
android:layout_y="323dp"
android:text="Button3" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="203dp"
android:layout_y="423dp"
android:text="Button4" />
</AbsoluteLayout>(5) Grid Layout (GridLayout)
The grid layout uses a set of infinitely thin lines to divide the drawing area into rows, columns, and units, and specifies the display area of the control and the display method of the control in this area.
Features: Realize the staggered display of controls
Common attributes:
| control properties | Functional description |
| android:columnCount | total number of columns per row |
| android:rowCount | total number of rows per column |
| android:layout_column | in the grid column |
| android:layout_row | in the row of the grid |
| android:layout_columnSpan | across columns |
| android:layout_rowSpan | Interbank |
| android:layout_gravity | When the center of gravity position layout_gravity=fill in a grid, the mark can be filled |
case:
code:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:orientation="horizontal"
>
<Button android:text="/"
android:layout_column="3"
android:backgroundTint="#afdfe4"/>
<Button android:text="7"
android:backgroundTint="#afdfe4"/>
<Button android:text="8"
android:backgroundTint="#50b7c1"/>
<Button android:text="9"
android:backgroundTint="#afdfe4"/>
<Button android:text="x"
android:backgroundTint="#50b7c1"/>
<Button android:text="4"
android:backgroundTint="#50b7c1"/>
<Button android:text="5"
android:backgroundTint="#afdfe4"/>
<Button android:text="6"
android:backgroundTint="#50b7c1"/>
<Button android:text="-"
android:backgroundTint="#afdfe4"/>
<Button android:text="1"
android:backgroundTint="#afdfe4"/>
<Button android:text="2"
android:backgroundTint="#50b7c1"/>
<Button android:text="3"
android:backgroundTint="#afdfe4"/>
<Button android:text="+"
android:backgroundTint="#50b7c1"/>
<Button android:text="0"
android:layout_columnSpan="2"
android:layout_gravity="fill"
android:backgroundTint="#50b7c1"/>
<Button android:text="00"
android:backgroundTint="#afdfe4"/>
<Button android:text="="
android:backgroundTint="#50b7c1"/>
</GridLayout>(6) Frame Layout (FrameLayout)
Frame layout is used to create a blank area on the screen. Each sub-control added to this area takes up one frame. All frames are placed in the upper left corner in turn and will overlap. This layout is relatively simple, and only a few simple things can be placed.
Features: Open up a blank area, and the control layers in the frame are superimposed
Common attributes:
| control properties | Functional description |
| android:foreground | Set the foreground layout of the frame layout container |
| android:foregroundGravity | Set the foreground image display position |
Remarks: The foreground image is always at the top of the frame layout, the image directly facing the user, and the image that will not be covered
case:
<?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">
<TextView
android:layout_width="250dp"
android:layout_height="250dp"
android:background="#afdfe4" />
<TextView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#78cdd1" />
<TextView
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#50b7c1" />
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#00a6ac" />
</FrameLayout>