Android TabHost +Fragment 实现底部菜单栏

最近项目中需要实现TAB选项卡的效果，这里用的是TabHost来实现的。在3.0以后TabActivity已经被标示为Deprecated，我们可以用TabHost+Fragment来实现TAB选项卡效果。

activity_main.xml

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0" 
            android:visibility="gone"/>

        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
        
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0" />

    </LinearLayout>

</TabHost>

MainActivity.java

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.widget.TabHost;

public class MainActivity extends FragmentActivity {
	TabHost tHost;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        tHost = (TabHost) findViewById(android.R.id.tabhost);
        tHost.setup();
        
        /** Defining Tab Change Listener event. This is invoked when tab is changed */
        TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {
			
			@Override
			public void onTabChanged(String tabId) {
				android.support.v4.app.FragmentManager fm =   getSupportFragmentManager();
				AndroidFragment androidFragment = (AndroidFragment) fm.findFragmentByTag("android");
				AppleFragment appleFragment = (AppleFragment) fm.findFragmentByTag("apple");
				android.support.v4.app.FragmentTransaction ft = fm.beginTransaction();
				
				/** Detaches the androidfragment if exists */
				if(androidFragment!=null)
					ft.detach(androidFragment);
				
				/** Detaches the applefragment if exists */
				if(appleFragment!=null)
					ft.detach(appleFragment);
				
				/** If current tab is android */
				if(tabId.equalsIgnoreCase("android")){
					
					if(androidFragment==null){		
						/** Create AndroidFragment and adding to fragmenttransaction */
						ft.add(R.id.realtabcontent,new AndroidFragment(), "android");						
					}else{
						/** Bring to the front, if already exists in the fragmenttransaction */
						ft.attach(androidFragment);						
					}
					
				}else{	/** If current tab is apple */
					if(appleFragment==null){
						/** Create AppleFragment and adding to fragmenttransaction */
						ft.add(R.id.realtabcontent,new AppleFragment(), "apple");						
					}else{
						/** Bring to the front, if already exists in the fragmenttransaction */
						ft.attach(appleFragment);						
					}
				}
				ft.commit();				
			}
		};
		
		
		/** Setting tabchangelistener for the tab */
		tHost.setOnTabChangedListener(tabChangeListener);
                
		/** Defining tab builder for Andriod tab */
        TabHost.TabSpec tSpecAndroid = tHost.newTabSpec("android");
        tSpecAndroid.setIndicator("Android",getResources().getDrawable(R.drawable.android));        
        tSpecAndroid.setContent(new DummyTabContent(getBaseContext()));
        tHost.addTab(tSpecAndroid);
        
        
        /** Defining tab builder for Apple tab */
        TabHost.TabSpec tSpecApple = tHost.newTabSpec("apple");
        tSpecApple.setIndicator("Apple",getResources().getDrawable(R.drawable.apple));        
        tSpecApple.setContent(new DummyTabContent(getBaseContext()));
        tHost.addTab(tSpecApple);
        
     }   
 	
}

AppleFragment.java

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class AppleFragment extends ListFragment{
	
    /** An array of items to display in ArrayList */
	 String apple_versions[] = new String[]{
             "Mountain Lion",
             "Lion",
             "Snow Leopard",
             "Leopard",
             "Tiger",
             "Panther",
             "Jaguar",
             "Puma"
     };


    	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		
		/** Creating array adapter to set data in listview */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, apple_versions);

        /** Setting the array adapter to the listview */
        setListAdapter(adapter);

		
		return super.onCreateView(inflater, container, savedInstanceState);
	}
	
	@Override
    public void onStart() {
            super.onStart();

            /** Setting the multiselect choice mode for the listview */
            getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
    }
}

AndroidFragment.java

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class AndroidFragment extends ListFragment{
	
    /** An array of items to display in ArrayList */
    String android_versions[] = new String[]{
            "Jelly Bean",
            "IceCream Sandwich",
            "HoneyComb",
            "Ginger Bread",
            "Froyo"
    };

    	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		
		/** Creating array adapter to set data in listview */
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity().getBaseContext(), android.R.layout.simple_list_item_multiple_choice, android_versions);

        /** Setting the array adapter to the listview */
        setListAdapter(adapter);
		
		return super.onCreateView(inflater, container, savedInstanceState);
	}
	
	@Override
    public void onStart() {
            super.onStart();

            /** Setting the multiselect choice mode for the listview */
            getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
    }
}

DummyTabContent.java

import android.content.Context;
import android.view.View;
import android.widget.TabHost.TabContentFactory;

public class DummyTabContent implements TabContentFactory{
	private Context mContext;
	
	public DummyTabContent(Context context){
		mContext = context;
	}
			

	@Override
	public View createTabContent(String tag) {
		View v = new View(mContext);
		return v;
	}

}

关于底部的TAB，我们也可以用RadioGroup来实现，如下：

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout 
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0"/>
        
        <TabWidget 
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone"/>
        
        <RadioGroup
            android:id="@+id/main_tab"
            android:layout_width="fill_parent"
            android:layout_height="@dimen/bottom_bar_height"
            android:background="@drawable/bottom_bar_bg"
            android:gravity="center_vertical"
            android:orientation="horizontal" 
            android:layout_gravity="bottom">

            <RadioButton
                android:id="@+id/rb_favorite"
                android:layout_marginTop="2.0dip"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tab_favorite"
                android:text="@string/tab_favorite" />

            <RadioButton
                android:id="@+id/rb_recent"
                android:layout_marginTop="2.0dip"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tab_recent"
                android:text="@string/tab_recent" />

            <RadioButton
                android:id="@+id/rb_main"
                android:layout_marginTop="2.0dip"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tab_publiccontact"
                android:text="@string/tab_main" />

            <RadioButton
                android:id="@+id/rb_helper"
                android:layout_marginTop="2.0dip"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tab_help"
                android:text="@string/tab_help" />

            <RadioButton
                android:id="@+id/rb_settings"
                android:layout_marginTop="2.0dip"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tab_settings"
                android:text="@string/tab_settings" />
        </RadioGroup>
    </LinearLayout>

</TabHost>