This article introduces the four most basic layouts in Android interface development, LinearLayout, RelativeLayout, FrameLayout, and TableLayout, and the commonly used properties in these four layouts.
- LinearLayout Linear layout, spaces are arranged linearly in the layout
- RelativeLayout: Relative Layout, controls the control position through relative positioning.
- FrameLayout Frame Layout, the simplest layout, all controls are placed in the upper left corner
- TableLayout table layout, control control position in rows and columns
Four layout examples
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical 2" />
</LinearLayout>
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Level 1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Level 2" />
</LinearLayout>
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="Aligning horizontally" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Horizontal and vertical centering" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Aligning horizontally" />
</LinearLayout>
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:hint="Please enter..."/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="submit" />
</LinearLayout>
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="Please enter..."/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="submit" />
</LinearLayout>
</LinearLayout>
orientation: horizontal/vertical, indicating the direction of linear arrangement.
layout_width/layout_height: the width and height of the element
layout_gravity: top/bottom/center/left/right/etc, indicates the alignment of the current element relative to the parent element. Various alignments are separated by "|", and the upper right alignment is: top|right.
layout_weight: The proportion of space occupied, such as elements A and B. A is set to 1, B is set to 3, and elements A and B occupy 1/4 and 3/4 of the space respectively. At this time, the element width is not determined by layout_width. Setting to 0dp is a relatively standardized writing method.
layout_weight If element A is set to 1 and element B is not set, layout_width is set to the specific value or wrap_content, then the width of element B is determined by layout_width, and element A will occupy the remaining space on the screen.
<LinearLayout ...>
<RelativeLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="300dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="I'm on the bottom left"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="I'm in the middle"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="I'm on the top right"/>
</RelativeLayout>
<RelativeLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="300dp">
<Button
android:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Reference Button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button_2"
android:layout_toRightOf="@id/button_2"
android:text="I'm on the top right"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button_2"
android:layout_toLeftOf="@id/button_2"
android:text="I'm on the bottom left"/>
</RelativeLayout>
</LinearLayout>
The following attribute values are true/false
layout_centerHorizontal/layout_centerVertical: horizontally centered, vertically centered
layout_centerInparent: vertical & horizontally centered relative to the parent element
layout_alignParentBottom: Align the lower boundary of the element and the lower boundary of the parent element
layout_alignParentLeft: left border alignment
layout_alignParentRight: Right border alignment
layout_alignParentTop: upper boundary alignment
The following attribute values are the control id
layout_above/layout_below: above/under certain element
layout_toLeftOf/layout_toRightOf: on the left/right of an element
layout_alignTop/layout_alignBottom: The upper (bottom) boundary of an element is aligned with the upper (bottom) boundary of an element
layout_alignLeft/layout_alignRight: left (right) boundary alignment
All elements are placed in the upper left corner of the layout
<FrameLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I'm a button"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I'm an input box"/>
</FrameLayout>
<TableLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Mail"/>
<EditText
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="Please enter your email address" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="password"/>
<EditText
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="Please enter your password" />
</TableRow>
<TableRow>
<Button
android:layout_height="wrap_content"
android:layout_span="2"
android:text="register" />
</TableRow>
</TableLayout>
<TableLayout xmlns:andro android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> ... </TableLayout>
TableRow： A row representing the layout of the table, and an element in the row represents a column.
layout_span： Merge cells, set to 2, which means that the element occupies 2 columns of space.
stretchColumns：The space width cannot be specified in TableRow, so this property is required, set to 1, indicating that the second column of stretching (0 is the first column) is as wide as the screen, and the effect is like the second picture of TableLayout.
5. Custom layout
In Android, you can place controls or sub-layouts under layout. If the sub-layout content is relatively independent and frequently used, such as the title bar, or the layout is more complicated, you can consider importing in a custom layout form. The method is very simple.
Create a new layout file, for example
Introduced in the parent layout:
<LinearLayout xmlns:andro android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/example"/> </LinearLayout>
The above is a detailed introduction to the four most basic layouts of Android, and I hope it will be helpful to everyone's learning.