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里面接收，然后再创建的时候在放上去也行。

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