使用FragmentTabHost实现底部导航栏

最近项目在做优化，而且也到年底了，工作量不多，所以趁着有空闲的时间，就静下心来写写博客，对项目中所用的技术进行一个巩固，也对自己所掌握的技术做一个分享。好了，废话不多说。今天分享的内容主要是用TasbHost实现底部底部导航栏效果。

具体的实现步骤:

1. activity_main的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.wanxiaohulian.tabhostdemo.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </FrameLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:background="#000000"
            android:layout_width="match_parent"
            android:layout_height="1px">
        </View>
        <android.support.v4.app.FragmentTabHost
            android:id="@+id/tabhost"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </android.support.v4.app.FragmentTabHost>
    </RelativeLayout>
</LinearLayout>

2.底部导航栏TabHost的布局文件view_main_tab_layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="3dp">

    <ImageView
        android:id="@+id/iv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/main_tab_act"/>

    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="活动"
        android:textColor="@color/main_tab_text"/>

</LinearLayout>

3.每一个FragmentTabHost所对应Fragment布局，总共有五个Fragment,这里只贴出其中一个，其他四个的布局类似

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- TODO: Update blank fragment layout -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <android.support.v7.widget.Toolbar
        android:background="?attr/colorPrimary"
        android:id="@+id/toolbar"
        app:title="发现"
        style="@style/Widget.App.Toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
    <TextView
        android:id="@+id/tv_find"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

4.定义一个枚举类MainTab

public enum MainTab {
    ACT(0, R.string.main_tab_name_act,R.drawable.main_tab_act, ActFragment.class),
    FIND(1,R.string.main_tab_name_find,R.drawable.main_tab_find, FindFragment.class),
    MALL(2,R.string.main_tab_name_mall,R.drawable.main_tab_mall,MallFragment.class),
    MESSAGE(3,R.string.main_tab_name_message,R.drawable.main_tab_message, MessageFragment.class),
    MY(4,R.string.main_tab_name_my,R.drawable.main_tab_user, MyFragment.class);
    private int id;
    private int resName;
    private int resIcon;
    private Class<?> clazz;

    MainTab(int id, int resName, int resIcon, Class<?> clazz) {
        this.id = id;
        this.resName = resName;
        this.resIcon = resIcon;
        this.clazz = clazz;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getResName() {
        return resName;
    }

    public void setResName(int resName) {
        this.resName = resName;
    }

    public int getResIcon() {
        return resIcon;
    }

    public void setResIcon(int resIcon) {
        this.resIcon = resIcon;
    }

    public Class<?> getClazz() {
        return clazz;
    }

    public void setClazz(Class<?> clazz) {
        this.clazz = clazz;
    }
}

5.接着在MainActivity实现具体的逻辑

• 初始化FragmentTabHost,关联容器

 tabhost.setup(this,getSupportFragmentManager(),R.id.fl_container);

• 去除分割线

 tabhost.setup(this,getSupportFragmentManager(),R.id.fl_container);

• 遍历枚举，找到view_main_tab_layout布局文件，设置不同的文字和图标

  MainTab[] mainTabs = MainTab.values();
        for(int i = 0 ; i < mainTabs.length ; i++){
            MainTab tab = mainTabs[i];
            View indicator = View.inflate(this,R.layout.view_main_tab_layout,null);
            TextView tvTab = (TextView) indicator.findViewById(R.id.tv_tab);
            ImageView ivTab = (ImageView) indicator.findViewById(R.id.iv_tab);
            tvTab.setText(getString(tab.getResName()));
            ivTab.setImageResource(tab.getResIcon());

• 创建Fragment选项卡

    TabHost.TabSpec tabSpec = tabhost.newTabSpec(getString(tab.getResName()));
            tabSpec.setIndicator(indicator);

• 将新的选项卡添加到TabHost中

     Bundle bundle = new Bundle();
            bundle.putString("key","content:"+ getString(tab.getResName()));
            tabhost.addTab(tabSpec,tab.getClazz(),bundle);
            tabhost.getTabWidget().getChildAt(i).setOnTouchListener(this);

6.最后在每一个Fragmnet中，接收Bundle传递过来的字符串，展示不同的内容，实现TabHost之间的选项卡切换

• onCreate中接收Bundle传递过来的字符串

    Bundle arguments = getArguments();
        if (arguments != null) {
            mArg = arguments.getString("key");
        }

• onViewCreated在页面设置不同的内容

     if (!TextUtils.isEmpty(mArg)) {
            mTvAct.setText(mArg);
        }

7.效果图

以上就是如何用FragmentTabHost来实现底部导航栏。本人第一次写博客，写得不是很好。如果写的哪里有错误或者不足的地方，还请给位大神纠正。接下来的一遍博客主要是分享DrawerLayout来实现侧滑抽屉效果。