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

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

下面是我的主页面：

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

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