12.FragmentTabHost创建底部导航栏

创建底部导航栏

TabHost

TabHost组件可以在界面中存放多个选项卡。

TabSpec
代表了选项卡界面，添加一个TabSpec即可添加到TabHost。

• 创建选项卡：newTabSpec(String tag)，创建一个选项卡
• 添加选项卡：addTab(tabSpec);

FragmentTabHost继承关系图

分析图

效果图

使用步骤：

1. 在xml中引用

注意，

• 这个FragmentTabHost是继承自原生的FragmentTabHost的，原生的FragmentTabHost每次切换，Fragment都会走一遍onCreate()和onResume()方法
• FragmentTabHost控件的id必须是android:id="@android:id/tabhost"
• FragmentTabHost里面的FrameLayout的id必须是android:id="@android:id/tabcontent"
• FragmentTabHost上面的FrameLayout才是我们真正使用的
• 对于布局，必须要这样写。

2. 创建Tab类

Tab类中包含标题，图片，和类

public class Tab {

    /**
     * 文字
     */
    private int title;

    /**
     * 图标
     */
    private int icon;

    /**
     * 对应的Fragment
     */
    private Class fragment;

    public Tab(int title, int icon, Class fragment) {
        this.title = title;
        this.icon = icon;
        this.fragment = fragment;
    }

    public int getTitle() {
        return title;
    }

    public void setTitle(int title) {
        this.title = title;
    }

    public int getIcon() {
        return icon;
    }

    public void setIcon(int icon) {
        this.icon = icon;
    }

    public Class getFragment() {
        return fragment;
    }

    public void setFragment(Class fragment) {
        this.fragment = fragment;
    }
}

3. 创建各个Tab实例

        // 主页
        Tab tabHome = new Tab(R.string.home, R.drawable.selector_icon_home, HomeFragment.class);
        // 热卖
        Tab tabHot = new Tab(R.string.hot, R.drawable.selector_icon_hot, HotFragment.class);
        // 分类
        Tab tabCategory = new Tab(R.string.category, R.drawable.selector_icon_category, CategoryFragment.class);
        // 购物车
        Tab tabCart = new Tab(R.string.cart, R.drawable.selector_icon_cart, CartFragment.class);
        // 我的
        Tab tabMine = new Tab(R.string.mine, R.drawable.selector_icon_mine, MineFragment.class);

        mTabs.add(tabHome);
        mTabs.add(tabHot);
        mTabs.add(tabCategory);
        mTabs.add(tabCart);
        mTabs.add(tabMine);

4. 调用setup函数

mTabhost = findViewById(android.R.id.tabhost);
mTabhost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

如果使用findViewById加载TabHost，则在添加选项卡之前setup()函数。

5. 将TabSpec添加入TabHost中

for (Tab tab : mTabs) {
    // 创建一个与选项卡主机关联的TabSpec
    TabHost.TabSpec tabSpec = mTabhost.newTabSpec(getString(tab.getTitle()));
    // 将视图指定为选项卡指示符
    tabSpec.setIndicator(buildIndicator(tab));
    // 将选项卡添加进选项卡主机里
    mTabhost.addTab(tabSpec,tab.getFragment(),null);
}

private View buildIndicator(Tab tab) {
    View view = mInflater.inflate(R.layout.tab_indicator,null);
    ImageView img = view.findViewById(R.id.icon_tab);
    TextView text = view.findViewById(R.id.text_indicator);

    img.setBackgroundResource(tab.getIcon());
    text.setText(tab.getTitle());

    return view;
}

// 设置item之间的分割线的，这里设置为无
mTabhost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
// 设置当前默认选中的tab
mTabhost.setCurrentTab(0);

TabSpec的布局为：

Color文件夹下的字体选择器

对于布局中字体选择器，即在不同状态下，显示不同颜色的字体。需要在res文件夹下创建一个color文件夹，专门用来放置。