FragmentTabHost使用实例

FragmentTabHost的使用实例

1.什么是FragmentTabHost

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

2.使用FragmentTabHost

效果图:

Demo代码下载
activity_main.xml:

<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添加各标签:

 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函数原型为:

    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 的设置:

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