Android's five layouts (layout)

The Android interface is made up of layouts and components, and the layout is like a frame in the building, and the components are the bricks in the building. Components are arranged according to the layout requirements, which makes up the interface that the user sees. The five major layouts for Android are linearlayout (linear layout), Framelayout (single frame layout), relativelayout (relative layout), Absolutelayout (absolute layout), and Tablelayout (table layout).

　　LinearLayout:

LinearLayout arranges the child elements in a vertical or horizontal order, each of which is behind the previous element. If it is arranged vertically, it will be a single row of n rows of structure, each row will have only one element, regardless of the width of the element, if it is arranged horizontally, then it will be a single row n column structure. If two rows of two columns are constructed, the usual way is to arrange the two elements vertically, and each element contains a linearlayout to be arranged horizontally.

The child element attribute Android:layout_weight in LinearLayout takes effect, which is used to describe the size ratio of the child element in the remaining space. Add a row only a text box, then its default value is 0, if there are two equal-length text boxes in a row, then their android:layout_weight value can be the same as 1. If there are two unequal text boxes in a row, their android:layout_weight values are 1 and 2, respectively, then the first text box will occupy two-thirds of the remaining space, and the second text box will occupy One-third of the remaining space. Android:layout_weight follows the principle that the smaller the value, the higher the importance. The display results are as follows:

1 <?xml version= "1.0" encoding= "Utf-8"?>
2 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" Android:layout_width= "Fill_parent" android:layout_height= "Fill_parent" >
3 <textview  android:layout_width= "fill_parent" android:layout_height= "Wrap_content" android:background= "# ff000000 "android:text=" @string/hello "/>
4 <linearlayout android:orientation= "Horizontal" android:layout_width= "fill_parent" android:layout_height= "fill _parent ">
5 <textview  android:layout_width= "fill_parent" android:layout_height= "Wrap_content" android:background= "# ff654321 "android:layout_weight=" 1 "android:text=" 1 "/>
6 <textview  android:layout_width= "fill_parent" android:layout_height= "Wrap_content" android:background= "# FFFEDCBA "android:layout_weight=" 2 "  android:text=" 2 "/>
7 </LinearLayout>
8 </LinearLayout>

Framelayout:

Framelayout is the simplest layout in the five layouts, in which the entire interface is treated as a blank fallback area where all the child elements cannot be placed, they are placed in the upper left corner of the area, and the subsequent child elements are directly above the preceding child elements. Masks the preceding child elements partially and completely. The display works as follows, the first TextView is completely obscured by the second TextView, and the third TextView obscures part of the second TextView.

1 <?xml version= "1.0" encoding= "Utf-8"?>
2 <framelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" Android:layout_width= "Fill_parent" android:layout_height= "Fill_parent" >
3 <textview android:layout_width= "fill_parent" android:layout_height= "Fill_parent" android:background= "# ff000000 "android:gravity=" center "android:text=" 1 "/>
4 <textview android:layout_width= "fill_parent" android:layout_height= "Fill_parent" android:background= "# ff654321 "android:gravity=" center "android:text=" 2 "/>
5 <textview android:layout_width= "50DP" android:layout_height= "50DP" android:background= "#fffedcba" Android: gravity= "Center" android:text= "3"/>
6 </FrameLayout>

Absolutelayout:

Absolutelayout is an absolute position layout. The android:layout_x and Android:layout_y properties of child elements in this layout take effect and are used to describe the coordinate position of the child element. The upper-left corner of the screen is the coordinate origin (0,0), the first 0 represents the horizontal axis, the value is moved to the right, the second 0 represents the ordinate, and the value increases. Child elements in this layout can overlap each other. In real-world development, this layout is usually not used because its interface code is too rigid to be able to fit a variety of terminals well. The display results are as follows:

Relativelayout:

The relativelayout completes the layout according to the position relationship between the child elements. Position-related attributes in the child elements in this layout will take effect. such as Android:layout_below, Android:layout_above and so on. Child elements Specify a positional relationship through these attributes and their respective ID mates. Note When you specify a location relationship, the ID of the reference must be defined before the reference, or an exception will occur.

The location attributes commonly used in Relativelayout are as follows:
android:layout_toleftof--the component is on the left side of the reference component
android:layout_torightof--the component is on the right of the reference component
android:layout_above--the component is above the referencing component
android:layout_below--the component is below the reference component
android:layout_alignparentleft--whether the component aligns to the left side of the parent component
android:layout_alignparentright--whether the component is aligned to the right end of its parent component
android:layout_alignparenttop--whether the component aligns to the top of the parent component
android:layout_alignparentbottom--whether the component aligns to the bottom of the parent component
android:layout_centerinparent--whether the component is centered relative to the parent component
android:layout_centerhorizontal--whether the component is centered horizontally
android:layout_centervertical--whether the component is vertically centered

Relativelayout is one of the most flexible layout structures in the Android five layout structure, and is more suitable for some complex interface layouts. The following example shows a case where the first text box is aligned with the bottom of the parent component, the second text box is above the first text box, and the third text box is to the left of the second text box.

1<?XML version= "1.0" encoding= "Utf-8"?>
2<RelativelayoutXmlns:android= "Http://schemas.android.com/apk/res/android"Android:orientation= "Vertical"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent">
3<TextViewAndroid:id= "@+id/text_01"Android:layout_width= "50DP"Android:layout_height= "50DP"Android:background= "#ffffffff"Android:gravity= "Center"Android:layout_alignparentbottom= "true"Android:text= "1"/>
4<TextViewAndroid:id= "@+id/text_02"Android:layout_width= "50DP"Android:layout_height= "50DP"Android:background= "#ff654321"Android:gravity= "Center"Android:layout_above= "@id/text_01"Android:layout_centerhorizontal= "true"Android:text= "2"/>
5<TextViewAndroid:id= "@+id/text_03" Android:layout_width=" 50DP "  Android:layout_height=" 50DP "  Android:background=" #fffedcba "  Android:gravity= "center"  Android:layout_toleftof=" @id/text_02 " Android:layout_above= "@id/text_01"  android:text< Span style= "color: #0000ff;" >= "3" /> 
 6 </relativelayout>     

Tablelayout:

　　Tablelayout as the name implies, this layout is a table layout and applies to the layout format of n row n columns. A tablelayout is made up of many TableRow, and a tablerow represents a row in tablelayout.

TableRow is a subclass of LinearLayout, its Android:orientation property value is horizontal, and its android:layout_width and Android:layout_ The Height property value is constant match_parent and wrap_content. So its sub-elements are all horizontally aligned, and the width is high and consistent. This design allows each TableRow to be the same as the cells in the table. In TableRow, cells can be empty, but cannot span columns.

The following example shows a tablelayout layout structure where the second row has only two cells and the remaining rows are three cells.

1<?XML version= "1.0" encoding= "Utf-8"?>
2<TablelayoutXmlns:android= "Http://schemas.android.com/apk/res/android"Android:orientation= "Vertical"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent">
3<TableRowAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content">
4<TextViewAndroid:background= "#ffffffff"Android:gravity= "Center"Android:padding= "10DP"Android:text= "1"/>
5<TextViewAndroid:background= "#ff654321"Android:gravity= "Center"Android:padding= "10DP"Android:text= "2"/>
6<TextViewAndroid:background= "#fffedcba"Android:gravity= "Center"Android:padding= "10DP"Android:text= "3"/>
7</TableRow>
8<TableRowAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content">
9<TextViewAndroid:background= "#ff654321"Android:gravity= "Center"Android:padding= "10DP"Android:text= "2"/>
10<TextViewAndroid:background= "#fffedcba"Android:gravity= "Center"Android:padding= "10DP"Android:text= "3"/> 
11</TableRow>
12<TableRowAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content">
13<TextViewAndroid:background= "#fffedcba"Android:gravity= "Center"Android:padding= "10DP"Android:text= "3"/>
14<TextViewAndroid:background= "#ff654321"Android:gravity= "Center"Android:padding= "10DP"Android:text= "2"/>
15 <textview android:background= "#ffffffff"  android:gravity< Span style= "color: #0000ff;" >= "center"  Android:padding= "10DP"  Android:text= "1" />  
 16 </tablerow> 
 17 Span style= "color: #0000ff;" ></tablelayout>      

Source: http://www.cnblogs.com/wisekingokok/archive/2011/08/23/2150452.html

1 <?xml version= "1.0" encoding= "Utf-8"?>
2 <absolutelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" Android:layout_width= "Fill_parent" android:layout_height= "Fill_parent" >
3 <textview android:layout_width= "50DP" android:layout_height= "50DP" android:background= "#ffffffff" Android: gravity= "center" android:layout_x= "50DP" android:layout_y= "50DP" android:text= "1"/>
4 <textview android:layout_width= "50DP" android:layout_height= "50DP" android:background= "#ff654321" Android: gravity= "center" android:layout_x= "25DP" android:layout_y= "25DP" android:text= "2"/>
5 <textview  android:layout_width= "50DP" android:layout_height= "50DP" android:background= "#fffedcba" Android : gravity= "center" android:layout_x= "125DP" android:layout_y= "125DP" android:text= "3"/>
6 </AbsoluteLayout>

Android's five layouts (layout)