TabHost选项卡的实现（二）：使用Fragment实现

在上一篇博客《TabHost选项卡的实现（一）：使用TabActivity实现》中，讲解了如何使用TabActivity创建管理选项卡，但是，通过TabActivity创建选项卡的方式已经不再推荐使用，Android3.0之后推出Fragment，并推荐我们使用Fragment来实现标签页。关于Fragment的使用，可以参考我之前的几篇博文：

1. Fragment学习（一） ：生命周期

2. Fragment开发实战（一）

3. Fragment学习（二）: 管理Fragment和Fragment通讯

4. Fragment开发实战（二）

如果已经对Fragment很了解了，那接下来，我们介绍，如何使用Fragment来实现TabHost，效果图如下：

开发过程：

首先，我们需要定义一个Activity，该Activity管理了社会新闻、生活新闻、娱乐新闻、军事新闻这四个子布局，也就是Fragment。我们先定义该Activity的布局界面：

main_activity.xml

<?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" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
 
        <TextView
            android:id="@+id/tb1"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="社会新闻" />
 
        <TextView
            android:id="@+id/tb2"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="生活新闻" />
 
        <TextView
            android:id="@+id/tb3"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="娱乐新闻" />
 
        <TextView
            android:id="@+id/tb4"
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="军事新闻" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/content"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
    </LinearLayout>
 
</LinearLayout>

我们可以看出，程序使用四个TextView代表了效果图上的四个Tab标签页，在实际的开发中，我们可以为该标签做一些效果，使其更加美观，此处介绍不再详细介绍。

在页面布局的下面，我们定义了一个id为content的LinearLayout布局，该布局负责动态替换Fragment的布局。

接下来，我们定义四个Fragment，每个Fragment管理一个子布局，因为Demo里每个Fragment都相似，此处只贴出一个Fragment1.java的代码：

package com.chen.yuan.fragment;
 
import com.chen.yuan.R;
 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class Fragment1 extends Fragment
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        return inflater.inflate(R.layout.fragment1, null);
    }
}

该Fragment管理的布局文件为fragment1.xml，我们根据需要定义布局内容：

<?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"
    >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="社会新闻"
        android:textColor="#ff00ff"
        android:textSize="20sp"
        android:layout_marginTop="20dp"
        android:layout_gravity="center_horizontal"
         />
 
</LinearLayout>

四个标签页，对应于四个Fragment，而Fragment应该归于Activity管理，我们使用Fragment动态的管理Fragment：

public class MainActivity extends Activity implements OnClickListener
{
    private TextView tv1 = null;
 
    private TextView tv2 = null;
 
    private TextView tv3 = null;
 
    private TextView tv4 = null;
 
    private FragmentManager fm = null;
 
    private FragmentTransaction ft = null;
 
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        tv1 = (TextView) findViewById(R.id.tb1);
        tv2 = (TextView) findViewById(R.id.tb2);
        tv3 = (TextView) findViewById(R.id.tb3);
        tv4 = (TextView) findViewById(R.id.tb4);
 
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        tv4.setOnClickListener(this);
 
        fm = getFragmentManager();
        ft = fm.beginTransaction();
 
        ft.replace(R.id.content, new Fragment1());
        ft.commit();
    }
 
    @Override
    public void onClick(View v)
    {
        ft = fm.beginTransaction();
        switch (v.getId())
        {
            case R.id.tb1:
 
                ft.replace(R.id.content, new Fragment1());
 
                break;
            case R.id.tb2:
                ft.replace(R.id.content, new Fragment2());
                break;
            case R.id.tb3:
                ft.replace(R.id.content, new Fragment3());
                break;
            case R.id.tb4:
                ft.replace(R.id.content, new Fragment4());
                break;
 
            default:
                break;
        }
        ft.commit();
    }
}

代码具体啥意思，我就不再说明了，建议先学会Fragment的基本使用再看该例子，很简单。

代码下载地址免费： http://download.csdn.net/detail/zuiwuyuan/7986609