【Android Widget】FragmentTabHost

android.support.v4包里面提供了FragmentTabHost用来替代TabHost，FragmentTabHost内容页面支持Fragment，下面我们就通过示例来看他的用法

效果图（仿新浪微博）：

主界面布局文件：

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

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

    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/maintab_toolbar_bg" >

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
    </android.support.v4.app.FragmentTabHost>

</LinearLayout>

主页实现代码

public class MainActivity extends FragmentActivity {

    private FragmentTabHost mTabHost;

    private Class<?> fragments[] = { FragmentPage1.class, FragmentPage2.class,
            FragmentPage3.class, FragmentPage4.class, FragmentPage5.class };

    // 定义数组来存放按钮图片
    private int imageIds[] = { R.drawable.tab_home_btn,
            R.drawable.tab_message_btn, R.drawable.tab_selfinfo_btn,
            R.drawable.tab_square_btn, R.drawable.tab_more_btn };

    // Tab选项卡的文字
    private String tabLabels[] = { "首页", "消息", "好友", "广场", "更多" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

        for (int i = 0; i < 5; i++) {
            mTabHost.addTab(
                    mTabHost.newTabSpec(tabLabels[i]).setIndicator(
                            getIndicator(i)), fragments[i], null);
        }

    }

    /**
     * 获取指示器
     * 
     * @param index
     * @return
     */
    private View getIndicator(int index) {
        TextView textView = (TextView) View.inflate(this,
                R.layout.tab_item_view, null);
        textView.setCompoundDrawablesWithIntrinsicBounds(null, getResources()
                .getDrawable(imageIds[index]), null, null);
        textView.setText(tabLabels[index]);
        return textView;
    }

}

指示器布局indicator_view.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dip"
    android:background="@drawable/tab_bg_selector"
    android:gravity="center"
    android:textColor="#ffffff"
    android:textSize="12sp" />

每个Fragment很简单 就一个TextView这里就不贴出来了

源码下载：http://files.cnblogs.com/malinkang/FragmentTabHostExample.zip