Turn-tabhost Component (i) (Implement bottom menu navigation)

Http://www.cnblogs.com/lichenwei/p/3974009.html

What is Tabhost?

The main function of the Tabhost component is the ability to manage application classifications, such as the graphical interface that is often seen when users are using the Windows operating system.

Tabhost tab, speaking of this component, have to say one thing first, turn over the API that Google provides to us, we can find such a passage:

It tells us that this component has been deprecated after Android 4.0, suggesting that our new program should use the fragment component instead.

In fact, it's not surprising that friends who have used tabhost should know:

1, its design violates the activity Single window principle, it can load multiple activity at the same time, and then switch back and forth between them.

2, there is a very fatal problem is when we click on other options, press the Back button, it will make the entire application exit, not to switch to the previous tab, although we can overwrite the main program onkeydown this method, However, this will cause each time you press the back key to go back to the first menu of options.

But as a developer, this historical milestone of the component, we still need to grasp, the following gives a few pictures to see today to achieve the effect:

The following code is attached (note in detail)

There are two ways of implementing Tabhost:

Mode one: Direct an activity program to inherit the Tabactivity class (through Gettabhost to obtain an instance);

Mode two: Define an XML layout file use the Findviewbyid () method to get the Taghost component, instantiate it with the Setup () method, and perform several configurations; the second way, for example, is to look at the project structure first: 1. tabhost Main layout file

Activity_main.xml (relative layout is used here for tabs to appear below the screen)

 1 <tabhost xmlns:android= "http://schemas.android.com/apk/res/android" 2 android:id= "@+id/mytabhost" 3 android: Layout_width= "Fill_parent" 4 android:layout_height= "Fill_parent" > 5 6 <!--need a layout manager-7 8 <r          Elativelayout 9 android:layout_width= "fill_parent" android:layout_height= "Fill_parent" >12 <!--14 because Tabhost is inherited from Framelayout, you need a framelaytout layout (content page), id15 must be tabcontent -->17 <framelayout19 android:id= "@android: Id/tabcontent" Android:lay Out_width= "Fill_parent" android:layout_height= "fill_parent" >23 &LT;/FRAMELAYOUT&G T;24 <!--Tabwidget must be labeled to hold the tab tag, and the ID must be tabs-->26 <tabwidget28 android:id= "@an             Droid:id/tabs "android:layout_width=" fill_parent "android:layout_height=" Wrap_content "31 Android:background= "@drawable/tab_widget_background" android:layout_alignparentbottom= "true" >34 &lt ;/tabwidget>35 </relativelayout>37 </TabHost>

Tabhost layout of the file must follow the following points:

1, all the files used for label configuration, must be "<TabHost>" as the root node;

2, in order to ensure that the label page and the content of the label is normal (for example: label prompts to be placed above the label display content), you can use a layout manager for layout (for example: Linearlayout,relativelayout. ）

3, define a "<TagWidget>" label, used to represent the entire label container, in addition to the definition of this component ID "tabs", to allow the inclusion of multiple tags

4. Because Tabhost is a subclass of framelayout, you must use the Framelayout layout to define the contents of the tab, and the label ID is "Tabcontent"

As to why we should follow these conditions, we can see the source code of Tabhost to find out: 2. layout file for each labelTab_layout.xml

1 <?xml version= "1.0" encoding= "Utf-8"?> 2 <linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "3     android:layout_width=" wrap_content "4     android:layout_height=" Wrap_content "5     android: Gravity= "Center_horizontal" 6      android:background= "@drawable/tab_selector" 7     android:orientation= " Vertical "> 8  9     <imageview10         android:id=" @+id/image "one         android:layout_width=" Wrap_content "         android:layout_height= "wrap_content"         android:padding= "3DP"/>14     <textview16         Android:id= "@+id/title"         android:layout_width= "wrap_content" android:layout_height= "         wrap_content"         android:textcolor= "@android: Color/white"/>20 </LinearLayout>

3, a selector for aesthetic effect

Tab_selector.xml

1 <?xml version= "1.0" encoding= "Utf-8"?> 2 <selector xmlns:android= "http://schemas.android.com/apk/res/ Android "> 3     <item  4         android:state_pressed=" true "android:drawable=" @drawable/tab_item_p "5         ></item> 6     <item  7         android:state_selected= "true" android:drawable= "@drawable/tab_item_d" 8         ></item> 9 </selector>

4, jump to the activity of the layout file (because of the Basic agreement, here only one of them)

Tabactivity.xml

1 <?xml version= "1.0" encoding= "Utf-8"?> 2 <relativelayout xmlns:android= "http://schemas.android.com/apk/ Res/android "3     android:layout_width=" match_parent "4     android:layout_height=" Match_parent "> 5  6     <linearlayout 7         android:layout_width= "Match_parent" 8         android:layout_height= "Match_parent" 9         android:orientation= "vertical" >10         <textview13             android:id= "@+id/title" Android:layout_             Width= "Wrap_content"             android:layout_height= "wrap_content"             android:text= "I am interface 1"/>17     </ Linearlayout>18 </RelativeLayout>

5. Java Main code

 1 package com.example.tabhosttest; 2 3 Import Android.app.ActivityGroup; 4 Import android.content.Intent; 5 Import Android.os.Bundle; 6 Import Android.view.View; 7 Import Android.widget.ImageView; 8 Import Android.widget.TabHost; 9 Import android.widget.tabhost.tabspec;10 Import android.widget.textview;11 public class Mainactivity extends activitygroup{13 Private Tabhost tabhost;//declares a Tabhost object 15 16//resource file + private Class Activitys[]={tabac     tivity1.class,tabactivity2.class,tabactivity3.class,tabactivity4.class,tabactivity5.class};//Jump to Activity18 Private String title[]={"Home", "Search", "Settings", "Themes", "more"};//the caption of the Settings menu, the private int image[]={r.drawable.tab_icon1,     r.drawable.tab_icon2,r.drawable.tab_icon3,r.drawable.tab_icon4,r.drawable.tab_icon5,};//Setup Menu @Override22 protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);      W (r.layout.activity_main); Inittabview ();//Initialize Tab TAB 26   }28 private void Inittabview () {30//instantiation tabhost31 this.tabhost= (tabhost) Findviewbyid (r.i D.mytabhost); 32//Due to inherited activitygroup, you need to include this parameter in the Setup method, and if you inherit tabactivity you can omit Tabhost.setup (This.getlocalac Tivitymanager ()); 34 35//Create label for (int i=0;i<activitys.length;i++) {37//instantiate a view as Layout for tab label View=view.inflate View (this, r.layout.tab_layout, null); 39 40//Setup Imagevie W41 ImageView imageview= (ImageView) View.findviewbyid (r.id.image), imageview.setimagedrawable (ge Tresources (). getdrawable (Image[i]); 43//Set textview44 TextView textview= (TextView) View.findviewby Id (R.id.title); Textview.settext (Title[i]); 46//Set jump activity47 Intent intent=new Int ENT (this, activitys[i]); 48 49//Load the View object and set the activity50 of the jump Tabspec spec=tabhost.newtabsp EC (Title[i]). SetindicatoR (view). SetContent (intent); 51 52//Add to tab. Tabhost.addtab (spec); 54}55 56}57 58 59}

Here is an overloaded method Setindicator (), which is used to set the tab:

1. Public Tabhost.tabspec setindicator(charsequence label)

Set caption, no icon at this time

2. Public Tabhost.tabspec setindicator(charsequence label, drawable icon)

Set the title, icon (the icon here can be set with Getresources (). getdrawable (int id))

3. Public Tabhost.tabspec Setindicator(view view)

Set a custom view

There is also a setcontent (Intent Intent), which is used to set the contents of the tag, that is, we want to jump activity

Since there are 5 tabs, so there are 5 activity, the specific content to see their own needs, here is no longer given

Remember to write the activity to be declared in the Androidmanifest.xml configuration file

 1 <?xml version= "1.0" encoding= "Utf-8"?> 2 <manifest xmlns:android= "http://schemas.android.com/apk/res/     Android "3 package=" Com.example.tabhosttest "4 android:versioncode=" 1 "5 android:versionname=" 1.0 "> 6 7 &LT;USES-SDK 8 android:minsdkversion= "8" 9 android:targetsdkversion= "<application"/>10 Android:allowbackup= "true" android:icon= "@drawable/ic_launcher" android:label= "@string/app_ Name "Android:theme=" @style/apptheme ">16 <activity17 android:name=". Mainactivity "android:label=" @string/app_name ">19 <intent-filter>20 &L T;action android:name= "Android.intent.action.MAIN"/>21 <category android:name= "android.intent.ca Tegory. LAUNCHER "/>23 </intent-filter>24 </activity>25 <activity26 Android Oid:name= "Com.example.tabhosttest.TabActiviTy1 "android:label=" @string/app_name ">28 </activity>29 <activity30 Android:name= "Com.example.tabhosttest.TabActivity2" to Android:label= "@string/app_name" >32 </act ivity>33 <activity34 android:name= "Com.example.tabhosttest.TabActivity3" android:l Abel= "@string/app_name" >36 </activity>37 <activity38 android:name= "Com.example.ta Bhosttest.             TabActivity4 "android:label=" @string/app_name ">40 </activity>41 <activity42         Android:name= "Com.example.tabhosttest.TabActivity5" android:label= "@string/app_name" >44 </activity>45 </application>46 </manifest>

Okay, here's the bottom navigation menu, try it.

Here's a different way to implement, more concise and convenient "Android Development Review notes--tabhost Component (ii) (Achieve bottom menu navigation)"

Turn-tabhost Component (i) (Implement bottom menu navigation)