A brief analysis of the Android five layouts (linearlayout, framelayout, relativelayout, etc.) _android

The Android interface has a layout and components that work together, and the layout is like a frame in a building, and the component is equivalent to the bricks and mortar in the building. The components are arranged in order according to the layout requirements and form the interface that the user sees. Android's five major layouts are linearlayout (linear layout), Framelayout (single frame layout), relativelayout (relative layout), Absolutelayout (absolute layout) and tablelayout (table layout).

Layout One: LinearLayout

LinearLayout arranges child elements in either vertical or horizontal order, and each child element is positioned after the previous element. If it is vertically arranged, it will be a single n-row structure with only one element per row, regardless of the width of the element, and if it is horizontal, it will be a single row n column structure. If you build two rows of two columns, the usual way is to arrange the two elements vertically, and each element contains a linearlayout for horizontal arrangement.

The child element attribute Android:layout_weight in LinearLayout, which describes the proportions of the child element in the remaining space. To join a line with only one text box, the default value is 0, and if there are two equal-length text boxes in a row, their android:layout_weight value can be equal to 1. If there are two unequal text boxes in a row, their android:layout_weight values are 1 and 2, then the first text box occupies two-thirds of the remaining space, and the second text box occupies One-third of the remaining space. Android:layout_weight follows the principle that the smaller the number, the higher the importance. The display effect is as follows:

 LinearLayout <?xml version= "1.0" encoding= "Utf-8"?> <linearlayout Xmlns:andr Oid= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" android:layout_width= "Fill_" Parent "android:layout_height=" fill_parent "> <textview android:layout_width=" fill_parent "Android:layout_ height= "Wrap_content" android:background= "#ff000000" android:text= "@string/hello"/> <linearlayout rientation= "Horizontal" android:layout_width= "Fill_parent" android:layout_height= "fill_parent" > <TextView Android:layout_width= "Fill_parent" android:layout_height= "wrap_content" android:background= "#ff654321" Android: layout_weight= "1" android:text= "1"/> <textview android:layout_width= "Fill_parent" 
 Wrap_content "android:background=" #fffedcba "android:layout_weight=" 2 "android:text=" 2 "/> </LinearLayout> </LinearLayout> 

Layout Two: framelayout

Framelayout is one of the simplest layouts in the five major layouts, in this layout, the entire interface is treated as a blank standby area where all the child elements cannot be specified, all placed in the upper-left corner of the area, and the following child elements are directly covered above the preceding child elements, Block and block the elements in front of the child. The display effect is as follows, the first TextView is completely obscured by the second TextView, and the third TextView blocks part of the second TextView.

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

Layout Three: absolutelayout

Absolutelayout is an absolute position layout. The android:layout_x and Android:layout_y properties of the 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 right move this value increases, the second 0 represents the ordinate, moves downward, this value increases. Child elements in this layout can overlap each other. In actual development, this layout format is not usually used, because its interface code is too rigid to be able to fit a variety of terminals well. The display effect is as follows:

Absolutelayout 
 <?xml version= "1.0" encoding= "Utf-8"?> <absolutelayout "xmlns:android=" http:// 
 Schemas.android.com/apk/res/android "android:orientation=" vertical "android:layout_width=" Fill_parent "Android: layout_height= "Fill_parent" > 
 <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" > 
 <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"/> 
 <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"/> 
 </AbsoluteLayout> 

Layout four:relativelayout

Relativelayout completes the layout according to the position relationship between the child elements. Position-related properties in child elements in this layout will take effect. such as Android:layout_below, Android:layout_above and so on. The child elements match the specified location relationship with these properties and their respective IDs. Note When you specify a location relationship, the ID of the reference must be defined before the reference, or an exception will occur.

The commonly used location properties in Relativelayout are as follows:
android:layout_toleftof--This component is located to the left of the referencing component
android:layout_torightof--the component is located to the right of the referencing component
android:layout_above--the component is above the referenced component
android:layout_below--the component is located below the referenced component
android:layout_alignparentleft--whether the component aligns to the left end 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 is aligned 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 centered vertically

Relativelayout is one of the most flexible layout structures in the five Android layouts, which is more suitable for the layout of some complex interfaces. The following example shows a situation in which the first text box is aligned to 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.

Relativelayout <?xml version= "1.0" encoding= "Utf-8"?> <relativelayout "xmlns:android=" http:// Schemas.android.com/apk/res/android "android:orientation=" vertical "android:layout_width=" Fill_parent "Android: layout_height= "Fill_parent" > <textview android: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"/> <textview android: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"/> <textview android: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=" 3 "/> </RelativeLayout>

Layout Five: tablelayout

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

TableRow is a subclass of LinearLayout, its android:orientation attribute value is horizontal, and its android:layout_width and Android:layout_ The Height property value is constant to match_parent and wrap_content. So its child elements are arranged horizontally, and are broadly consistent. This design makes the child elements in each TableRow equal to the cells in the table. In TableRow, cells can be empty, but they 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.

Tablelayout <?xml version= "1.0" encoding= "Utf-8"?> <tablelayout "xmlns:android=" http://schemas.android.com/ Apk/res/android "android:orientation=" vertical "android:layout_width=" fill_parent "android:layout_height=" Fill_ Parent "> <tablerow android:layout_width=" fill_parent "android:layout_height=" wrap_content "> <TextView Android:background= "#ffffffff" android:gravity= "center" android:padding= "10DP" android:text= "1"/> <textview Android:background= "#ff654321" android:gravity= "center" android:padding= "10DP" android:text= "2"/> <textview Android:background= "#fffedcba" android:gravity= "center" android:padding= "10DP" android:text= "3"/> </tablerow > <tablerow android:layout_width= "fill_parent" android:layout_height= "Wrap_content" > <TextView android: Background= "#ff654321" android:gravity= "center" android:padding= "10DP" android:text= "2"/> <textview android: Background= "#fffedcba" android:gravity= "center" android:padding= "10DP" android:text= "3"/> </TableRow> <tablerow android:layout_width= "fill_parent" android:layout_height= "wrap" _content "> <textview android:background=" #fffedcba "android:gravity=" center "android:padding=" 10DP "Android: text= "3"/> <textview android:background= "#ff654321" android:gravity= "center" android:padding= "10DP" Android: text= "2"/> <textview android:background= "#ffffffff" android:gravity= "center" android:padding= "10DP" Android:

 text= "1"/> </TableRow> </TableLayout>

The above is the entire content of this article, I hope to learn more about Android five layout help, but also hope that we support the cloud habitat community.