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();
}
};
}

页面效果：

略