Five major layouts for Android development

To accommodate a wide variety of interface styles, the Android system offers 5 layouts, 5 of which are:

LinearLayout (Linear layout)

Tablelayout (Table layout)

Relativelayout (relative layout)

Absolutelayout (Absolute layout)

Framelayout (Frame layout)

With these five layouts, the controls can be placed on the screen at will, and the size and position of the controls are adjusted accordingly as the screen size changes. Here are the relationships between the five layouts in the view's inheritance system:
<ignore_js_op>


One, LinearLayout (linear layout)

Aligns all child elements in one direction (vertical or horizontal)
A vertical list each row has only one child element (no matter how wide they are)
A horizontal list is just the height of a column (the height of the highest child element is populated)

The following is an example of a simple linear layout:
<ignore_js_op>

2. <?xml version= "1.0" encoding= "Utf-8"?>
4. <linearlayout
6. Xmlns:android= "Http://schemas.android.com/apk/res/android"
8. Android:layout_width= "Match_parent"
10. android:layout_height= "match_parent" android:orientation= "vertical" >
12. <edittext android:text= "EditText"
14. 07
16. Android:id= "@+id/edittext1"
18. 09
20. Ten android:layout_height= "Wrap_content"
22. 11
24. Android:layout_width= "Fill_parent" >
26. 13
28. </EditText>
30. <linearlayout android:id= "@+id/linearlayout1"
32. 16
34. android:layout_height= "Fill_parent"
36. 18
38. Android:layout_width= "Fill_parent"
40. 20
42. Android:gravity= "Right" >
44. <button android:id= "@+id/button2"
46. 23
48. android:text= "button"
50. 25
52. Android:layout_width= "Wrap_content"
54. 27
56. android:layout_height= "Wrap_content" ></Button>
58. <button android:text= "button"
60. 30
62. Android:id= "@+id/button1"
64. 32
66. Android:layout_width= "Wrap_content"
68. 34
70. android:layout_height= "Wrap_content" ></Button>
72. </LinearLayout>
74. Panax Notoginseng </LinearLayout>

Copy Code

The outermost layout is a vertical linear layout with a width of the entire screen (fill_parent) and a height of exactly the child control (wrap_content). Then add a edittext, a horizontal layout of the linearlayout, in this linear layout, placed two button, the linear layout of the Gravity property is set to "right", so the two buttons inside the display.

Two, tablelayout (table layout)

Put the elements into rows and columns
Do not display rows, columns, or cell boundary lines
Cells cannot span rows, as in HTML
The tabular layout model manages child controls in the form of rows and columns, each of which behaves as a TableRow object, or, of course, a View object. TableRow you can add child controls, one for each column.

Android:layout_colum Official explanation: The index of the column in which this child should is, that is, to set the control in the columns in TableRow.
Android:layout_span Official explanation: Defines how many columns the child should span, that is, sets the number of columns that the control spans.

Android:collapsecolumns official explanation: The 0 based index of the columns to collapse. The column indices must is separated by a comma:1, 2, 5. That is, the columns specified in the tablelayout are hidden, and if more than one column needs to be hidden, use commas to separate the column numbers that need to be hidden.

Android:stretchcolumns official explanation: The 0 based index of the columns to stretch. The column indices must is separated by a comma:1, 2, 5. You can stretch all columns by using the value "*" instead. Note that a-column can be marked stretchable and shrinkable at the same time. This is also the setting of the specified column as extendable columns, which can stretch to fill all available space, and if more than one column needs to be set To stretch, separate the column numbers that need to be stretched with commas.

Android:shrinkcolumns official explanation: The 0 based index of the columns to shrink. The column indices must is separated by a comma:1, 2, 5. You can shrink all columns by using the value "*" instead. Sets the column that is specified to be shrunk. When a column that can be shrunk is too wide to make the other columns appear incomplete, the space is stretched vertically. When you need to set up multiple columns to shrink, separate the column numbers with commas.

Here is a simple example of how to use Tablelayout:
<ignore_js_op>

2. <?xml version= "1.0" encoding= "Utf-8"?>
4. <tablelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
6. Android:layout_width= "Fill_parent"
8. android:layout_height= "Fill_parent"
10. android:stretchcolumns= "1" >
12. <TableRow>
14. <textview
16. android:layout_column= "1"
18. android:padding= "3dip" android:text= "Row1"/>
20. Ten <textview
22. android:text= "1"
24. Android:gravity= "Right"
26. android:padding= "3dip"/>
28. </TableRow>
30. <view
32. android:layout_height= "2dip"
34. android:background= "#FF909090"/>
36. <TableRow>
38. <textview
40. android:text= "*"
42. android:padding= "3dip"/>
44. <textview
46. android:text= "Row12"
48. android:padding= "3dip"/>
50. <textview
52. android:text= "2"
54. Android:gravity= "Right"
56. android:padding= "3dip"/>
58. </TableRow>
60. <view
62. android:layout_height= "2dip"
64. android:background= "#FF909090"/>
66. <TableRow>
68. <textview
70. android:layout_column= "1"
72. android:text= "Row13"
74. PNS android:padding= "3dip"/>
76. </TableRow>
78. </TableLayout>

Copy Code

Third, relativelayout (relative layout)

The relative layout of the child controls is relative layout based on the reference controls and parameters that they set. The reference control can be either a parent control or another child control, but the referenced control must be defined before the control that references it. The following is a simple example:
<ignore_js_op>

2. <?xml version= "1.0" encoding= "Utf-8"?>
4. <?xml version= "1.0" encoding= "Utf-8"?>
6. <relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
8. Android:layout_width= "Fill_parent"
10. android:layout_height= "Fill_parent"
12. >
14. <analogclock
16. Android:id= "@+id/aclock"
18. Android:layout_width= "Wrap_content"
20. Ten android:layout_height= "Wrap_content"
22. Android:layout_centerinparent= "true"/>
24. <digitalclock
26. Android:id= "@+id/dclock"
28. Android:layout_width= "Wrap_content"
30. android:layout_height= "Wrap_content"
32. android:layout_below= "@id/aclock"
34. android:layout_alignleft= "@id/aclock"
36. android:layout_marginleft= "40px"/>
38. <textview
40. Android:layout_width= "Wrap_content"
42. android:layout_height= "Wrap_content"
44. Android:text= "Current Time:"
46. android:layout_toleftof= "@id/dclock"
48. android:layout_aligntop= "@id/aclock"/>
50. </RelativeLayout>

Copy Code

Iv. absolutelayout (Absolute layout)

A child control of an absolute layout needs to specify a horizontal ordinate value relative to the layout of this coordinate, otherwise it will be arranged in the upper-left corner as if it were a frame layout. Mobile apps need to adapt to different screen sizes, and this layout model cannot be adapted to the size of the screen, so the application is relatively small. The following is an example of an absolute layout:
<ignore_js_op>

2. <?xml version= "1.0" encoding= "Utf-8"?>
4. <absolutelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
6. Android:layout_width= "Fill_parent"
8. android:layout_height= "Fill_parent"
10. >
12. <textview
14. Android:layout_width= "Wrap_content"
16. android:layout_height= "Wrap_content"
18. android:layout_x= "10px"
20. Ten android:layout_y= "10px" android:text= "Textview"/>
22. <textview
24. Android:layout_width= "Wrap_content"
26. android:layout_height= "Wrap_content"
28. android:layout_x= "30px"
30. Android:layout_y= "30px" android:text= "Textview"/>
32. <textview
34. Android:layout_width= "Wrap_content"
36. android:layout_height= "Wrap_content"
38. android:layout_x= "50px"
40. Android:layout_y= "50px" android:text= "Textview"/>
42. </AbsoluteLayout>

Copy Code

V. Framelayout (frame layout)


The frame layout is the simplest form of layout. All views added to this layout are displayed in a cascading fashion. The first added control is placed at the bottom, and the last view added to the frame layout is displayed at the top level, and the previous control overrides the next layer of control. This display is somewhat similar to a stack. Here's a simple example

<ignore_js_op>

2. <?xml version= "1.0" encoding= "Utf-8"?>
4. <framelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
6. Android:layout_width= "Fill_parent" android:layout_height= "Fill_parent" >
8. <linearlayout android:id= "@+id/linearlayout1"
10. android:layout_height= "Match_parent"
12. Android:layout_width= "Match_parent" >
14. <button android:text= "button"
16. Android:id= "@+id/button1"
18. Android:layout_width= "Wrap_content"
20. Ten android:layout_height= "Wrap_content" ></Button>
22. </LinearLayout>
24. <linearlayout android:layout_width= "Match_parent"
26. Android:id= "@+id/linearlayout3"
28. android:layout_height= "Match_parent"
30. android:gravity= "Bottom|right" >
32. <button android:text= "button"
34. Android:id= "@+id/button3"
36. Android:layout_width= "Wrap_content"
38. android:layout_height= "Wrap_content" ></Button>
40. </LinearLayout>
42. <linearlayout android:layout_height= "Match_parent"
44. Android:id= "@+id/linearlayout2"
46. Android:layout_width= "Match_parent"
48. Android:gravity= "Right" >
50. <button android:text= "button"
52. Android:id= "@+id/button2"
54. Android:layout_width= "Wrap_content"
56. android:layout_height= "Wrap_content" ></Button>
58. </LinearLayout>
60. <linearlayout android:layout_width= "Match_parent"
62. Android:id= "@+id/linearlayout01"
64. android:layout_height= "Match_parent"
66. android:gravity= "Bottom|left" >
68. <button android:id= "@+id/button01"
70. android:text= "button"
72. Android:layout_width= "Wrap_content"
74. PNS android:layout_height= "Wrap_content" ></Button>
76. </LinearLayout>
78. </FrameLayout>

Copy Code

Here are some of the important attributes that Relativelayout uses:

First Class: Property value is True or False
Android:layout_centerhrizontal Horizontal Center
Android:layout_centervertical Vertical Center
Android:layout_centerinparent is completely centered relative to the parent element
Android:layout_alignparentbottom snaps to the bottom edge of the parent element
Android:layout_alignparentleft snaps to the left edge of the parent element
Android:layout_alignparentright snaps to the right edge of the parent element
Android:layout_alignparenttop snaps to the top edge of the parent element
android:layout_alignwithparentifmissing if the corresponding sibling element cannot be found, then the parent element is the reference.

Second class: The attribute value must be the reference name of the id "@id/id-name"
Android:layout_below at the bottom of an element
Android:layout_above at the top of an element
Android:layout_toleftof on the left side of an element
Android:layout_torightof on the right side of an element

Android:layout_aligntop aligns the top edge of this element with the top edge of an element
Android:layout_alignleft aligns the left edge of this element with the left edge of an element
Android:layout_alignbottom aligns the bottom edge of this element with the bottom edge of an element
Android:layout_alignright aligns the right edge of this element with the right edge of an element

Class III: Attribute values are specific pixel values, such as 30dip,40px
Android:layout_marginbottom distance from the bottom edge of an element
Android:layout_marginleft distance from the left edge of an element
Android:layout_marginright distance from the right edge of an element
Android:layout_margintop distance from the top edge of an element

Excerpt from: http://bbs.chinaunix.net/thread-3654213-1-1.html

Five major layouts for Android development