FragmentTabHost + Fragment 使用小记

　　由于业务需要，需要在使用Activity的顶部使用一个导航栏，点击导航栏的tab，下面显示内容。决定采用项目中已经使用过的FragmentTabHost + Fragment的方式实现。不同的是之前的FragmentTabHost位于底部（下面统称：Bottom），现在需要放置在顶部（下面统称：Top）。下面将对这两种方式进行比较：

Bottom:

　　Activity布局文件：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:id="@+id/activity_main"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
 7
 8     <FrameLayout
 9         android:id="@+id/content_main"
10         android:layout_width="match_parent"
11         android:layout_height="0dp"
12         android:layout_weight="1"
13         android:background="@color/white"/>
14
15     <android.support.v4.app.FragmentTabHost
16         android:id="@+id/tabHost_main"
17         android:layout_width="match_parent"
18         android:layout_height="wrap_content"
19         android:layout_marginTop="5dp">
20         <FrameLayout
21             android:id="@+id/tabContent"
22             android:layout_width="match_parent"
23             android:layout_height="wrap_content"/>
24     </android.support.v4.app.FragmentTabHost>
25
26 </LinearLayout>

Activity中设置FragmentTabHost：

    protected void initTabs() {
        fm = getSupportFragmentManager();
        layoutInflater = LayoutInflater.from(this);

        tabLabels  = new String[]{
                CommonUtil.getStringFromRes(this, R.string.text_tab_promotion),
                CommonUtil.getStringFromRes(this, R.string.text_tab_order),
                CommonUtil.getStringFromRes(this, R.string.text_tab_personal)
        };

        tabHost.setup(this, fm, R.id.content_main);
        for (int i=0; i<fragments.length; i++) {
            TabHost.TabSpec tabSpec = tabHost.newTabSpec(tabLabels[i]).setIndicator(getTabItemView(i));
            tabHost.addTab(tabSpec, fragments[i], null);
            tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.color.white);
        }
        tabHost.getTabWidget().setDividerDrawable(null);
    }

显示正常

Top：

top方式Activity中对FragmentTabHost的设置跟上面一样，因此只对Layout做对比。

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

    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="40dp"/>

    <FrameLayout
        android:id="@+id/fragment_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

结果为：

下面的内容，无论tab切换到哪一个，都是空白。针对这种情况，进行断点分析，发现Fragment中的View控件都已经被加载，只是被遮挡住了。

因此，问题应该出在布局上。

　　偶然的将LinearLayout换成RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_marginTop="42dp"
        android:id="@+id/fragment_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.v4.app.FragmentTabHost
        android:id="@+id/tab_host"
        android:layout_width="match_parent"
        android:layout_height="40dp"/>

</RelativeLayout>

成功：

这里为什么使用LinlearLayout不成功，换成RelativeLayout可以，最终的原因，待研究清楚再总结。