FragmentTabHost + Fragment 使用小记

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

Bottom:

  Activity布局文件:

    

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <FrameLayout
android:id="@+id/content_main"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@color/white"/> <android.support.v4.app.FragmentTabHost
android:id="@+id/tabHost_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<FrameLayout
android:id="@+id/tabContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.v4.app.FragmentTabHost> </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);
}

显示正常

FragmentTabHost + Fragment 使用小记


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>

结果为:

FragmentTabHost + Fragment 使用小记

下面的内容,无论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>

成功:

FragmentTabHost + Fragment 使用小记

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

上一篇:v-for


下一篇:导航栏 ------ z-index