利用Fragment创建Tab导航

Fragment是检验一个Android开发技术水准的指标之一，这篇文章希望用最简单的代码引入对Fragment的应用，同时解决一个大家做app都会遇到的问题:如何做一个好的Tab导航条。

之前，做导航条我们可能会用到TabHost和TabActivity，谷歌的技术文档指出TabActivity那玩意已经过时了，应该使用Fragment来代替，那我们就来看看怎么代替吧。首先你得为项目导入android-support-v4，因为Fragment是3.0之后引入的概念，要在之前的版本上使用就必须导入支持包，具体怎么引入这里就不介绍了，很简单。

首先我们看看实际的效果:

            

简单的介绍下工程结构，有一个Activity，四个Fragment，每个Fragment有一个简单的layout文件以区分。

以下是Fragment以及其Layout的代码：

F1Fragment.java

package com.will.testfragment;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class F1Fragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.f1, container, false);}}

f1.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"     android:background="#FF4040"></LinearLayout>

代码很简单，大家可以把Fragment想象成是Activity的小弟，每个Activity大哥可以管理一群Fragment，大哥想让小弟出现的时候就出现，消失的时候就消失，该出现在哪就出现在哪。当然不同的大哥有可能会用到同一个小弟，也就是说Fragment还是可以复用的。这是一个初步的印象，更深入的我们以后的文章再谈。

下面我们看看MainActivity以及其layout代码:

MainActivity.java

package com.will.testfragment;import android.os.Bundle;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTabHost;public class MainActivity extends FragmentActivity {private FragmentTabHost mTabHost;@Overrideprotected 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);mTabHost.addTab(mTabHost.newTabSpec("红").setIndicator("红"),F1Fragment.class, null);mTabHost.addTab(mTabHost.newTabSpec("黄").setIndicator("黄"),F2Fragment.class, null);mTabHost.addTab(mTabHost.newTabSpec("蓝").setIndicator("蓝"),F3Fragment.class, null);mTabHost.addTab(mTabHost.newTabSpec("绿").setIndicator("绿"),F4Fragment.class, null);}}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >          <android.support.v4.app.FragmentTabHost    android:id="@android:id/tabhost"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <LinearLayout        android:orientation="vertical"        android:layout_width="match_parent"        android:layout_height="match_parent">        <FrameLayout            android:id="@+id/realtabcontent"            android:layout_width="match_parent"            android:layout_height="0dp"            android:layout_weight="1"/>        <FrameLayout            android:id="@android:id/tabcontent"            android:layout_width="0dp"            android:layout_height="0dp"            android:layout_weight="0"/>        <TabWidget            android:id="@android:id/tabs"            android:orientation="horizontal"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="0"/>    </LinearLayout></android.support.v4.app.FragmentTabHost></LinearLayout>

我已经尽量把代码写的最简，争取让大家一看就明白，简单的说几点：

一、layout中realtabcontent的位置决定了tab和content相对的位置，大家可以试着调整下

二、MainActivity里的setIndicator()方法可以传一个view进去，这样大家就可以自由修改tab的样式了

三、FragmentActivity是v4扩展包特有的，当你支持的sdk最低版本大于3.0时，直接使用Activity就行，否则就要使用这个FragmentActivity来支持Fragment了。

是不是很简单，确实很简单，不过这就是目前创建tab导航条最好的方式了。

下一篇文章，我们来做个炫一点的功能，就是让上面的4个页面不止可以通过点击tab跳转，还可以通过滑动，敬请期待。