Android Five layout layouts



Android Development, we may encounter some very complex layout, for beginners, may be the brain will hum, "so complex!" What's the whole?! ”。

Don't worry! The complexity of the layout is also composed of simple layout, we have to learn to break it down into the basic layout, then the problem is solved.

There are five common layouts for Android, namely: LinearLayout (Linear layout), Framelayout (single frame layout), Absolutelayout (absolute layout), relativelayout (relative layout), Tablelayout (table layout).

Let's look at the relationship of these layouts first

From this we can see that all layouts can be categorized into 5 categories of viewgroup, 5 direct subclasses of ViewGroup. Some of the other layouts are extended from these 5 classes.

First, linearlayout, linear layout mode

This layout is more commonly used, it is also relatively simple, that is, each element occupies a row, can be declared as horizontal or vertical emissions, that is, each element occupies a column.

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 One-third of the remaining space, and the second text box will occupy two-thirds of the remaining space.

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Fill_parent" android:layout_height= "fill_parent" android:orientation= "vertical" > <textview android:layout_width= "fi Ll_parent "android:layout_height=" 30DP "android:background=" @android: Color/holo_blue_bright "/> <Li Nearlayout android:layout_width= "fill_parent" android:layout_height= "30DP" android:orientation= "Horiz Ontal "> <textview android:layout_width=" wrap_content "android:layout_height=" Fill_pare NT "android:layout_weight=" 0.2 "android:background=" @android: Color/holo_green_dark "/> &lt ; TextView android:layout_width= "wrap_content" android:layout_height= "Fill_parent" Android: layout_weight= "0.3" android:background= "@android: Color/holo_orange_dark"/> <textview A Ndroid:layout_width= "Wrap_coNtent "android:layout_height=" fill_parent "android:layout_weight=" 0.3 "Android:background = "@android: Color/holo_blue_light"/> <!--android:layout_weight= "0.3" Effect: child controls are proportional to the parent control, i.e. 0.3/(0.2        +0.3+0.3), it is important to note that if there is a child control in the parent layout that has a weight value, the other child controls that are in the parent layout have to be present, otherwise they will not be displayed.         -</LinearLayout> <linearlayout android:layout_width= "80DP" android:layout_height= "60DP" Android:layout_marginbottom= "20DP" android:layout_marginleft= "20DP" android:background= "@android: Col Or/holo_red_dark "> <!--it is easy to see that android:layout_marginbottom=" 20DP "(away from the bottom 20dp) does not work because LinearLayout is a control next to a cloth Bureau--</LinearLayout></LinearLayout>

:

ii. Relative Layout, relative layouts

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, android:layout_centervertical and so on. Note When you specify a location relationship, the ID of the reference must be defined before the reference, or an exception will occur.

Relativelayout is one of the most flexible layout structures in the Android five layout structure, and is more suitable for some complex interface layouts. Beginners can use the visual editor to drag controls directly to the specified location to familiarize themselves with the relevant positional properties.

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Fill_parent" android:layout_height= "Fill_parent" > <textview android:id= "@+id/a1" android:layout_width= "5       0DP "android:layout_height=" 60DP "android:background=" @android: Color/holo_green_dark "/> <textview Android:id= "@+id/a2" android:layout_width= "70DP" android:layout_height= "60DP" Android:layout_alignpa Renttop= "true" android:layout_marginleft= "36DP" android:layout_torightof= "@+id/a1" android:background= "@       Android:color/holo_blue_bright "/> <textview android:id=" @+id/a3 "android:layout_width=" 30DP " android:layout_height= "60DP" android:layout_toendof= "@id/a1" android:background= "@android: color/holo_orange_d Ark "/> <!--What is the difference between layout_toendof and layout_torightof?? --<textview android:id= "@+id/a4" android:layout_width= "70DP "android:layout_height=" 60DP "android:layout_marginleft=" 36DP "android:layout_below=" @id/a2 "a Ndroid:background= "@android: Color/black"/> <textview android:id= "@+id/a5" android:layout_width= "90DP       "Android:layout_height=" 30DP "android:layout_marginleft=" 36DP "android:layout_alignparentright=" true " Android:layout_alignparentbottom= "true" android:background= "@android: Color/holo_purple"/> </relati Velayout>

：

three, absolutelayout, 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.

<absolutelayout    xmlns:android= "http://schemas.android.com/apk/res/android"     android:layout_width= " Fill_parent "     android:layout_height=" fill_parent "  >  <textview       android:layout_width=" 90DP "      android:layout_height= "30DP"      android:layout_x= "0DP"      android:layout_y= "0DP"      android:background = "@android: Color/holo_orange_dark"/>   <textview       android:layout_width= "90DP"      android:layout _height= "50DP"      android:layout_x= "100DP"      android:layout_y= "200DP"      android:background= "@android: Color/holo_blue_light "/>   <!--absolute Layout is written dead coordinates, does not have the suitability, does not recommend the use of--></absolutelayout>

：

Four, framelayout, frame layout

Framelayout is the simplest layout in the five layouts , which can be described as a layer layout. In this layout, the entire interface is treated as a blank alternate 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, partially and completely obscured by the preceding child elements. The Android:gravity property is invalidated, but can be changed by Layout_marginleft and so on.

<framelayout    xmlns:android= "http://schemas.android.com/apk/res/android"     android:layout_width= "Fill_ Parent "     android:layout_height=" fill_parent "  >        <textview         android:layout_width=" 300DP "        android:layout_height= "300DP"        android:background= "@android: Color/holo_blue_bright"/>     < TextView         android:layout_width= "200DP"        android:layout_height= "200DP"        android:background= "@android : Color/holo_green_light "/>      <textview         android:layout_width=" 100DP "        android:layout_height=" 100DP "        android:layout_marginleft=" 60DP "        android:gravity=" bottom "        android:background=" @android: Color/holo_red_dark "/>    <!--Gravity Invalid property--        </FrameLayout>

：

v. Tablelayout, table layout

The layout format that applies to n rows n columns. A tablelayout is made up of many TableRow, and a tablerow represents a row in tablelayout.

TableRow is a subclass of LinearLayout, Ablellayout does not need to explicitly declare how many rows, how many columns, but TableRow, and other components to control the number of rows and columns of the table, TableRow is also a container, So you can add other components to TableRow and add a column to the table without adding a component. If you want to add a component to the Tablelayout, the component takes up a row directly. In a table layout, the width of the column is determined by the widest cell in the column, and the width of the entire table layout depends on the width of the parent container (which, by default, fills the parent container itself).

Tablelayout inherits LinearLayout, so he can fully support all the XML attributes supported by LinearLayout, in addition to the following properties Tablelayout support:

XML attribute related usage description

1. Andriod:collapsecolumns setcolumnscollapsed (int, Boolean) sets the sequence number of the column that needs to be hidden, with multiple comma-separated

2.android:shrinkcolumns Setshrinkallcolumns (Boolean) sets the serial number of the column that is shrunk, with multiple comma-separated

3.android:stretchcolimns Setsretchallcolumnds (Boolean) sets the sequence number of columns that are allowed to be stretched, separated by commas

<tablelayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Fill_parent" a ndroid:layout_height= "Fill_parent" > <tablerow android:id= "@+id/tablerow1" Androi                 D:layout_width= "Wrap_content" android:layout_height= "wrap_content" > <textview Android:layout_width= "80DP" android:layout_height= "40DP" android:background= "@android: Color /holo_blue_dark "/> <textview android:layout_width=" 80DP "Android:layout_h eight= "40DP" android:background= "@android: Color/holo_red_dark"/> </TableRow> <tab Lerow android:id= "@+id/tablerow2" android:layout_width= "Wrap_content" Android:layout_heig ht= "wrap_content" android:orientation= "vertical" > <textview android:layout_wi             Dth= "200DP"   android:layout_height= "40DP" android:background= "@android: Color/holo_red_dark"/> <text View android:layout_width= "10DP" android:layout_height= "40DP" android:backgr Ound= "@android: Color/holo_green_dark"/> </TableRow> <tablerow android:id= "@+id/tabler Ow3 "android:layout_width=" wrap_content "android:layout_height=" wrap_content "> <te Xtview android:layout_width= "80DP" android:layout_height= "40DP" Android:back Ground= "@android: Color/holo_green_dark"/> </TableRow> <tablerow android:i            D= "@+id/tablerow4" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" >                <textview android:layout_width= "80DP" android:layout_height= "40DP" Android:background= "@aNdroid:color/holo_blue_dark "/> </TableRow> <!--the width of the column is consistent??? --></tablelayout>

: (Actual size of red)

Demo Address: http://download.csdn.net/detail/u011747781/8481315

Some common property values for Android layout file Layout.xml: http://blog.csdn.net/google_acmer/article/details/44119741



Android Five layout layouts