"Android UI design and development" phase No. 08: Bottom menu Bar (iii) Fragment+fragmenttabhost implementation imitation Sina Weibo bottom menu bar

Reprint Please specify source: http://blog.csdn.net/yangyu20121224/article/details/9016223

In the previous article, we spent a lot of time explaining the use of fragment, the new introduction class, in order to let you have a firm grasp of its use, so that readers in the future development will be able to use it skillfully.

First, to achieve

II. Project Engineering Structure

Third, detailed code writing

1, Main tab layout interface, Main_tab_layout:

<?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" > <framelayout Android:id= "@+id/realtabcontent"Android:layout_width= "Fill_parent"Android:layout_height= "0dip"Android:layout_weight= "1"/> <android.support.v4.app.FragmentTabHost Android:id= "@android: Id/tabhost"Android:layout_width= "Fill_parent"Android:layout_height= "Wrap_content"Android:background= "@drawable/maintab_toolbar_bg" > <framelayout Android:id= "@android: Id/tabcontent"Android:layout_width= "0DP"Android:layout_height= "0DP"Android:layout_weight= "0"/> </android.support.v4.app.FragmentTabHost></LinearLayout>

2. tab button Layout, Tab_item_view.xml:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:gravity= "Center"android:orientation= "Vertical" > <ImageView Android:id= "@+id/imageview"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:focusable= "false"android:padding= "3DP"android:src= "@drawable/tab_home_btn" > </ImageView> <TextView Android:id= "@+id/textview"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:text= "Home"android:textsize= "10SP"Android:textcolor= "#ffffff" > </TextView></LinearLayout>

3, fragment layout interface, here only one, Fragment_1.xml:

<span style= "FONT-SIZE:12PX;" ><?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 " >    <ImageView        android:id= "@+id/imageview"        android:layout_width= "Fill_parent "        android:layout_height=" Fill_parent "        android:scaletype=" Fitcenter "         Android:src= "@drawable/xianjian01" >    </ImageView></LinearLayout></span>

4, tab option of the custom button resource file, list one of the buttons, TAB_HOME_BTN:

<span style= "FONT-SIZE:12PX;" ><?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:drawable=" @drawable/icon_home_sel "android:state_selected=" true "/>    < Item android:drawable= "@drawable/icon_home_nor"/></selector></span>

5, Tab option button background resource file, Selector_tab_background.xml:

<span style= "FONT-SIZE:12PX;" ><?xml version= "1.0" encoding= "Utf-8"? ><selector xmlns:android= "http://schemas.android.com/apk/res/ Android ">    <item android:drawable=" @drawable/home_btn_bg "android:state_pressed=" true "/>    < Item android:drawable= "@drawable/HOME_BTN_BG" android:state_selected= "true"/></selector></span>

6. Main activity class, Maintabactivity.java:

<span style= "FONT-SIZE:12PX;" > Packagecom.yangyu.mycustomtab02;ImportAndroid.os.Bundle;Importandroid.support.v4.app.FragmentActivity;ImportAndroid.support.v4.app.FragmentTabHost;ImportAndroid.view.LayoutInflater;ImportAndroid.view.View;ImportAndroid.widget.ImageView;ImportAndroid.widget.TabHost.TabSpec;ImportAndroid.widget.TextView;/** * @authorYangyu * Function Description: Custom Tabhost*/ Public classMaintabactivityextendsfragmentactivity{//Defining Fragmenttabhost Objects    PrivateFragmenttabhost Mtabhost; //Define a layout    PrivateLayoutinflater Layoutinflater; //define an array to hold the fragment interface    PrivateClass fragmentarray[] = {FragmentPage1.class, FragmentPage2.class, FragmentPage3.class, FragmentPage4.class, FragmentPage5.class}; //define an array to hold the button picture    Private intMimageviewarray[] ={r.drawable.tab_home_btn,r.drawable.tab_message_btn,r.drawable.tab_selfinfo_btn,        R.DRAWABLE.TAB_SQUARE_BTN,R.DRAWABLE.TAB_MORE_BTN}; //the text of the tab tab    PrivateString mtextviewarray[] = {"Home", "message", "Friends", "Square", "more"};  Public voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);                Setcontentview (r.layout.main_tab_layout);    Initview (); }         /*** Initialize Components*/    Private voidInitview () {//instantiating a Layout objectLayoutinflater = Layoutinflater.from ( This); //instantiate Tabhost object, get TabhostMtabhost =(Fragmenttabhost) Findviewbyid (Android.        R.id.tabhost); Mtabhost.setup ( This, Getsupportfragmentmanager (), r.id.realtabcontent); //get the number of fragment        intCount =fragmentarray.length;  for(inti = 0; I < count; i++){                //set the icon, text, and content for each tab buttonTabspec Tabspec =Mtabhost.newtabspec (Mtextviewarray[i]). Setindicator (Gettabitemview (i)); //Add the tab button into the tab tabMtabhost.addtab (Tabspec, Fragmentarray[i],NULL); //set the background of the tab buttonmtabhost.gettabwidget (). Getchildat (i). Setbackgroundresource (R.drawable.selector_tab_background); }    }                    /*** Set icons and text for tab buttons*/    PrivateView Gettabitemview (intindex) {View View= Layoutinflater.inflate (R.layout.tab_item_view,NULL); ImageView ImageView=(ImageView) View.findviewbyid (R.id.imageview);                Imageview.setimageresource (Mimageviewarray[index]); TextView TextView=(TextView) View.findviewbyid (R.id.textview);            Textview.settext (Mtextviewarray[index]); returnview; }}</span>

7, Fragment page, Fragmentpage1.java:

<span style= "FONT-SIZE:12PX;" > Packagecom.yangyu.mycustomtab02;ImportAndroid.os.Bundle;Importandroid.support.v4.app.Fragment;ImportAndroid.view.LayoutInflater;ImportAndroid.view.View;ImportAndroid.view.ViewGroup; Public classFragmentPage1extendsfragment{@Override PublicView Oncreateview (layoutinflater inflater, ViewGroup container,bundle savedinstancestate) {returnInflater.inflate (R.layout.fragment_1,NULL); }    }</span>

"Android UI design and development" phase No. 08: Bottom menu Bar (iii) Fragment+fragmenttabhost implementation imitation Sina Weibo bottom menu bar