There are five common layouts on Android:

  • LinearLayout: components that are laid out vertically or horizontally.
  • FrameLayout: Components layout components from the top left of the screen.
  • TableLayout: lays out components in rows and columns.
  • RelativeLayout: Layout with respect to other components.
  • AbsoluteLayout: lays out components according to absolute coordinates.

 

1. Linear layout

Linear layout is the most common layout in Android development. It is arranged vertically or horizontally. You can set the orientation of the linear layout through the “Android: Orientation” attribute. Attribute values can be vertical or horizontal.

Common attributes:

Android :orientation: allows you to set the orientation of the layout. Android: Gravity: controls the alignment of components. Layout_weight: controls the relative size of each component in the layout

First instance

① Effect picture:

② The core code is as follows:

main.xml

1 <? The XML version = "1.0" encoding = "utf-8"? > 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 > 7 <LinearLayout 8 android:layout_width="fill_parent" 9 android:layout_height="wrap_content" 10 android:orientation="vertical" 11 > 12 <EditText 13 android:layout_width="fill_parent" 14 android:layout_height="wrap_content" 15 /> 16 </LinearLayout> 17 <LinearLayout 18 android:layout_width="fill_parent" 19 android:layout_height="wrap_content" 20 android:orientation="horizontal" 21 android:gravity="right" 22 > 23 <! -- Android :gravity="right" <Button 25 Android :layout_height="wrap_content" 26 Android :layout_width="wrap_content" 27 Android :text=" sure "28 /> 29 <Button 30 Android :layout_height="wrap_content" 31 Android :layout_width="wrap_content" 32 Android :text=" cancel "33 /> 34 </LinearLayout> 35 </LinearLayout>Copy the code

Second example

① Effect picture:

② Core code:

mian.xml

1 <? The XML version = "1.0" encoding = "utf-8"? > 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" android:layout_width="fill_parent" 4 android:layout_height="fill_parent"> 5 6 <LinearLayout 7 android:orientation="horizontal" 8 android:layout_width="fill_parent" 9 android:layout_height="fill_parent" 10 android:layout_weight="1"> 11 12 <TextView 13 android:text="red" 14 android:gravity="center_horizontal" 15 android:background="#aa0000" 16 android:layout_width="wrap_content" 17 android:layout_height="fill_parent" 18 android:layout_weight="1" 19 /> 20 <! -- Android :gravity=" horizontal" --> 21 <! The layout_weight property controls the relative size of individual controls in the layout. The layout_weight attribute is a non-negative integer value. 22 A linear layout allocates the area occupied by the control based on the ratio of its layout_weight value to the sum of the layout_weight values of all controls in the layout. 23 For example, in a horizontal LinearLayout with two buttons, the layout_weight property of both buttons is 1 and 24, then both buttons will be stretched to half of the entire screen width. If layout_weight is 0, the control will remain the same size and will not be stretched. 25 For other controls whose layout_weight is greater than 0, the width or height of the control whose layout_weight is 0 is subtracted. 28 Android :text="Teal" 29 Android :gravity="center_horizontal" 30 android:background="#008080" 31 android:layout_width="wrap_content" 32 android:layout_height="fill_parent" 33 android:layout_weight="1"/> 34 35 <TextView 36 android:text="blue" 37 android:gravity="center_horizontal" 38 android:background="#0000aa" 39 android:layout_width="wrap_content" 40 android:layout_height="fill_parent" 41 android:layout_weight="1" 42 /> 43 44 <TextView 45 android:text="orange" 46 android:gravity="center_horizontal" 47 android:background="#FFA500" 48 android:layout_width="wrap_content" 49 android:layout_height="fill_parent" 50 android:layout_weight="1" 51 /> 52 53 </LinearLayout> 54 <LinearLayout 55 android:orientation="vertical" 56 android:layout_width="fill_parent" 57 android:layout_height="fill_parent" 58 android:layout_weight="1"> 59 60 <TextView 61 android:text="row one" 62 android:textSize="15pt" 63 android:background="#aa0000" 64 android:layout_width="fill_parent" 65 android:layout_height="wrap_content" 66 android:layout_weight="1" 67 /> 68 <! -- --> 69 <TextView 70 android:text="row two" 71 android:textSize="15pt" 72 android:background="#DDA0DD" 73 android:layout_width="fill_parent" 74 android:layout_height="wrap_content" 75 android:layout_weight="1" 76 /> 77 78 <TextView 79 android:text="row three" 80 android:textSize="15pt" 81 android:background="#008080" 82 android:layout_width="fill_parent" 83 android:layout_height="wrap_content" 84 android:layout_weight="1" 85 /> 86 <TextView 87 android:text="row four" 88 android:textSize="15pt" 89 android:background="#FFA500" 90 android:layout_width="fill_parent" 91 android:layout_height="wrap_content" 92 android:layout_weight="1" 93 /> 94 </LinearLayout> 95 </LinearLayout>Copy the code

2. The frame layout

The frame layout starts at the top left (0,0) coordinates of the screen, with multiple components stacked on top of each other, with the first component added at the bottom and the last view added to the frame displayed at the top. The upper layer overwrites the controls at the next layer.

Simple example

① Effect picture:

② Core code:

main.xml

1 <? The XML version = "1.0" encoding = "utf-8"? > 2 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 > 6 <TextView 7 android:layout_width="300dp" 8 android:layout_height="300dp" 9 android:background="#00BFFF" 10 /> 11 <TextView 12 android:layout_width="260dp" 13 android:layout_height="260dp" 14 android:background="#FFC0CB" 15 /> 16 <TextView 17 android:layout_width="220dp" 18 android:layout_height="220dp" 19 android:background="#0000FF" 20 /> 21 </FrameLayout>Copy the code

3. Table layout

A table layout is a ViewGroup that displays its child view elements in a table, that is, rows and columns that identify the position of a view.

Common attributes for table layouts are as follows:

Android :collapseColumns: hide specified columns Android :shrinkColumns :shrink specified columns to fit the screen Android :stretchColumns :collapseColumns Android :layout_column: the control is placed in the specified column. Android: layout_SPAN: the number of columns that the control spans

A simple example:

① Effect picture:

② Core code:

 main.xml

1 <? The XML version = "1.0" encoding = "utf-8"? > 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_parent" 5 > 6 <TableRow> 7 <Button 8 android:text="Button1" 9 /> 10 <Button 11 android:text="Button2" 12 /> 13 <Button 14 android:text="Button3" 15 /> 16 </TableRow> 17 <TableRow> 18 <Button 19 android:text="Button4" 20 /> 21 <Button 22 android:layout_span="2" 23 android:text="Button5" 24 /> 25 </TableRow> 26 27 </TableLayout>Copy the code

4. Relative layout

Relative layout is the layout of components according to their relative positions, such as on the left, right, above and below a component.

Relative layout common attributes please refer to my blog: www.cnblogs.com/ECJTUACM-87…

Simple example

① Effect picture:

 

② Core code:

main.xml

1 <? The XML version = "1.0" encoding = "utf-8"? > 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="wrap_content" 5 android:padding="10px" 6 > 7 <TextView 8 android:id="@+id/tev1" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_marginBottom="30dp" 12 android:text="Please Type Here:" 13 /> 14 <EditText 15 android:id="@+id/tx1" 16 android:layout_width="match_parent" 17 android:layout_height="wrap_content" 18 android:layout_below="@id/tev1" 19 /> 20 <Button 21 android:id="@+id/btn1" 22 android:layout_height="wrap_content" 23 android:layout_width="wrap_content" 24 android:layout_below="@id/tx1" 25 Android :layout_alignParentRight="true" 26 Android :text=" OK "27 /> 28 <Button 29 Android :id="@+ ID /btn2" 30 android:layout_height="wrap_content" 31 android:layout_width="wrap_content" 32 android:layout_below="@id/tx1" 33 Android :layout_toLeftOf="@id/btn1" 34 Android :layout_toLeftOf="@id/btn1" 34 Android :layout_marginRight="30dp" 35 Android :text=" Cancel "36 /> 37 </RelativeLayout>Copy the code

5. Absolute layout

Absolute layout determines the location of a component by specifying the exact X and Y coordinates of its child components. This class is out of date in the Android2.0 API documentation and can be replaced with FrameLayout or RelativeLayout. So I won’t go into details here.