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);
    }
}