Android development road 4 --- Layout

Android development road 4 ------- Layout

The layout of Android is mainly divided into four types in the main window: LinerLayout (linear layout), RelativeLayout (relative layout), TableLayout (table layout), and FreamLayout (frame layout ). The following describes in detail the features of these four la S.

 

I. LinerLayout Layout

The linear layout means that all the child elements under the label will be determined by row or column based on the value of their orientation attribute. Let's take a look at the code.

<? Xml version = "1.0" encoding = "UTF-8"?>

<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 = "fill_parent"

Android: layout_height = "wrap_content"

Android: text = "@ string/name_text"

/>

<TableLayout

Android: layout_width = "match_parent"

Android: layout_height = "match_parent"

Android: stretchColumns = "2, 1"

>

<TableRow>

<TextView

Android: layout_width = "fill_parent"

Android: layout_height = "wrap_content"

Android: text = "@ string/yh_text"

/>

<EditText

Android: layout_width = "fill_parent"

Android: layout_height = "wrap_content"/>

</TableRow>

<TableRow>

<TextView

Android: layout_width = "fill_parent"

Android: layout_height = "wrap_content"

Android: text = "@ string/mm_text"/>

<EditText

Android: layout_width = "fill_parent"

Android: layout_height = "wrap_content">

</EditText>

</TableRow>

<RelativeLayout

Android: layout_width = "fill_parent"

Android: layout_height = "wrap_content">

<Button

Android: id = "@ + id/button1"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_alignParentLeft = "true"

Android: layout_alignParentTop = "true"

Android: layout_marginLeft = "96dp"

Android: text = "@ string/OK _input"/>

<Button

Android: Id = "@ + ID/cancel_button"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_alignparenttop = "true"

Android: layout_marginleft = "20dp"

Android: layout_torightof = "@ + ID/button1"

Android: text = "@ string/cancel_input"/>

</Relativelayout>

</Tablelayout>

</Linearlayout>

This is a log-on interface that uses linear layout, but in order to make it beautiful, the relative layout and table layout are nested.

Android: Orientation = "vertical" is the key to linear layout. Vertical defines display in orientation, and vertical displays by column. Run it.

This is a login interface that uses linear layout.

2. relativelayout Layout

The view components in the relative layout are determined by the relative positions of each other, and are not displayed by row or column as in the linear layout. The instance code

<? XML version = "1.0" encoding = "UTF-8"?>

<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android"

Android: layout_width = "match_parent"

Android: layout_height = "match_parent">

<Button

Android: Id = "@ + ID/button1"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_alignparentleft = "true"

Android: layout_alignparenttop = "true"

Android: layout_marginleft = "42dp"

Android: layout_margintop = "50dp"

Android: text = "button"/>

<Button

Android: Id = "@ + ID/button2"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_alignBaseline = "@ + id/button1"

Android: layout_alignBottom = "@ + id/button1"

Android: layout_alignParentRight = "true"

Android: layout_marginRight = "56dp"

Android: text = "Button"/>

<Button

Android: id = "@ + id/button4"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_alignLeft = "@ + id/button1"

Android: layout_centerVertical = "true"

Android: text = "Button"/>

<Button

Android: id = "@ + id/button5"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_alignBaseline = "@ + id/button4"

Android: layout_alignBottom = "@ + id/button4"

Android: layout_alignLeft = "@ + id/button2"

Android: text = "Button"/>

<Button

Android: id = "@ + id/button3"

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: layout_above = "@ + id/button5"

Android: layout_centerHorizontal = "true"

Android: layout_marginBottom = "34dp"

Android: text = "Button"/>

</RelativeLayout>

This is to use the Button to implement a graph to describe the usefulness of relative layout. We can use some coordinates to realize the location of the current object.

3. tablelayout Layout

The table layout style is similar to that in the HTML table, that is, the labels used are different. The display effect is the same. The <tablelayout> label is a top-level element and is written in the header, to define the entire table. <tablerow> is the definition row. <textvew> defines the content in a cell, which is equivalent to the content in the cell like the <TD> tag in HTML.

Instance to demonstrate the application of table layout

<? XML version = "1.0" encoding = "UTF-8"?>

<Tablelayout xmlns: Android = "http://schemas.android.com/apk/res/android"

Android: layout_width = "match_parent"

Android: layout_height = "match_parent"

Android: stretchcolumns = "*"

>

<Tablerow>

<Textview

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/name"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/gender"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/age"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/phonenumber"

/>

</TableRow>

<TableRow>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/namezs"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/genderzs"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/agezs"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/phonenumberzs"

/>

</TableRow>

<TableRow>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/namely"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/genderly"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/agely"

/>

<TextView

Android: layout_width = "wrap_content"

Android: layout_height = "wrap_content"

Android: text = "@ string/phonenumberly"

/>

</Tablerow>

</Tablelayout>

Android: stretchcolumns = "*"

Is the table size defined in the table * is the average score.

The displayed result is

The name, gender, age, and phone number are displayed in a table.

Four freamlayout Layout

Each component in the frame layout is equivalent to a frame. By default, the origin is (0, 0) in the upper left corner of the mobile phone screen, which is displayed by screen in sequence according to the defined sequence, the subsequent content will overwrite the previous one. Using this layout will achieve the animation effect.

Next let's look at the Code:

Create a freamlayout. xml file

<? XML version = "1.0" encoding = "UTF-8"?>

<FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android"

Android: layout_width = "match_parent"

Android: layout_height = "match_parent"

Android: layout_gravity = "center"

Android: id = "@ + id/frame"

>

</FrameLayout>

Create an Android Program

Package cn. csdn. class3g. activity;

Import android. app. Activity;

Import android. graphics. drawable. Drawable;

Import android. OS. Bundle;

Import android. OS. Handler;

Import android. OS. Message;

Import android. view. View;

Import android. view. View. OnClickListener;

Import android. widget. FrameLayout;

Public class DeluActivity extends Activity {

/** Called when the activity is first created .*/

FrameLayout frame = null;

Boolean flag = true;

Class MyHandler extends Handler {

Int I = 0;

Public void handleMessage (Message msg ){

I ++;

Show (I % 3 );

Sleep (500 );

}

Private void sleep (long delayMillis ){

// TODO Auto-generated method stub

If (flag ){

This. sendMessageDelayed (this. obtainMessage (0), delayMillis );

}

}

Void show (Int J ){

Drawable p1 = getresources (). getdrawable (R. drawable. p11 );

Drawable P2 = getresources (). getdrawable (R. drawable. P22 );

Drawable P3 = getresources (). getdrawable (R. drawable. p33 );

Switch (j ){

Case 0:

Frame. setforeground (P1 );

Break;

Case 1:

Frame. setForeground (p2 );

Break;

Case 2:

Frame. setForeground (p3 );

Break;

}

}

}

Public void onCreate (Bundle savedInstanceState ){

Super. onCreate (savedInstanceState );

SetContentView (R. layout. fream_layout );

Findvew ();

Final myhandler = new myhandler ();

Frame. setonclicklistener (New onclicklistener (){

Public void onclick (view v ){

// Todo auto-generated method stub

Flag =! Flag;

Myhandler. Sleep (10 );

}

});

}

Private void findvew (){

// Todo auto-generated method stub

Frame = (framelayout) This. findviewbyid (R. Id. Frame );

}

}

In this way, a dynamic frame layout can be achieved.

Dynamic frame Layout