TabHost选项卡的实现(二):使用Fragment实现

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

1. Fragment学习(一) :生命周期

2. Fragment开发实战(一)

3. Fragment学习(二): 管理Fragment和Fragment通讯

4. Fragment开发实战(二)


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

TabHost选项卡的实现(二):使用Fragment实现TabHost选项卡的实现(二):使用Fragment实现

TabHost选项卡的实现(二):使用Fragment实现TabHost选项卡的实现(二):使用Fragment实现


开发过程:

首先,我们需要定义一个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


上一篇:Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果


下一篇:vsftp用户ftp能上传不能删除文件夹,用户组不对,umask