[8 basic learning for Android]-page layout

Disclaimer: The book "Secrets of Android Application Development", which records the logs of the book, references the relevant code and summary, and has no commercial use, it is completely a record of self-learning, and many problems will inevitably occur in learning just now. If there are any mistakes, please criticize them a lot.

On the evening of 2011-10-31, I completed the last Basic Study on Android and made some common la s on the interface;

1. linearlayout)

The previous example has used the linearlayout layout control for many times. The linear layout is divided:

(1) vertical linear layout;

(2) horizontal linear layout;

For these two differences, it is just the difference of an attribute.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent"></LinearLayout>

For horizontal linear layout, Android: Orientation = "horizontal.

2. relativelayout)

Generally, linear layout does not meet the needs of our actual projects. It is similar to Web Interface UI design, and it also has some CSS style la s with relative elements. The relativelayout parameters include width, height, below, aligntop, toleft, padding, and merginleft.

Key source code:

<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 = "Enter:"/> <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>

Android: layout_below = "@ ID/label" sets edittext below textview; Android: layout_below = "@ ID/entry" in the button sets this button under edittext.

Instance effect:

3. tablelayout)

Tablelayout consists of many tablerow. Each tablerow defines a row. The tablelayout container does not display the border lines of row, column, or cell. Each row has 0 or more cells, and each cell has a view object. A table consists of rows and columns. cells are allowed to be empty. However, cells cannot span columns, which is different from HTML.

<View Android: layout_height = "2dip" Android: Background = "# ff909090"/> <tablerow> <textview Android: text = "*" Android: padding = "3dip"/> <textview Android: text = "import... "Android: padding =" 3dip "/> </tablerow> <textview Android: text =" * "Android: padding =" 3dip "/> <textview Android: TEXT = "Export... "Android: padding =" 3dip "/> <textview Android: text =" Ctrl-e "Android: gravity =" right "Android: padding = "3dip"/> </tablerow>

Instance effect:

Iv. tabwidget)

The switching card is often used in the following options. Similar to the phone book interface, different content is displayed through multiple tag switching. Here, tabhost is a container used to store tab labels. The gettabhost method is used to obtain the tabhost object and the addtab method is used to add a tab to the container. The tab generates an event during switchover. You can use the tabactivity event to listen to the setontabchangedlistener.

[Extension point] tabhost

Class Overview

Provides a window view container for tabs. This object contains two sub-objects: one group is the tag that users can select to specify the tab page, and the other group is the framelayout to display the content of this tab page. Some elements usually control the use of this container object, rather than the value set in the child element itself.

(Translator madgoat Note: even if a single element is used, it is best to put it in the viewgroup of the container object)

Internal class

Interface tabhost. ontabchangelistener

Interface defines the callback function called when the tab is changed

Interface tabhost. tabcontentfactory

Tab content is generated when a tab is selected

Class tabhost. tabspec

A separate tab. Each option card has a tab indicator, content, and tag to facilitate recording ..

 

Key source code:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@android:id/tabhost"    android:layout_width="fill_parent"    android:layout_height="fill_parent">    <LinearLayout        android:orientation="vertical"        android:layout_width="fill_parent"        android:layout_height="fill_parent">        <TabWidget            android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content" />        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="fill_parent"            android:layout_height="fill_parent">            <TextView                 android:id="@+id/textview1"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:text="this is a tab" />            <TextView                 android:id="@+id/textview2"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:text="this is another tab" />            <TextView                 android:id="@+id/textview3"                android:layout_width="fill_parent"                android:layout_height="fill_parent"                 android:text="this is a third tab" />    </FrameLayout>    </LinearLayout></TabHost>

Processing class:

// Declare the tabhost object tabhost mtabhost; Public void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate); setcontentview (R. layout. main); // obtain the tabhost object mtabhost = gettabhost ();/* Add a label for tabhost * // create a newtabspec (newtabspec) // set its label and Icon (setindicator) // set the content (setcontent) mtabhost. addtab (mtabhost. newtabspec ("tab_test1 "). setindicator ("Tab 1", getresources (). getdrawable (R. drawable. img1 )). setcontent (R. id. textview1); mtabhost. addtab (mtabhost. newtabspec ("tab_test2 "). setindicator ("Tab 2", getresources (). getdrawable (R. drawable. img2 )). setcontent (R. id. textview2); mtabhost. addtab (mtabhost. newtabspec ("tab_test3 "). setindicator ("tab 3", getresources (). getdrawable (R. drawable. img3 )). setcontent (R. id. textview3); // set the background color of tabhost mtabhost. setbackgroundcolor (color. argb (150, 22, 70,150); // sets the background image resource of tabhost. // mtabhost. setbackgroundresource (R. drawable. bg0); // set which label is currently displayed mtabhost. setcurrenttab (0); // tag switching event processing, setontabchangedlistener mtabhost. setontabchangedlistener (New ontabchangelistener () {public void ontabchanged (string Tabid) {dialog = new alertdialog. builder (examples_04_29activity.this ). settitle ("prompt "). setmessage ("currently selected:" + Tabid + "tag "). setpositivebutton ("OK", new dialoginterface. onclicklistener () {public void onclick (dialoginterface dialog, int whichbutton) {dialog. cancel ();}}). create (); // create button dialog. show ();}});}

Instance effect:

Well, after learning the basic controls and layout, let's start learning. Go to p120