Android Five layout Tutorials linearlayout, framelayout, Absoultelayout, Relativelayout and Tablelayout

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.

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:

The code is as follows

Copy Code

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout 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= wrap_content "android:background=" # ff000000 "android:text=" @string/hello "/> <linearlayout android:orientation= "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" android:layout_height= wrap_content "android:background=" # FFFEDCBA "android:layout_weight=" 2 "android:text=" 2 "/> </LinearLayout> </LinearLayout>

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.

The code is as follows

Copy Code

<?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>

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:

The code is as follows

Copy Code

<?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>

The

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 location properties commonly used in the

Relativelayout are as follows:

android:layout_toleftof--The 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 referencing 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--the component 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 is aligned 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 largest Android layouts, and is more suited to 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.

The code is as follows

Copy Code

<?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>

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.

The code is as follows

Copy Code

<?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>