FragmentTabHost的使用

FragmentTabHost是support-v包下提供的用于集成和管理Fragment页面的组件.
今天要实现的效果图如下:

整体结构是MainActivity+5个模块的Fragment.
MainActivity的布局如下:

<?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">

     <!--真正的内容视图,用于展示Fragment-->
    <FrameLayout
        android:id="@+id/real_tabcontent"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <!--tabhost,必须使用系统的id-->
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


</LinearLayout>

每个tab的布局如下:

<?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="wrap_content"
              android:gravity="center"
              android:orientation="vertical">
    <!--tab图片-->
    <ImageView
        android:id="@+id/iv_tab"
        android:layout_width="26dp"
        android:layout_height="26dp"
        />
    <!--tab名字-->
    <TextView
        android:id="@+id/tv_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        android:textSize="12sp"/>
</LinearLayout>

MainActivity代码如下:

package blog.csdn.net.mchenys.bsbdj.modul.main;

import android.content.res.ColorStateList;
import android.os.Bundle;
import android.support.v4.app.FragmentTabHost;
import android.text.TextUtils;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

import blog.csdn.net.mchenys.bsbdj.R;
import blog.csdn.net.mchenys.bsbdj.common.base.BaseActivity;
import blog.csdn.net.mchenys.bsbdj.modul.attention.view.AttentionFragment;
import blog.csdn.net.mchenys.bsbdj.modul.essence.view.EssenceFragment;
import blog.csdn.net.mchenys.bsbdj.modul.mine.view.MineFragment;
import blog.csdn.net.mchenys.bsbdj.modul.newpost.view.NewpostFragment;
import blog.csdn.net.mchenys.bsbdj.modul.publish.view.PublishFragment;
import blog.csdn.net.mchenys.bsbdj.mvp.presenter.impl.MvpBasePresenter;
/**
 * Created by mChenys on 2016/5/27.
 */
public class MainActivity extends BaseActivity {

    //定义数组来存放tab的图片选择器
    private int[] mTabImage = {R.drawable.main_bottom_essence_selector,
            R.drawable.main_bottom_latest_selector,
            R.drawable.main_bottom_writeposts_selector,
            R.drawable.main_bottom_news_selector,
            R.drawable.main_bottom_my_selector};

    //tab选项卡的文字
    private String[] mTabTitle = {"精华", "新帖", "", "关注", "我的"};

    //每个tab对应的Fragment的字节码对象
    private Class[] fragmentArray = {EssenceFragment.class, NewpostFragment.class,
            PublishFragment.class, AttentionFragment.class, MineFragment.class};

    @Override
    protected boolean isHomePage() {
        return true;
    }

    @Override
    public Integer getLayoutResId() {
        return R.layout.activity_main;
    }

    @Override
    public void initView() {
        //获取tabhost
        FragmentTabHost tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        //绑定tabContent
        tabHost.setup(this, getSupportFragmentManager(), R.id.real_tabcontent);
        //去掉分割线
        tabHost.getTabWidget().setDividerDrawable(null);
        for (int i = 0; i < fragmentArray.length; i++) {
            //绑定Fragment,添加到的FragmentTabHost
            //设置tab的名称和view
            TabHost.TabSpec tabSpec = tabHost.
                    newTabSpec(mTabTitle[i]).
                    setIndicator(getTabItemView(i));
            Bundle bundle = new Bundle();
            bundle.putString("title", mTabTitle[i]);
            //添加tab和关联对应的fragment
            tabHost.addTab(tabSpec, fragmentArray[i], bundle);
            //设置tab的背景色
            tabHost.getTabWidget().
                    getChildAt(i).
                    setBackgroundColor(getResources().getColor(R.color.bgColor));
        }
        //默认选中第一个tab
        tabHost.setCurrentTab(0);
        //设置tab的切换监听
        tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
                //可以在这里监听tab的切换
            }
        });
    }

    //tab的字体选择器
    ColorStateList mColorStateList;

    /**
     * 给Tab按钮设置图标和文字
     */
    private View getTabItemView(int index) {
        View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.iv_tab);
        TextView textView = (TextView) view.findViewById(R.id.tv_tab);
        //设置图片选择器
        imageView.setImageResource(mTabImage[index]);
        //设置字体选择器
        if (mColorStateList == null) {
            mColorStateList = getResources().
                    getColorStateList(R.color.main_bottom_text_selector);
            textView.setTextColor(mColorStateList);
        }
        //设置tab的文字
        if (TextUtils.isEmpty(mTabTitle[index])) {
            //如果没有名称,则隐藏tab下的textView
            textView.setVisibility(View.GONE);
        } else {
            textView.setVisibility(View.VISIBLE);
            textView.setText(mTabTitle[index]);
        }
        return view;
    }


    @Override
    public void initListener() {

    }

    @Override
    public void initData() {

    }

    @Override
    public void reLoadData() {

    }

    @Override
    public void onClick(View v) {

    }

    @Override
    public MvpBasePresenter bindPresenter() {
        return null;
    }
}

最后附上字体选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:color="@color/main_bottom_text_normal" />
    <item android:state_selected="true" android:color="@color/main_bottom_text_select" />
</selector>

图片选择器有5个,这里附上一个,其他类似:

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:drawable="@drawable/main_bottom_essence_normal" />
    <item android:state_selected="true" android:drawable="@drawable/main_bottom_essence_press" />
</selector>