使用Frgment和Viewpage实现标签布局

概述

实现标签布局有很多种方法，譬如使用TabHost。尽管条条大道通罗马，想要实现标签布局，还是推荐使用Fragment。标签布局在app中的使用多的是呢，譬如微信还有我们osc的第三方安卓客户端。

 
好了，人家漂亮的app也看了。下面我们也来实现一个高大上的东东吧。-。-

一步步完成标签布局app的制作

1. 新建一个Android project什么的就不用多写了吧。

2.我们需要用到Fragment，那么需在MainActvity中继承FragmentActivity。同时我需要在操作栏中添加标签，必须要实现ActionBar.TabListener这个类啊。至今为止，修改之后的MainActivity是这个模样的。

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener{

3. 打开MainActivity的布局文件，添加ViewPage元素（注意了，这个布局文件中其他元素都不能添加）当然是利用已经存在的activity_main.xml进行修改啦。如下：

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

4. 通常我比较喜欢把适配器类（adapter classes）放置在一个独立的包中，以此能够与activity分开来。此时我们新建一个命名为your_package_name.adapter,我命名为info.hww.tabsswipe.adapter   。

5. 接着就是创建为标签碎片（tab fragment）提供视图的FragmentPagerAdapter类了。在适配器包中创建一个继承FragmentPagerAdapter类的TabsPagerAdapter.java。记得需要重载继承类的构造方法和getItem以及getCount方法的。

/**
 * 
 */
package info.hww.tabsswipe.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * @author HuangWenwei
 * 
 * @date 2014年6月17日
 */
public class TabsPagerAdapter extends FragmentPagerAdapter {

	/**
	 * @param fm
	 */
	public TabsPagerAdapter(FragmentManager fm) {
		super(fm);
	}

	@Override
	public Fragment getItem(int arg0) {
		switch(arg0){
		case 0:
			//Top Rated fragment activity
			return new TopRatedFragment();
		case 1:
			//Games fragment activity
			return new GameFragment();
		case 2:
			//movies fragment activity
			return new MoviesFragment();
		}
		
		return null;
	}

	@Override
	public int getCount() {
		//get item count =equal to number of tabs
		return 3;
	}

}

在这里讲个我的习惯和技巧，在return new xxxFragment()时，点击编辑器行数中的红色x号，创建一个继承了Fragment的xxxFragment，感觉编码速度快了不少啊。

6. 为ActionBar添加Tab

在不使用其他UI元素，譬如TabHost的前提下显示标签，其实在操作栏中有一个内置的功能，那就是添加标签。很简单的，我们需要做的就是允许操作栏使用setNavigationMode(ActionBar.NAVIGATION_MODE_TABS)方法。此时应打开MainActivity.java文件。

在操作栏中添加了“最热，游戏、电影”三个标签。

MainActivity.java
public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {
 
    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;
    // Tab titles
    private String[] tabs = { "Top Rated", "Games", "Movies" };
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
 
        viewPager.setAdapter(mAdapter);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);       
 
        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

运行一下：就粗线这个模样了。

7. 为标签添加视图

在步骤5中，new粗来的xxxFragment就是我们需要为标签添加的视图，这就是自由发挥时间了，界面怎样设计取决于需求了。为了简单起见，三个Fragment中只是设计了颜色和一个文本的不同。代码如下链接所示吧，已经推到git@osc了。
src:http://git.oschina.net/hww/AndroidDemo/tree/master/TabsWithSwipe/src/info/hww/tabsswipe/adapter

res layout :http://git.oschina.net/hww/AndroidDemo/tree/master/TabsWithSwipe/res/layout

8. 结束

参考：http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/，也算是一篇翻译吧。