Android layout Layout

There are many controls in an android view. How can we control their location arrangement? We need containers to store these controls and control their location arrangement. Just like Div and table in HTML, Android layout also plays the same role.

Android layout mainly includes the following types: linearlayout, relativelayout, tablelayout, and absolutelayout. the last absolutelayout is located by specifying the x/y coordinates of the control. It is not flexible and is not recommended.

 

(1) linearlayout

Linearlayout linear layout, including controls in linearlayout arranged in order into one row or one column, similar to flowlayout in swing and stackpanel in Silverlight. Its common attributes include:

Orientation direction: Specifies whether linearlayout represents a row or a column. It can be horizontal or vertical, for example, Android: Orientation = "vertical". Of course, you can alsoCodeIn the setorientation () method.

Fill mode fill mode. All controls in linearlayout must specify the fill mode, that is, set Android: layout_width and Android: layout_height, which can be three values (1) specific pixel values, for example, 20px (2) wrap_content indicates that the display is based on the actual length of the control text (3) fill_parent, indicating that all available space is filled.

Weight weight. If you want to display one row or one column of controls proportionally, the weight will work at this time, if you want to double the space of one of the two controls in one row to that of the other, you can set Android: layout_weight of one control to 1 and 2 of the other.

 

In the previous Android message prompt box and dialog box, there is also a linearlayout example. Now let's take a look at an official Android Demo:

<? 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"> <linearlayout Android: orientation = "horizontal" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1"> <textview Android: text = "red" Android: gravity = "center_horizontal" Android: Background = "# aa0000" Android: layout_width = "wrap_content" Android: layout_height = "fill_parent" Android: layout_weight = "1"/> <textview Android: TEXT = "green" Android: gravity = "center_horizontal" Android: Background = "#00aa00" Android: layout_width = "wrap_content" Android: layout_height = "fill_parent" Android: layout_weight = "1"/> <textview Android: text = "blue" Android: gravity = "center_horizontal" Android: Background = "# tianaa" Android: layout_width = "wrap_content" Android: layout_height = "fill_parent" Android: layout_weight = "1"/> <textview Android: text = "yellow" Android: gravity = "center_horizontal" Android: Background = "# aaaa00" Android: layout_width = "wrap_content" Android: layout_height = "fill_parent" Android: layout_weight = "1"/> </linearlayout> <linearlayout Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: layout_weight = "1"> <textview Android: text = "row one" Android: textsize = "15pt" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_weight = "1"/> <textview Android: text = "row two" Android: textsize = "15pt" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_weight = "1"/> <textview Android: text = "Row Three" Android: textsize = "15pt" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_weight = "1"/> <textview Android: text = "row four" Android: textsize = "15pt" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_weight = "1"/> </linearlayout>

We can see that the parent class linearlayout contains a horizontal layout of linearlayout and a vertical layout of linearlayout. They contain four textviews with equal width and height. The running effect is as follows:

 

 

(2) relativelayout

Relative layout, which is arranged and displayed by the relative positions of other controls in the same container as the parent container. Common attributes are as follows:

 

Attributes of the parent container:

Android: layout_alignparenttop: The top of the control is aligned with the top of the parent container. Similar attributes can be seen from the name: Android: container, Android: layout_alignparentleft, Android: layout_alignparentright.

 

Attributes of other controls in the same container:

Android: layout_above: indicates that this control is on another control. For example, Android: layout_below, Android: layout_toleftof, and Android: layout_torightof.

Android: layout_aligntop: indicates that the control is aligned with the top of the Control. Similarly, Android: layout_alignbottom, Android: layout_alignleft, and Android: layout_alignright.

 

Since it is relative to another control, you must specify the control when defining this control. For example, the ID of control a is @ + ID/widget_a, to set control B under control a, set Android: layout_below = "@ ID/widget_a ".

 

Let's take a look at an official Demo:

<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent"> <textview Android: Id = "@ + ID/label" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: text = "type here:"/> <edittext Android: Id = "@ + ID/entry" Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: Background = "@ Android: drawable/editbox_background" Android: layout_below = "@ ID/label"/> <button Android: id = "@ + ID/OK" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_below = "@ ID/entry" Android: layout_alignparentright = "true" Android: layout_marginleft = "10dip" Android: text = "OK"/> <button Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_toleftof = "@ ID/OK" Android: layout_aligntop = "@ ID/OK" Android: text = "cancel"/> </relativelayout>

 

The running effect is as follows:

 

(3) tablelayout

Table layout is similar to the HTML table and Silverlight grid. You can use tablerow to define a row. If a control occupies multiple columns, you can set Android: layout_span, similar to HTML colspan. By default, a control is placed in each column in order (column 0, column 1 ....), You can also use Android: layout_column to specify which column to store. If the content of a column is too long or too short, you can use Android: stretchcolumns and Android: shrinkcolumns to increase or decrease the width of the column.

 

Let's take a look at an official Demo:

<Tablelayout xmlns: Android = "http://schemas.android.com/apk/res/android" Android: layout_width = "fill_parent" Android: layout_height = "fill_parent" Android: stretchcolumns = "1"> <tablerow> <textview Android: layout_column = "1" Android: text = "open... "Android: padding =" 3dip "/> <textview Android: text =" Ctrl-o "Android: gravity =" right "Android: padding = "3dip"/> </tablerow> <textview Android: layout_column = "1" Android: text = "save... "Android: padding =" 3dip "/> <textview Android: text =" Ctrl-s "Android: gravity =" right "Android: padding = "3dip"/> </tablerow> <textview Android: layout_column = "1" Android: text = "Save... "Android: padding =" 3dip "/> <textview Android: text =" Ctrl-shift-s "Android: gravity =" right "Android: padding = "3dip"/> </tablerow> <view Android: layout_height = "2dip" Android: Background = "# ff909090"/> <tablerow> <textview Android: TEXT = "X" Android: padding = "3dip"/> <textview Android: text = "import... "Android: padding =" 3dip "/> </tablerow> <textview Android: text =" X "Android: padding =" 3dip "/> <textview Android: TEXT = "Export... "Android: padding =" 3dip "/> <textview Android: text =" Ctrl-e "Android: gravity =" right "Android: padding = "3dip"/> </tablerow> <view Android: layout_height = "2dip" Android: Background = "# ff909090"/> <tablerow> <textview Android: layout_column = "1" Android: text = "quit" Android: padding = "3dip"/> </tablerow> </tablelayout>

 

This table has three columns. The width of the second column is increased by setting Android: stretchcolumns = "1. The running effect is as follows:

 

 

I hope this article will help you.ArticleAs follows:

The main. Out. xml file is generated during Android program debugging.

Use git and repo to obtain the android source code

Introducing Android

Hello android

Android project structure (project structure)

Android message prompt box and dialog box

 

Reference books: Beginning Android 2 and Android official documents