Android FragmentTabHost 使用方法詳解

FragmentTabHost作為Android4.0版本的控制元件, 已經被專案廣泛使用, 5.0版本又推出TabLayout+ViewPager顯示多頁. 我來講解如何使用FragmentTabHost.

Github下載地址

主要包括:

(1) 自定義Tab的圖片資源和去掉分割線.
(2) 快取Fragment的佈局, 減少填充.

在切換頁面時, 控制元件會呼叫Fragment的onCreateView, 重新建立頁面.
通過快取頁面, 可以增強效能.

1. 佈局

FragmentTabHost是原生控制元件, 並不需要新增其他的maven庫.

包括標籤組Tabs和頁面TabContainer, 標籤組固定大小, 頁面填充.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
    android:id="@android:id/tabhost"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"/>

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

    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

注意控制元件的id必須是Android提供的標準id, 即”@android:id”.

Fragment佈局, 包含一行文字提示.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <TextView
        android:id="@+id/tab_tv_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        tools:text="Test"/>

</LinearLayout>

Tab佈局, 包含一個圖片控制元件.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/tab_iv_image"
        android:padding="12dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@null"
        tools:src="@drawable/tab_assistant"/>

</LinearLayout>

2. 主頁

setup設定頁面組合, 卻掉分割線etDividerDrawable(null), 設定Tab.

使用自定義的圖片資源, newTabSpec設定Fragment的Tag標籤.

/**
 * 主頁, 切換Tab標籤顯示不同頁面.
 *
 * @author C.L.Wang
 */
public class MainActivity extends AppCompatActivity {

    @Bind(android.R.id.tabhost) FragmentTabHost mTabHost;

    // 圖片
    @DrawableRes
    private int mImages[] = {
            R.drawable.tab_counter,
            R.drawable.tab_assistant,
            R.drawable.tab_contest,
            R.drawable.tab_center
    };

    // 標題
    private String mFragmentTags[] = {
            "counter",
            "assistant",
            "contest",
            "center"
    };

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

        ButterKnife.bind(this);

        mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
        mTabHost.getTabWidget().setDividerDrawable(null); // 去掉分割線

        for (int i = 0; i < mImages.length; i++) {
            // Tab按鈕新增文字和圖片
            TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mFragmentTags[i]).setIndicator(getImageView(i));
            // 新增Fragment
            mTabHost.addTab(tabSpec, FragmentTab.class, null);
            // 設定Tab按鈕的背景
            mTabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.pedo_actionbar_bkg);
        }
    }

    // 獲得圖片資源
    private View getImageView(int index) {
        @SuppressLint("InflateParams")
        View view = getLayoutInflater().inflate(R.layout.view_tab_indicator, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.tab_iv_image);
        imageView.setImageResource(mImages[index]);
        return view;
    }
}

3. 切換頁

顯示不同Tag標籤. 快取頁面, 注意關聯前, 刪除父控制元件關聯. 頁面顯示Tag資訊.

/**
 * Tab的Fragment
 * <p/>
 * Created by wangchenlong on 15/12/28.
 */
public class FragmentTab extends Fragment {

    @Bind(R.id.tab_tv_text) TextView mTvText;

    private View mViewContent; // 快取檢視內容

    @Nullable @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (mViewContent == null) {
            mViewContent = inflater.inflate(R.layout.fragment_tab, container, false);
        }

        // 快取View判斷是否含有parent, 如果有需要從parent刪除, 否則發生已有parent的錯誤.
        ViewGroup parent = (ViewGroup) mViewContent.getParent();
        if (parent != null) {
            parent.removeView(mViewContent);
        }

        ButterKnife.bind(this, mViewContent);
        return mViewContent;
    }

    @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // 顯示Fragment的Tag資訊
        mTvText.setText(String.valueOf("Page: " + getTag()));
    }

    @Override public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }
}

OK, That’s all! 熟練使用控制元件很重要. Enjoy It!