Five layout modes for Android

Android layout is an important part of application interface development. In Android, there are five layout Methods: LinearLayout (linear layout) and FrameLayout (Framework layout ).

Bureau), AbsoluteLayout (absolute layout), RelativeLayout (relative layout), TableLayout (table layout ).

In windows, the preview function is available. You can view the layout style in xml, which is not available in linux.

1. LinearLayout

Linear layout, which can be understood as a div from the external frame. First, it is listed one by one on the screen. Each LinearLayout can be divided into vertical layout (android: orientation = "vertical") and horizontal layout (android: orientation = "horizontal "). In vertical layout, each row has only one element, and multiple elements are vertical down in sequence. in horizontal layout, there is only one row, and each element is arranged to the right in sequence.

LinearLayout has an important attribute android: layout_weight = "1". In vertical layout, this weight represents the line spacing; in horizontal layout, it represents the column width; the larger the weight value, the larger the value.

The preview in the linear layout is exactly the same as that in the real machine.

TextView occupies a certain amount of space and has a certain width and height without a value assignment. Pay special attention to this.

Ii. FrameLayout

FrameLayout is the simplest layout object. It is customized as a blank standby area on your screen, and then you can fill in a single object-for example, an image you want to publish. All child elements are fixed in the upper left corner of the screen. You cannot specify a position for a child element in FrameLayout. The next child element directly overwrites the previous child element and blocks them in part or whole (unless the last child element is transparent ).

Iii. AbsoluteLayout

The layout of AbsoluteLayout is very simple. The main attribute is that layout_x and layout_y define the absolute position of the component respectively. That is, the x and y values of the coordinate axes (0, 0) in the upper left corner of the screen increase when the coordinate values move downward or to the right. AbsoluteLayout has no page border and allows elements to overlap with each other (although not recommended ). We generally do not recommend AbsoluteLayout unless you have a legitimate reason to use it, because it makes the interface code too rigid, so that it can work well on different devices.

Iv. RelativeLayout

The relative layout can be understood as the layout method for positioning an element as a reference object.

Android: layout _ direction = id indicates that the id corresponds to the control direction (up | down)

Android: layout_align direction = id indicates alignment with the control (upper-lower-left)

Android: layout_to direction Of = id indicates to the left or right Of the control
Eg:
Android: layout_below = "@ id/la1"/>
Place the current control under the control with the id of la1.
Android: layout_alignParentRight = "true"
Align the right end of the current control with the right end of the parent control. The attribute value can only be true or false. The default value is false.
Android: layout_marginLeft = "10dip"
Empty space on the left of the current control.
Android: layout_toLeftOf = "@ id/true"
Place the current control on the left of the control whose id is true.
Android: layout_alignTop = "@ id/OK"
Align the current control with the upper end of the control with the id of OK.

 

5. TableLayout

The Table layout is similar to the Table in Html. Each TableLayout contains the table row TableRow, which can define each element. Each TableRow defines a row (in fact, you can define other sub-objects, which will be explained below ). The TableLayout container does not display the border lines of row, cloumns, or cell. Each row has 0 or more cells, and each cell has one View object. A table consists of columns and rows in multiple cells. The table allows cells to be empty. Cells cannot span columns, which is different from HTML.
TabRow only applies to rows, regardless of columns (custom columns ).

Each layout has its own method. In addition, these five layout elements can be nested with each other to create a beautiful interface.
Example:

1 linear layout (LinearLayout)

Description: The simplest Layout mode. The layout is arranged down in sequence.

<? 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">
<Button android: text = "Up"
Android: id = "@ + id/Button03"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"> </Button>

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: orientation = "horizontal"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<Button android: text = "left"
Android: id = "@ + id/Button01"
Android: width = "120px"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"> </Button>
<Button
Android: text = "right"
Android: id = "@ + id/Button02"
Android: width = "120px"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"> </Button>
</LinearLayout>
</LinearLayout>

 

2. Table layout (TableLayout)

Description: adds a View or <TableRow> </TableRow> Control in the middle of an HTML table.

<? Xml version = "1.0" encoding = "UTF-8"?>
<TableLayout
Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: id = "@ + id/TableLayout01"
Android: layout_width = "fill_parent" android: layout_height = "fill_parent">
<TableRow android: gravity = "center">
<Button
Android: text = "@ + id/Button01"
Android: id = "@ + id/Button01"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content">
</Button>
</TableRow>
<TableRow android: gravity = "center">
<TextView android: text = "column 0th of the first row"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"> </TextView>
<TextView android: text = "column 1st of the first row"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"> </TextView>
</TableRow>
<TableRow android: gravity = "center">
<TextView android: text = "0th columns in the second row"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"> </TextView>
<TextView android: text = "1st columns in the second row"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"> </TextView>
</TableRow>
</TableLayout>

 

3. Single Frame layout (FrameLayout)

Description: similar to HTML cascade.

<? Xml version = "1.0" encoding = "UTF-8"?>
<FrameLayout
Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content">
<ImageView
Android: id = "@ + id/ImageView01"
Android: src = "@ drawable/circle_blue"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content">
</ImageView>
<ImageView
Android: id = "@ + id/ImageView02"
Android: src = "@ drawable/circle_green"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content">
</ImageView>
<ImageView
Android: id = "@ + id/ImageView03"
Android: src = "@ drawable/circle_red"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content">
</ImageView>

</FrameLayout>

 

4. RelativeLayout)

Description: It depends on the layout of the reference control. Both the parent control and child control can be used.
Common attributes: android: layout_centerInParent = "true/false"
Android: layout_abve, android: layout_below
Android: layout_alignleft, android: layout_alignright.

 

<? Xml version = "1.0" encoding = "UTF-8"?>
<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "fill_parent" android: layout_height = "fill_parent">
<Button
Android: id = "@ + id/btnmiddle"
Android: text = "MiddleButton"
Android: layout_width = "200px"
Android: layout_height = "wrap_content"
Android: layout_centerInParent = "true">
</Button>
<Button
Android: id = "@ + id/btnup"
Android: text = "UpButton"
Android: layout_width = "100px"
Android: layout_height = "wrap_content"
Android: layout_above = "@ id/btnmiddle"
Android: layout_alignLeft = "@ id/btnmiddle">
</Button>
<Button
Android: id = "@ + id/btndown"
Android: text = "downButton"
Android: layout_width = "100px"
Android: layout_height = "wrap_content"
Android: layout_below = "@ id/btnmiddle"
Android: layout_alignRight = "@ id/btnmiddle">
</Button>
</RelativeLayout>

 

5. Coordinate layout (AbsoluteLayout)

Description: The widget is directly located to increase flexibility.
Common attributes: android: layout_x, android: layout_y.

<? Xml version = "1.0" encoding = "UTF-8"?>
<AbsoluteLayout
Xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content">

<TextView
Android: layout_width = "wrap_content"
Android: text = "UserName :"
Android: layout_height = "wrap_content"
Android: id = "@ + id/tvName"
Android: layout_y = "20dip"
Android: layout_x = "50dip">
</TextView>
<TextView
Android: layout_width = "wrap_content"
Android: text = "Password :"
Android: layout_height = "wrap_content"
Android: id = "@ + id/tvPassword"
Android: layout_y = "100dip"
Android: layout_x = "55dip">
</TextView>

<EditText
Android: layout_width = "150px"
Android: layout_height = "wrap_content"
Android: id = "@ + id/tvPassword"
Android: layout_y = "10dip"
Android: layout_x = "120dip">
</EditText>
<EditText
Android: layout_width = "150px"
Android: layout_height = "wrap_content"
Android: id = "@ + id/tvPassword"
Android: layout_y = "90dip"
Android: layout_x = "120dip">
</EditText>
</AbsoluteLayout>

 

Package com. jay. Layout;

Import android. app. Activity;
Import android. OS. Bundle;
Import android. view. View;
Import android. view. View. OnClickListener;
Import android. widget. Button;

 

Public class MyLayout extends Activity {
/** Called when the activity is first created .*/
Private Button btnLinearlayout;

Private Button btnTablayout;

Private Button btnRelativelayout;

Private Button btnFramelayout;

Private Button btnAbsolutelayout;

OnClickListener listener;

@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
CreateControl ();

Listener = new OnClickListener (){

@ Override
Public void onClick (View v ){
// TODO Auto-generated method stub
Switch (v. getId ()){
Case R. id. btnlinearlayout:
SetTitle ("linear layout ");
SetContentView (R. layout. linearlayout );
Break;
Case R. id. btntableayout:
SetTitle ("table layout ");
SetContentView (R. layout. tablelayout );
Break;
Case R. id. btnrelativelayout:
SetTitle ("relative layout ");
SetContentView (R. layout. relativelayout );
Break;
Case R. id. btnfreamelayout:
SetTitle ("single frame layout ");
SetContentView (R. layout. framelayout );
Break;
Case R. id. btnabsolutelayout:
SetTitle ("coordinate layout ");
SetContentView (R. layout. absolutelayout );
Break;
}
}
};
BtnLinearlayout. setOnClickListener (listener );
BtnTablayout. setOnClickListener (listener );
BtnRelativelayout. setOnClickListener (listener );
BtnFramelayout. setOnClickListener (listener );
BtnAbsolutelayout. setOnClickListener (listener );
}

Private void CreateControl (){
// TODO Auto-generated method stub
BtnLinearlayout = (Button) findViewById (R. id. btnlinearlayout );
BtnTablayout = (Button) findViewById (R. id. btntableayout );
BtnRelativelayout = (Button) findViewById (R. id. btnrelativelayout );
BtnFramelayout = (Button) findViewById (R. id. btnfreamelayout );
BtnAbsolutelayout = (Button) findViewById (R. id. btnabsolutelayout );
}
}