创建底部导航栏

TabHost

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

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

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

FragmentTabHost继承关系图

分析图

效果图

使用步骤：

1. 在xml中引用

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/bg_color">

    </FrameLayout>

    <com.study.wumeng.cniaoshop.widget.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

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

        </FrameLayout>

    </com.study.wumeng.cniaoshop.widget.FragmentTabHost>

</LinearLayout>

注意，

• 这个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的布局为：

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

    <ImageView
        android:id="@+id/icon_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/text_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/selector_tab_text"
        android:layout_marginTop="2dp"/>

</LinearLayout>

Color文件夹下的字体选择器

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