Tabhost Implementing the bottom navigation bar

Source code and executable file: Http://files.cnblogs.com/rainboy2010/tabnavigation.zip

Many Android applications now use the bottom navigation bar design, which allows the user to switch between different pages flexibly. The use of Tabhost control is easy to implement a bottom navigation bar function, the following to imitate the base of the master client navigation bar For example small test sledgehammer

1. Design the main interface, layout file Tab_ludashi.xml as follows:

<?XML version= "1.0" encoding= "Utf-8"?><Framelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:id= "@+id/container"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent" >    <TabhostAndroid:id= "@android: Id/tabhost"Android:layout_width= "Fill_parent"Android:layout_height= "Fill_parent"Android:background= "@drawable/bg"     >        <LinearLayoutAndroid:layout_width= "Fill_parent"Android:layout_height= "Fill_parent"android:orientation= "vertical" >             <FramelayoutAndroid:id= "@android: Id/tabcontent"Android:layout_width= "Fill_parent"Android:layout_height= "0.0DP"Android:layout_weight= "1"              >             </Framelayout>             <TabwidgetAndroid:id= "@android: Id/tabs"Android:layout_width= "Fill_parent"Android:layout_height= "@dimen/tabwidget_height"android:gravity= "Center"android:showdividers= "None"             >             </Tabwidget>        </LinearLayout>            </Tabhost></Framelayout>

Each tabitem corresponds to the layout file Tab_ludashi_item.xml as follows, the picture in the upper, the text in the lower part

<LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:id= "@+id/tabwidget_item_layout"Android:layout_width= "Fill_parent"Android:layout_height= "@dimen/tabwidget_height"android:orientation= "vertical"android:gravity= "Center"Android:background= "@drawable/selector_ludashi_tabitem_bg"   >    <RelativelayoutAndroid:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"    >      <ImageViewAndroid:id= "@+id/tabwidget_item_image"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_centerinparent= "true"android:contentdescription= "@null"Android:scaletype= "Fitcenter"       />         <ImageViewAndroid:id= "@+id/tabwidget_item_dot"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:layout_alignparenttop= "true"Android:layout_torightof= "@id/tabwidget_item_image"android:contentdescription= "@null"Android:scaletype= "Fitcenter"android:visibility= "Invisible"android:src= "@drawable/red_dot"       />      </Relativelayout>        <TextViewAndroid:id= "@+id/tabwidget_item_text"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:gravity= "Center_vertical"Android:layout_margintop= "3DP"android:textsize= "12SP"Android:textcolor= "@drawable/selector_ludashi_tabitem_text"    /></LinearLayout>

The XML file that corresponds to the background of the selected and unchecked states is selector_ludashi_tabitem_bg.xml:

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android" >    <Itemandroid:state_pressed= "true"android:drawable= "@drawable/ludashi_tabitem_selected" />    <Itemandroid:state_selected= "true"android:drawable= "@drawable/ludashi_tabitem_selected" />    <Itemandroid:drawable= "@android: Color/transparent" /></selector>

The XML file that corresponds to the color of the text in the checked and unchecked states is selector_ludashi_tabitem_text.xml :

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_pressed= "true"Android:color= "#ff00a5df" />    <Itemandroid:state_selected= "true"Android:color= "#ff00a5df" />    <ItemAndroid:color= "#ff797979" /></selector>

2. Design each TabItem the selected and unchecked states, take the first item as an example, and the corresponding XML file selector_ludashi_tabitem_image_myphone.xml as follows:

<?XML version= "1.0" encoding= "Utf-8"?><selectorxmlns:android= "Http://schemas.android.com/apk/res/android" >    <Itemandroid:state_pressed= "true"android:drawable= "@drawable/ludashi_tabitem_myphone_pressed" />    <Itemandroid:state_selected= "true"android:drawable= "@drawable/ludashi_tabitem_myphone_pressed" />    <Itemandroid:drawable= "@drawable/ludashi_tabitem_myphone_normal" /></selector>

3. Write the Java code as follows:

@SuppressWarnings ("Deprecation") Public classLudashiactivityextendstabactivity {PrivateTabhost Mtabhost; Private int[]mtabimage=New int[]{r.drawable.selector_ludashi_tabitem_image_myphone,r.drawable.selector_ludashi_tabitem_image_bench,
R.drawable.selector_ludashi_tabitem_image_optimize,r.drawable.selector_ludashi_tabitem_image_find}; Private int[]mtabtext=New int[]{R.STRING.LUDASHI_TAB1,R.STRING.LUDASHI_TAB2,R.STRING.LUDASHI_TAB3,R.STRING.LUDASHI_TAB4}; Privatestring[]mtabtag=Newstring[]{"Tab1", "tab2", "Tab3", "TAB4"}; PrivateClass<?>[] Mtabclass=NewClass<?>[]{tab1.class, Tab2.class, Tab3.class, Tab4.class}; @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);                Setcontentview (R.layout.tab_ludashi);            Initui (); }    Private voidInitui () { This. Settitle (R.string.button2);  This. mtabhost= This. Gettabhost ();  This. Mtabhost.setup (); //set the displayed picture and text         for(inti=0;i<mtabclass.length;i++) {View View=layoutinflater.from ( This). Inflate (R.layout.tab_ludashi_item,NULL);          ((ImageView) View.findviewbyid (R.id.tabwidget_item_image)). Setimageresource (Mtabimage[i]);                     ((TextView) View.findviewbyid (R.id.tabwidget_item_text)). SetText (Mtabtext[i]);  This. Mtabhost.addtab ( This. Mtabhost.newtabspec (Mtabtag[i]). Setindicator (view). SetContent (NewIntent ( This, Mtabclass[i])); }               //Set the default check         This. Mtabhost.setcurrenttab (0); }}

Tabhost Implementing the bottom navigation bar