FragmentTabHost介绍

FragmentTabHost代表整个底部导航栏，它包含的每一个Item，称之为TabSpec，点击可以切换到相应的Fragment分页。TabSpec里面需要有指示器Indicator，用来设置样式。

相较于RadioButton（RadioGroup）+ Fragment的实现方式，FragmentTabHost实现简单，对资源的控制相对较好。

FragmentTabHost基本用法

1.FragmentTabHost XML布局

注意
  1.  使用 v4 的FragmentTabHost
  2.  FragmentTabHost需要使用Android自带的id
        @android:id/tabhost

  3.  FragmentTabHost中的FrameLayout也需要使用自带id
        @android:id/tabcontent
      因为实现的是底部菜单，底部的FrameLayout设置为0dp
      真正展示内容的是上方的FrameLayout

<LinearLayout 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:orientation="vertical"
    tools:context=".ui.activity.MainActivity">

    <FrameLayout
        android:id="@+id/fra_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E8E8E8">

        <FrameLayout
            android:id="@android:id/tabcontent"

            android:layout_width="0dp"
            android:layout_height="0dp" />
    </android.support.v4.app.FragmentTabHost>
</LinearLayout>

2.drawable设置
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/red_img" android:state_selected="true" />
    <item android:drawable="@mipmap/base_img" />
</selector>


文本选择设置
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_selected="true" />

    <item android:color="#000" />
</selector>


设置Tab Host每个Item的样式
<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">

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

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="123"
        android:textColor="@color/text_press" />

</LinearLayout>

2.代码实现
步骤
1.  为TabHost设置初始化
mFraTabHost.setup(mContext, getSupportFragmentManager(), R.id.fra_content);

2.  生成每个Item
TabHost.TabSpec mTabSpec = mFraTabHost.newTabSpec("Tag" + i);

3.  为每个Item指定样式
mTabSpec.setIndicator(View view);

4.  将每个Item添加到TabHost，同时也添加Fragment
mFraTabHost.addTab(mTabSpec, fraClass[i], null);

public class MainActivity extends AppCompatActivity {

    private FragmentTabHost mFraTabHost;
    private Context mContext;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
        initTabHost();
        initEvent();
    }

    private void initEvent() {
        //监听分页切换
        mFraTabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String s) {
                Log.i("TagInfo", s);
            }
        });
    }

    private void initTabHost() {
        mFraTabHost.setup(mContext, getSupportFragmentManager(), R.id.fra_content);
        initTabHostData();

        //设置显示的当前页
        mFraTabHost.setCurrentTab(1);
        //去掉分割线
        mFraTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
    }

    private void initTabHostData() {
        Class[] fraClass = {RedFragment.class, BlueFragment.class};
        int[] icon = {R.drawable.red_press, R.drawable.blue_press};
        String[] title = {"Red", "Blue"};

        for (int i = 0; i < fraClass.length; i++) {
            TabHost.TabSpec mTabSpec = mFraTabHost.newTabSpec("Tag" + i);
            mTabSpec.setIndicator(getTabHostItemView(icon[i], title[i]));
            mFraTabHost.addTab(mTabSpec, fraClass[i], null);
        }
    }

    public View getTabHostItemView(int icon, String itemText) {
        LayoutInflater inflater = LayoutInflater.from(this);
        View view = inflater.inflate(R.layout.item_tabhost, null);
        TextView mItemText = view.findViewById(R.id.tab_text);
        ImageView mItemImg = view.findViewById(R.id.tab_img);
        mItemImg.setImageResource(icon);
        mItemText.setText(itemText);
        return view;
    }

    private void initView() {
        mContext = this;
        mFraTabHost = findViewById(android.R.id.tabhost);
    }
}