利用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 {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		// Inflate the layout for this fragment
		return 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;

	@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);

		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跳转，还可以通过滑动，敬请期待。