Navigation -- TabHost

Open the call button on the Android mobile phone, which shows the navigation control. You can click one to display different or identical pages below. Two implementation methods

1. inherited from TabActivitty

The inherited navigation bar can only contain text and has a single style.

Specific implementation:

◆ Main Activity

@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // define the navigation TabHost th = getTabHost ();/*** add navigation items to the navigation * Add a label * newTabSpec every addTab time: specify the tag ID to differentiate different tags * setIndicator: Set the tag display information * setContent: the response event when the tag is clicked. This is the page Jump */th. addTab (th. newTabSpec ("tab1 "). setIndicator ("Navigation 1 "). setContent (new Intent (this, Act1.class); th. addTab (th. newTabSpec ("tab2 "). setIndicator ("navigation 2 "). setContent (new Intent (this, Act2.class); th. addTab (th. newTabSpec ("tab3 "). setIndicator ("navigation 3 "). setContent (new Intent (this, Act3.class )));}

◆ When you click navigation, you only need to specify three xml files for the three activities to jump to. These three xml files only add a button.

◆ Result

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/10554G203-0.png "title =" .png "/>

Ii. Custom navigation

1: Create

1) Create an xml file, create a TabHost node, and set its ID.

2) create a TabWidget subnode to set the tag. The ID must be "@ android: id/tabs ". Each tag is determined by the style defined in an xml file. For example, this navigation label may be regarded as an image above and a text below. Such a style can be defined in an xml file.

3) create a FrameLayout subnode to display the content. The Id must be "@ android: id/tabcontent ". There are several labels, and FrameLayout has several layout views. For example, if there is a single navigation label, there will be three RelativeLayout. Here is just an example. You can also set your own style for other la S.

2: specific implementation

1) selftabhost. xml file of TabHost

<? Xml version = "1.0" encoding = "UTF-8"?> <! -- Note that there is no layout, and there is a TabHost --> <TabHost xmlns: android =" http://schemas.android.com/apk/res/android "Android: id =" @ + id/tabhost "android: layout_width =" fill_parent "android: layout_height =" fill_parent "> <LinearLayout android: layout_width =" fill_parent "android: layout_height = "fill_parent" android: orientation = "vertical" android: gravity = "center"> <! -- Navigation tag --> <TabWidget android: id = "@ android: id/tabs" android: layout_width = "fill_parent" android: layout_height = "wrap_content"> </TabWidget> <! -- Used to display the content --> <FrameLayout android: id = "@ android: id/tabcontent" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: gravity = "center"> <! -- There are several RelativeLayout interfaces to display --> <RelativeLayout android: id = "@ + id/daohang1" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center"> <! -- Defines the style in the interface. Here is a Button --> <Button android: id = "@ + id/button1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Navigation 1 corresponding to button 1"/> </RelativeLayout> <RelativeLayout android: id = "@ + id/daohang2" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center"> <Button android: id = "@ + id/button1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "navigation 2 corresponds to button 2"/> </RelativeLayout> <RelativeLayout android: id = "@ + id/daohang3" android: layout_width = "match_parent" android: layout_height = "match_parent" android: gravity = "center"> <Button android: id = "@ + id/button1" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "navigation 3 button 3 on the corresponding interface"/> </RelativeLayout> </FrameLayout> </LinearLayout> </TabHost>

2) style xml file of the navigation tag

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout>

3) Main Activity: SelfTabHost

Public class SelfTabHost extends Activity {@ Override protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); // load the custom navigation view setContentView (R. layout. selftabhost); // defines the navigation TabHost th = (TabHost) findViewById (R. id. tabhost); // initialize navigation th. setup (); // define the binding of each navigation label to its corresponding display content, and define the event triggered upon clicking to jump to the page.) TabSpec ts1 = th. newTabSpec ("tab1"); // defines the first tag. The Id is tab1 ts1.setIndicator (createTabView (th, "Navigation 1", R. drawable. ic_launcher); // you can specify the binding ts1.setContent (R. id. daohang1); // defines the event th triggered when a click is made. addTab (ts1); // Add the label to the navigation bar. TabSpec ts2 = th. newTabSpec ("tab2"); // defines the first tag. The Id is tab2 ts2.setIndicator (createTabView (th, "navigation 2", R. drawable. ic_launcher); // you can specify the binding ts2.setContent (R. id. daohang2); // defines the event th triggered when a click is made. addTab (ts2); // Add the tab to the navigation bar. TabSpec ts3 = th. newTabSpec ("tab3"); // defines the first tag. The Id is tab3 ts3.setIndicator (createTabView (th, "navigation 3", R. drawable. ic_launcher); // you can specify the binding ts3.setContent (R. id. daohang3); // defines the event th triggered when a click is made. addTab (ts3); // Add the tag to the navigation} // compile a method to return the binding public View createTabView (TabHost th, String title, int image) {// View view corresponding to the loaded tag = LayoutInflater. from (this ). inflate (R. layout. cell, null, false); // get the control and set the property TextView txtView = (TextView) view. findViewById (R. id. textView1); txtView. setText (title); // get the control and set the property ImageView imageView = (ImageView) view. findViewById (R. id. imageView1); imageView. setBackgroundResource (image); // return view ;}}

4) Results

650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/10554J256-1.png "title =" .png "/>

Navigation to guide you forward... Come On 650) this. width = 650; "src =" http://www.bkjia.com/uploads/allimg/131228/10554KO7-2.gif "/>

This article is from the "Schindler" blog, please be sure to keep this source http://cinderella7.blog.51cto.com/7607653/1282212