FragmentTabHost使用实例

FragmentTabHost的使用实例

1.什么是FragmentTabHost

在新浪微博、QQ、微信、OSChina客户端等APP中,底部均有一个类似tab标签栏的东西,通过点击标签栏中的不同标签,标签内容区域会显示响应的内容。

2.使用FragmentTabHost

效果图:

Demo代码下载
activity_main.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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=".MainActivity">


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


<android.support.v4.app.FragmentTabHost
android:id="@+id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dip" />


</LinearLayout>

其中id为realtabcontent的Fragment即为标签内容区域,其通过setup与FragmentTabHost关联,通过addTab添加各标签:

1
2
3
4
5
FragmentTabHost mTabHost = (FragmentTabHost) findViewById(R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
mTabHost.addTab(mTabHost.newTabSpec("0").setIndicator("News"), FragmentNews.class, null);
mTabHost.addTab(mTabHost.newTabSpec("1").setIndicator("Music"), FragmentMusic.class, null);
mTabHost.addTab(mTabHost.newTabSpec("2").setIndicator("Others"), FragmentOthers.class, null);

FragmentNews、FragmentMusic及FragmentOhters均继承自android.support.v4.app.Fragment包下的Fragment。
FragmentTabHost的addTab函数原型为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public void addTab(TabSpec tabSpec, Class<?> clss, Bundle args) {
tabSpec.setContent(new FragmentTabHost.DummyTabFactory(this.mContext));
String tag = tabSpec.getTag();
FragmentTabHost.TabInfo info = new FragmentTabHost.TabInfo(tag, clss, args);
if(this.mAttached) {
info.fragment = this.mFragmentManager.findFragmentByTag(tag);
if(info.fragment != null && !info.fragment.isDetached()) {
FragmentTransaction ft = this.mFragmentManager.beginTransaction();
ft.detach(info.fragment);
ft.commit();
}
}

this.mTabs.add(info);
this.addTab(tabSpec);
}

TabSpec用于设置tab的label及content,通过setIndicator(CharSequence label)/setIndicator(CharSequence label,Drawable icon)/setIndicator(View view)setContent(int viewId)/setContent(TabHost.TabContentFactory contentFactory)完成对Tab的设置
开源中国客户端源码中对Tab 的设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//mainTab为一个枚举类,在之前的代码中被初始化为包含了各Tab相关信息的内容
TabSpec tab = mTabHost.newTabSpec(getString(mainTab.getResName()));
//获取Tag栏中tag的布局
View indicator = LayoutInflater.from(getApplicationContext())
.inflate(R.layout.tab_indicator, null);
//获取tag布局中的textview
TextView title = (TextView) indicator.findViewById(R.id.tab_title);
//获取tag对应的图片
Drawable drawable = this.getResources().getDrawable(
mainTab.getResIcon());
//将图片至于tag的名字的上方
title.setCompoundDrawablesWithIntrinsicBounds(null, drawable, null,
null);
...
title.setText(getString(mainTab.getResName()));
tab.setIndicator(indicator);
tab.setContent(new TabContentFactory() {

@Override
public View createTabContent(String tag) {
return new View(MainActivity.this);
}
});
//mTabHost在源码中为一个继承自FragmentTabHost的类对象
mTabHost.addTab(tab, mainTab.getClz(), null);

本文首发于http://www.miaoyunze.com/,转载请注明出处