Fragment结合viewPager和下面4个页卡的使用

由于这里我们的ViewPager每次滑动的时候是显示一个Fragment，但是无论是FragmentPagerAdapter还是FragmentStatePagerAdapter适配器，这两种适配器都来自第三方包v4包里面，所以我们的Fragment也都要采用V4包的，注意下：这里可能会和android自带的Fragment引起混淆。大致的了解是FragmentPagerAdapter在滑动的时候是不会完全的去销毁我们的每个fragment，适用于那些相对静态的页，数量也比较少的那种，但是FragmentStatePagerAdapter只保留当前页面，当页面离开视线后，就会被消除，释放其资源；而在页面需要显示时，生成新的页面，实现的好处就是当拥有大量的页面时，不必在内存中占用大量的内存。

下面是我的主页面：

public class FragmentViewpagerTabActivity extends FragmentActivity implements
		OnPageChangeListener, OnCheckedChangeListener {
	private ViewPager mViewPager;
	private RadioGroup mRadioGroup;
	private ArrayList<Fragment> mList;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);

		setContentView(R.layout.fragmentviewpager_tab_layout);

		mRadioGroup = (RadioGroup) findViewById(R.id.fragment_tabhost_radiogroup);
		mViewPager = (ViewPager) findViewById(R.id.fragment_viewpager);

		mList = new ArrayList<Fragment>();
		mList.add(ViewpagerImgFragment.newFragment());
		mList.add(ViewpagerMineFragment.newFragment());
		mList.add(ViewpagerListFragment.newFragment());
		mList.add(ViewpagerImgFourFragment.newFragment());

		FragmentAdapter adapter = new FragmentAdapter(
				getSupportFragmentManager());
		mViewPager.setAdapter(adapter);

		adapter.setData(mList);
		// 设置viewpager保留多少个显示界面
		mViewPager.setOffscreenPageLimit(1);
		// 默认选中第一项
		((RadioButton) mRadioGroup.getChildAt(0)).toggle();

		mViewPager.setOnPageChangeListener(this);
		mRadioGroup.setOnCheckedChangeListener(this);
	}

里面主要进行一些初始化的操作，实例化控件及监听的注册。其中往list里面添加的fragment的实例，是通过自己写的方法调用实例出来的：ViewpagerImgFragment.newFragment()：方法的内容可以传递一些我们需要的参数，没有也可以不用传递，方法在下面，很简单就是实例化我们继承了Fragment类的类：

	public static ViewpagerImgFragment newFragment(){
		
		return new ViewpagerImgFragment();
	}

下面是我们的适配器，继承自FragmentPagerAdapter,这个里面只需要去实继承类的现构造方法，和getItem（）和getCount（）方法，为了降低我们和主界面的耦合度，所以重新new了一个数组：

	public class FragmentAdapter extends FragmentPagerAdapter {
		private ArrayList<Fragment> lists = new ArrayList<Fragment>();

		public FragmentAdapter(FragmentManager fm) {
			super(fm);

		}

		public void setData(ArrayList<Fragment> listsm) {
			lists = listsm;
			notifyDataSetChanged();
		}

		public Fragment getItem(int arg0) {
		
			return lists.get(arg0);
		}

		public int getCount() {
			return lists.size();
		}

上面构造方法传一个FragmentManager的实例，这个简单，V4包的用这个方法，直接getSupportFragmentManager()就行，setData（）方法里面我们传进来一个数组，因为我们的数据源有时候是会去联网取数据的，所以就提出来写，如果在构造方法里面一起传的话，适合于我们测试把数据写死，getItem（）获取我们数组里面某一个Fragment用于我们滑动到下一页显示，getCount（）获取它在数组中的数据的个数但是他们只会在第一次被添加进去，后面就不会再执行了，除了第一次加载外，可以打印试试。

其中的RadioGroup在XML布局里面包含了4个RadioButton，用于做我的页卡，另外的4个Fragment就是加载我们的布局，就没了：

效果图如下：

 

看主界面里面的((RadioButton) mRadioGroup.getChildAt(0)).toggle(); 就是让我们一进去就默认选中第一页卡，现在要做的就是将我们下面的4个页卡和上面的滑动怎么结合，

首先监听和注册我们的viewPager和RadioGroup,通过mRadioGroup.getChildAt(0)方法可以去控制它的子类：

viewpager的监听肯定在滑动完成里面处理，如下：

	// 开始
	public void onPageScrollStateChanged(int arg0) {

	}

	// 正在改变中
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}

	// 结束的时候监听，显示英爱去显示哪一个tab页卡
	public void onPageSelected(int arg0) {
		switch (arg0) {
		case 0:			
			((RadioButton) mRadioGroup.getChildAt(arg0)).toggle();
			break;
		case 1:
			((RadioButton) mRadioGroup.getChildAt(arg0)).toggle();
			break;
		case 2:
			((RadioButton) mRadioGroup.getChildAt(arg0)).toggle();
			break;
		case 3:
			((RadioButton) mRadioGroup.getChildAt(arg0)).toggle();
			break;

		}

	}

主要就是判断滑动到哪一页，让下面的tab也跟着一起被选中。

下面就是Radiogroup的监听：

	/**
	 * Radiogroup的监听，获取ViewPager的当前同样的项即可
	 */
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		
		switch (checkedId) {
		case R.id.fragment_groupon:
			mViewPager.setCurrentItem(0);
			break;
		case R.id.fragment_merchant:
			mViewPager.setCurrentItem(1);
			break;
		case R.id.fragment_mine:
			mViewPager.setCurrentItem(2);
			break;
		case R.id.fragment_more:
			mViewPager.setCurrentItem(3);
			break;
		}
	}

最后就是XML文件就是一个布局包括了一个viewpager和 Radiogroup包含的4个RadioButton:

<?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" >

    <RadioGroup
        android:id="@+id/fragment_tabhost_radiogroup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/lanse"
        android:padding="3dp"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/fragment_groupon"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="3dp"
             android:gravity="center"
            android:drawableTop="@drawable/select_radgrop_tab_groupon"
             android:paddingLeft="0dp"
            android:text="团购" />

        <RadioButton
            android:id="@+id/fragment_merchant"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawablePadding="3dp"
             android:gravity="center"
               android:paddingLeft="0dp"
            android:drawableTop="@drawable/selcet_radgroup_tabb_merchant"
            android:text="商家" />

        <RadioButton
            android:id="@+id/fragment_mine"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
              android:paddingLeft="0dp"
             android:gravity="center"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/select_radgrop_tab_mine"
            android:text="我的" />

        <RadioButton
            android:id="@+id/fragment_more"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
             android:paddingLeft="0dp"
             android:gravity="center"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/select_radgroup_tab_more"
            android:text="更多" />
    </RadioGroup>

</LinearLayout>

在写这个布局时，我的图片和下面的文字，打死也居不了中，后面用的这个属性就老实的:android:paddingLeft="0dp",因为RadioButton有按钮的效果，适合做tab的页卡选项按钮。android:button="@null"是取消那个单选框O。

最后就是这个viewpager的这个属性：mViewPager.setOffscreenPageLimit(1);它相当于变相的可以帮我们保存界面，但是这个肯定是不提倡，只有去重写适配器里面的开始和销毁2个方法来保存我们想要保存的界面，或者销毁之前把数据取下来传达我们的Fragment里面接收，然后再创建的时候在放上去也行。

最后的来一张效果图，第二页的：