Android 底部菜单的实现(TabHost)

应用场景：

       底部菜单是比较常用的界面设计风格，其可以将App多个不同的功能或操作，归纳为几个或少数的功能集或功能模块，一般为四个或五个，如QQ、蘑菇街、好豆菜谱等等。使功能操作集中、简洁，方便用户的使用。

知识点介绍：

        本例使用TabHost来实现底部菜单的设计，使用TabHost对布局文件.xml有特殊的要求，在布局文件.xml中必须存在TabWidget 和FrameLayout 标签，并且两者对应的android:id属性必须分别为：@android:id/tabs 、@android:id/tabcontent。对于这个硬性规定需要通过源代码解释：

if  (mTabWidget  ==   null )  {
         throw   new  RuntimeException(
" Your TabHost must have a TabWidget whose id attribute is 'android.R.id.tabs' " );
    } 
	 mTabContent  =  (FrameLayout) findViewById(com.android.internal.R.id.tabcontent);
    if  (mTabContent  ==   null )  {
         throw   new  RuntimeException(
 "Your TabHost must have a FrameLayout whose id attribute is 'android.R.id.tabcontent' " );
    }

使用方式：

第一步：新建项目TabHostFragTest，activity_main.xml。

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@android:id/tabhost"
    tools:context=".MainActivity" >
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_height="0dp"
            android:layout_width="0dp"
            android:layout_weight="0"/>
        <FrameLayout android:id="@+id/realTabContent"
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"/>
        <!-- android:divider="@null" 去除Tab之间的间隔  -->
		<TabWidget android:id="@android:id/tabs"
		    android:divider="@null"
		    android:layout_height="wrap_content"
		    android:layout_width="match_parent"
		    android:layout_weight="0"/>
    </LinearLayout>
</TabHost>

第二步：创建TabContentFactory的实现类MTabContent。

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

/**
 * @function 构建自定义TabContentFactory,提供所需要的TabContent的视图对象。
 * @author Mahc
 */
public class MTabContent implements TabContentFactory {

	 private Context mContext;
     public MTabContent(Context context){
             mContext = context;
     }

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

第三步：创建Fragment的布局文件layout_frament_a.xml。

<?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" >
	<TextView android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:gravity="center"
	    android:id="@+id/fragment_a_textView"
	    android:text="测试数据"/>
</LinearLayout>

第四步：创建Fragment的继承类。

import java.util.Date;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class AFragment extends Fragment {
	private TextView textView; 
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View  fragment = inflater.inflate(R.layout.layout_frament_a, container, false);
		textView = (TextView) fragment.findViewById(R.id.fragment_a_textView);
		textView.setText(new Date().getTime()+"");
		return fragment;
	}
}

第五步：编写MainActivity.java。

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.Menu;
import android.widget.TabHost;

public class MainActivity extends FragmentActivity {
	private TabHost tabHost;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initViews();
	}

	private void initViews() {
		tabHost = (TabHost) findViewById(android.R.id.tabhost);
		tabHost.setup();	
		tabHost.setOnTabChangedListener(tabChangeListener);
		//布置TabHost点出后出现的View
		for(int i=1;i<5;i++){
			TabHost.TabSpec tSpecAndroid = tabHost.newTabSpec("android");
			tSpecAndroid.setIndicator("菜单0"+i,
					getResources().getDrawable(R.drawable.ic_launcher));
			tSpecAndroid.setContent(new MTabContent(getBaseContext()));
			tabHost.addTab(tSpecAndroid);
		}
	}
	
	TabHost.OnTabChangeListener tabChangeListener = new TabHost.OnTabChangeListener() {

		@Override
		public void onTabChanged(String tabId) {
			FragmentManager fm = getSupportFragmentManager();
			AFragment aFragment = (AFragment) fm
					.findFragmentByTag("android");
			FragmentTransaction ft = fm.beginTransaction();

			/** 拆卸 aFragment 如果 aFragment 已经存在*/
			if (aFragment != null)
				ft.detach(aFragment);

			/** If current tab is android */
			if (tabId.equalsIgnoreCase("android")) {
				if (aFragment == null) {
					//创建 AndroidFragment 并添加到 fragmenttransaction 中
					ft.add(R.id.realTabContent, new AFragment(),"android");
				} else {
					//如果已经存在于fragmenttransaction,放在 上面
					ft.attach(aFragment);
				}
			} else {
				
			}
			ft.commit();
		}
	};
}

页面效果：

略