ActionBar和Fragment结合ViewPager实现TabActivity

这儿直接写实现步骤了，至于ActionBar, Fragment, ViewPager相关的基础知识就不在这儿讲了，这篇文章讲的不错：

http://blog.sina.com.cn/s/blog_5d6ee3360100r1my.html

 

开始实现

创建FragmentActivity，总的代码如下：

package com.example.fragmenttest;

import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.app.ActionBar.TabListener;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.Menu;

public class MainActivity extends FragmentActivity {

	public final static int TAB_INDEX_TAB_1 = 0;
	public final static int TAB_INDEX_TAB_2 = 1;
	public final static int TAB_INDEX_TAB_3 = 2;
	public final static int TAB_INDEX_TAB_4 = 3;
	public final static int TAB_COUNT = 4;

	private ViewPager mViewPager;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 创建Tab
		setupTest1();
		setupTest2();
		setupTest3();
		setupTest4();
		getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		getActionBar().setDisplayShowTitleEnabled(false);
		getActionBar().setDisplayShowHomeEnabled(false);

		// 创建 view pager
		mViewPager = (ViewPager)findViewById(R.id.pager);
		getFragmentManager();

		mViewPager.setAdapter(new TestViewPagerAdapter(getSupportFragmentManager()));
		mViewPager.setOnPageChangeListener(new TestPagerListener());
		mViewPager.setCurrentItem(TAB_INDEX_TAB_2);
	}

	private void setupTest1(){
		Tab tab = this.getActionBar().newTab();
		tab.setContentDescription("Tab 1");
		tab.setText("Tab 1");
		tab.setTabListener(mTabListener);
		getActionBar().addTab(tab);
	}

	private void setupTest2(){
		Tab tab = this.getActionBar().newTab();
		tab.setContentDescription("Tab 2");
		tab.setText("Tab 2");
		tab.setTabListener(mTabListener);
		getActionBar().addTab(tab);
	}

	private void setupTest3(){
		Tab tab = this.getActionBar().newTab();
		tab.setContentDescription("Tab 3");
		tab.setText("Tab 3");
		tab.setTabListener(mTabListener);
		getActionBar().addTab(tab);
	}

	private void setupTest4(){
		Tab tab = this.getActionBar().newTab();
		tab.setContentDescription("Tab 4");
		tab.setText("Tab 4");
		tab.setTabListener(mTabListener);
		getActionBar().addTab(tab);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}

	private final TabListener mTabListener = new TabListener() {
		private final static String TAG = "TabListener";
		@Override
		public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {
			// TODO Auto-generated method stub
			Log.d(TAG, "onTabReselected");
		}

		@Override
		public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
			// TODO Auto-generated method stub
			Log.d(TAG, "onTabSelected()");
			if (mViewPager != null)
				mViewPager.setCurrentItem(tab.getPosition());
		}

		@Override
		public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
			// TODO Auto-generated method stub
			Log.d(TAG, "onTabUnselected()");
		}
	};

	class TestPagerListener implements OnPageChangeListener{
		@Override
		public void onPageScrollStateChanged(int arg0) {
			// TODO Auto-generated method stub
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
			// TODO Auto-generated method stub
		}

		@Override
		public void onPageSelected(int arg0) {
			getActionBar().selectTab(getActionBar().getTabAt(arg0));
		}
	}
}

setupTab*展示了如何获取ActionBar，如何创建和添加Tab组件到ActionBar中。

注意setTabListener这个接口，我们是必须设的，否则要报错，在看一下TabListener的实现，我们只在onTabSelected中写了一句代码，就是要求ViewPager显示出对应位置的Fragment。

oncreate 中的NAVIGATION_MODE_TABS定义了ActionBar的模式，后面两名是隐藏Tilte bar。

 

ViewPager是一个容器，用来放Fragment，我们需要在FragmentActivity中添加它，我加在layout文件中的：

<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" >
    <com.example.fragmenttest.TestViewPage
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>

TestViewPager是ViewPager的一个子类，实现代码如下：

package com.example.fragmenttest;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;

public class TestViewPage extends ViewPager{
	
    public TestViewPage(Context context) {
        super(context);
    }

	public TestViewPage(Context context, AttributeSet attrs) {
		super(context, attrs);
	}
}

 

再看一下getFragmentManager()和getSupportFragmentManager()这两个接口，它们的区别是，前者调用Android框架的FragmentManger，后者是获取Android扩展库中的V4的Support FragmentManager，着为独立的APP只能用后者，原因android.jar包中没有前者的实现。

我们再看看TestViewPagerAdapter的代码：

package com.example.fragmenttest;

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

public class TestViewPagerAdapter extends FragmentPagerAdapter {

	public TestViewPagerAdapter(FragmentManager fm) {
		super(fm);
		// TODO Auto-generated constructor stub
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		switch (arg0) {
		case MainActivity.TAB_INDEX_TAB_1:
			return new Tab1Fragment();

		case MainActivity.TAB_INDEX_TAB_2:
			return new Tab2Fragment();

		case MainActivity.TAB_INDEX_TAB_3:
			return new Tab3Fragment();

		case MainActivity.TAB_INDEX_TAB_4:
			return new Tab4Fragment();
		}

		throw new IllegalStateException("No fragment at position " + arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return MainActivity.TAB_COUNT;
	}
}

其实这个类就是关联ViewPager和Fragment，注意这些Index。

可能有的同学还是想看一下Fragment的实现：

package com.example.fragmenttest;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab1Fragment extends Fragment {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
	}
	
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View fragmentView = inflater.inflate(R.layout.tab1_fragment_layout, container, false);
		return fragmentView;
	}
}

至于里面的layout就随便放了。

 

我们再回到FragmentActivity的onCreate, 我们看一下OnPageChangeListener，比较关键的就是onPageSelected里面的这句代码，它是实现Page切换时Tab也会切换，否则Tab和Fragment动作不一致。

 

很简单的一篇文章，对还没有理解到这种流程的同学提供一点帮助。

最后上个效果图吧！