开源项目AndroidUtil-采用Fragment实现TabHost

原文出自：方杰|http://fangjie.info/?p=141 转载请注明出处

学习Android也有一段时间了，感觉大部分的Android应用都有很多类似的组件，所以就打算做了这样一个开源项目，目的是整合一些Android开发常用的组件Demo，方便以后项目中直接拿来用。git地址：https://github.com/JayFang1993/AndroidUtil

废话不多说，首先讲第一个常用的组件TabHost的实现。之前我们可以通过继承TabActivity来实现，后来的API中已经不建议用这种方式了，所以今天我们主要讲的是用Fragment来实现Tabhost。
在新浪微博等很多APP中都有底部选项卡TabHost。首先看下实现后的效果。

一、TabHost的实现

Tabhost的每一个选项卡是通过RadioGroup实现的，每一个Tab就是一个RadioButton。页面除TabHost以外的内容区域是Fragment。下面是具体的布局文件main.xml

<RelativeLayout 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"
    tools:context=".MainActivity" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:id="@+id/title"
        android:text="昌大软院"
        android:textSize="18dp"
        android:textColor="#a8aeb5"
        android:typeface="monospace"
        android:background="@drawable/title_bg" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Done"
        android:textColor="#a8aeb5"
        android:layout_marginTop="10dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/done" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/back"
        android:textColor="#a8aeb5"
        android:text="Back"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="8dp"
        />

    <FrameLayout
         android:id="@+id/content"
         android:layout_below="@id/title"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"/> 

    <RadioGroup
        android:id="@+id/main_radio"
        android:layout_width="fill_parent"
        android:layout_height="48dp"
        android:layout_gravity="bottom"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:background="@drawable/tabhost_bg" >
        <RadioButton
            android:id="@+id/rb_home"
            android:drawableTop="@drawable/tab1"
            style="@style/tab"
            android:text="主页" />
        <RadioButton
            android:id="@+id/rb_at"
            style="@style/tab"
            android:drawableTop="@drawable/tab2"
            android:text="收藏夹" />
        <RadioButton
            android:id="@+id/rb_mess"
            style="@style/tab"
            android:drawableTop="@drawable/tab3"
            android:text="我" />
        <RadioButton
            android:id="@+id/rb_more"
            style="@style/tab"
            android:drawableTop="@drawable/tab4"
            android:text="更多" />
    </RadioGroup>
</RelativeLayout>

每一个Tab的样式：宽度、高度、背景图片这些都是相同的。所以写在了一个style文件中。styles.xml

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="tab">
        <item name="android:layout_height">48dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
        <item name="android:textSize">10dp</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:background">@drawable/tabhost_bg_selector</item>
        <item name="android:textColor">#a8aeb5</item>
        <item name="android:button">@null</item>
    </style>
</resources>

为了能够制造出Tab按下选中的效果，所以为Tab的背景设计了一个selector。tabhost_bg_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tabhost_press"  android:state_pressed="true" />
    <item android:drawable="@drawable/tabhost_press" android:state_checked="true" />
    <item android:drawable="@drawable/tabhost_bg"/>
</selector>

至此，关于TabHost的所有布局文件都写完了。下面看看Activity中的Java代码。MainActivity.java

public class MainActivity extends FragmentActivity {
    private FragmentManager fragmentManager;
    private RadioGroup radioGroup;
    private RadioButton rb1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fragmentManager = getSupportFragmentManager();
        radioGroup = (RadioGroup) findViewById(R.id.main_radio);
        rb1=(RadioButton) findViewById(R.id.rb_home);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @SuppressLint("NewApi")
        public void onCheckedChanged(RadioGroup group, int checkedId) {
                rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_bg_selector));
                FragmentTransaction transaction = fragmentManager.beginTransaction();
                ContentFrame fragment = null;
                switch(checkedId)
                {
                    case 0:
                        fragment= new ContentFrame();
                        break;
                    case 1:
                        fragment= new ContentFrame();
                        break;
                    case 2:
                        fragment= new ContentFrame();
                        break;
                    case 3:
                        fragment= new ContentFrame();
                        break;
                    default:
                        fragment= new ContentFrame();
                        break;
                }
                transaction.replace(R.id.content, (Fragment)fragment);
                transaction.commit();
            }
        });
        //设置默认选中第一项
        radioGroup.check(1);
        radioGroup.check(0);
        //设置按下的背景效果
        rb1.setBackgroundDrawable(getResources().getDrawable(R.drawable.tabhost_press));
    }
}

针对每一个选项卡的内容界面代码，随便写一个布局文件content.xml

<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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content"
        />
</LinearLayout>

内容部分的Java代码，实现和Activity差不多，不过这里需要继承Fragment而不是Activity。从content.xml中得到一个View，然后将这个View替换Main中的Fragment部分。

public class ContentFrame extends Fragment{
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.content, null);
        TextView textView = (TextView) view.findViewById(R.id.content);
        textView.setText("Hello world");
        return view;
    }
}

 补充：以上代码是考虑到Android 3.0以前API中没有Fragment，导入android-support-v4.jar后的代码，有几点区别：

1. 3.0之前的应该导入  import android.support.v4.app.*; 这个包中Fragment相关类；3.o之后的可以直接导入android.app.*;
2. 3.0之前的MainAcitivity要继承自FragmentActivity，3.0之后的直接继承自Activity;
3. 3.0之前   fragmentManager = getSupportFragmentManager();3.0之后  fragmentManager = getFragmentManager();