ViewPager之Fragment页面切换

一、概述

ViewPager是android-support-v4中提供的类，它是一个容器类，常用于页面之间的切换。

继上篇文章《ViewPager之引导页》之后，本文主要介绍ViewPager更为通用的实践：ViewPager搭配Fragment实现页面切换。

这种实现方式相对于上篇文章而言，可以更好的支持不同页面各自的复杂逻辑，与此同时，也能够保障页面之间的耦合度尽可能的低。

按照惯例，先晒出效果图：

      

二、实现思路

首先分析一下不同区域的交互需求：

中间灰色区域除了要支持三套完全不同的逻辑之外，还要支持左右滑动切换。而顶部ActionBar和底部Tab切换都只需要更新状态，无需整体变换，也不需要整体滑动；

因此，中间灰色区域用ViewPager实现，它包含三个Fragment子页面。而顶部ActionBar和底部Tab切换各自是一个Fragment，直接隶属于Activity。

然后解决不同Fragment之间的依赖关系：

五个Fragment之间沟通的唯一纽带就是ViewPager页面的切换，因此，ViewPager页面切换时通知到不同的Fragment即可。

 [转载请保留本文地址：http://www.cnblogs.com/snser/p/5700754.html] 

三、开始干活

3.1 搭建整体框架

本文的五个Fragment采用三种方式载入：

ViewPager中的三个Fragment自然是通过其Adatper进行载入，顶部的TitleFragment(ActionBar)直接声明在layout布局中，而底部的TabFragment采用动态载入。

这样做的目的是方便后续分析不同载入方式的实际载入实际。

ok，整体的layout布局自然也就成了下面的样子：

viewpager_fragment.xml(activity的布局)： 

 <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"
     android:background="@color/background_default"
     tools:context="${relativePackage}.${activityClass}" >

     <fragment
         android:id="@+id/viewpager_fragment_title"
         android:name="cc.snser.cnblog5700754.TitleFragment"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentTop="true" />

     <android.support.v4.view.ViewPager
         android:id="@+id/viewpager_fragment_pager"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_above="@+id/viewpager_fragment_container"
         android:layout_below="@+id/viewpager_fragment_title" />

     <FrameLayout
         android:id="@id/viewpager_fragment_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true" >
     </FrameLayout>

 </RelativeLayout>

对应的，主界面的逻辑如下：

ViewPagerFragmentActivity.java：

 public class ViewPagerFragmentActivity extends FragmentActivity {
     private FragmentManager mManager = getSupportFragmentManager();

     private TitleFragment mTitleFragment;
     private TabFragment mTabFragment;
     private ViewPager mPager;

     private ViewPagerAdapter mAdapter;

     private static final int DEFAULT_PAGE = 1; //默认页面

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         Log.d("Snser", "ViewPagerFragmentActivity onCreate");
         super.onCreate(savedInstanceState);
         Log.d("Snser", "ViewPagerFragmentActivity onCreate setContentView");
         setContentView(R.layout.viewpager_fragment);
         Log.d("Snser", "ViewPagerFragmentActivity onCreate initView");
         initView();
     }

     private void initView() {
         mTitleFragment = (TitleFragment)mManager.findFragmentById(R.id.viewpager_fragment_title);
         mTabFragment = new TabFragment();
         mTabFragment.setOnTabClickListenser(new ViewPageTabClickListenser());
         mManager.beginTransaction().replace(R.id.viewpager_fragment_container, mTabFragment).commit();
         mPager = (ViewPager)findViewById(R.id.viewpager_fragment_pager);
         mPager.setAdapter(mAdapter = new ViewPagerAdapter(mManager));
         mPager.setOnPageChangeListener(new ViewPageChangeListener());
         setCurrentItem(DEFAULT_PAGE);
     }

     @Override
     protected void onResume() {
         Log.d("Snser", "ViewPagerFragmentActivity onResume");
         super.onResume();
     }

     private class ViewPageChangeListener implements OnPageChangeListener {
         @Override
         public void onPageSelected(int position) {
             setCurrentItem(position);
         }

         @Override
         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
         }

         @Override
         public void onPageScrollStateChanged(int state) {
         }
     }

     private class ViewPagerAdapter extends FragmentPagerAdapter {
         private ArrayList<PagerFragment> mFragments = new ArrayList<PagerFragment>();

         public ViewPagerAdapter(FragmentManager fm) {
             super(fm);
             mFragments.add(new ClickFragment());
             mFragments.add(new DateFragment());
             mFragments.add(new AnimFragment());
         }

         @Override
         public Fragment getItem(int position) {
             return mFragments.get(position);
         }

         @Override
         public int getCount() {
             return mFragments.size();
         }
     }

     private class ViewPageTabClickListenser implements OnTabClickListenser {
         @Override
         public void onTabClick(int tab) {
             setCurrentItem(tab);
         }
     }

     private void setCurrentItem(int item) {
         if (item == mPager.getCurrentItem()) {
             //此时是源于initView或onPageSelected的调用
             notifyPageChangeToFragments(item);
         } else {
             //此时是源于initView或onTabClick的调用，后续会自动触发一次onPageSelected
             mPager.setCurrentItem(item);
         }
     }

     private void notifyPageChangeToFragments(int item) {
         for (int page = 0; page != mAdapter.getCount(); ++page) {
             final Fragment fragment = mAdapter.getItem(page);
             if (fragment instanceof PagerFragment) {
                 if (page == item) {
                     ((PagerFragment)fragment).onPageIn();
                 } else {
                     ((PagerFragment)fragment).onPageOut();
                 }
             }
         }
         mTitleFragment.setCurrentTab(item);
         mTabFragment.setCurrentTab(item);
     }
 }

可以看到，包含三种完全不同功能的Activity，其主界面代码居然只有区区106行，这甚至比上篇文章《ViewPager之引导页》还要少。

这必须要归功于Fragment的使用。

三个页面的具体逻辑分别由DateFragment、ClickFragment、AnimFragment进行维护，而ViewPager要做的，只是进行Fragment的切换和通知。

具体来说，ViewPagerAdapter负责根据不同的postion取出不同的Fragment。而三个页面Fragment都继承自PagerFragment：

PagerFragment.java： 

 public class PagerFragment extends Fragment{

     public void onPageIn() {
     }

     public void onPageOut() {
     }

 }

亦即在页面切换的时候（不管是来自滑动还是点击tab），activity都会通知三个fragment它们各自是否可见。

同时，在 notifyPageChangeToFragments 方法中，也会通知TitleFragment和TabFragment，它们该切换状态了。

3.2 Fragment的各自实现

拿AnimFragment举例，这个动画Fragment的功能是在其切入（onPageIn）的时候播放淡入的动画，而在其切出（onPageOut）的时候销毁动画。

 public class AnimFragment extends PagerFragment {
     private View mViewRoot;
     private ImageView mImg;

     private Animation mAnim;

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         Log.d("Snser", "AnimFragment onCreateView");
         mViewRoot = inflater.inflate(R.layout.viewpager_fragment_anim, container, false);
         mAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.anim_fade_in);
         mAnim.setInterpolator(new LinearInterpolator());
         initView(mViewRoot);
         return mViewRoot;
     }

     private void initView(View root) {
         mImg = (ImageView)root.findViewById(R.id.viewpager_fragment_anim_img);
         startAnim();
     }

     @Override
     public void onDestroy() {
         super.onDestroy();
         stopAnim();
     }

     @Override
     public void onPageIn() {
         super.onPageIn();
         startAnim();
     }

     @Override
     public void onPageOut() {
         super.onPageOut();
         stopAnim();
     }

     private void startAnim() {
         if (mImg != null && mAnim != null) {
             mImg.startAnimation(mAnim);
         }
     }

     private void stopAnim() {
         if (mImg != null && mAnim != null) {
             mImg.clearAnimation();
         }
     }

 }

DateFragment的作用是在切入的时候刷新当前日期和时间：

DateFragment.java：

 public class DateFragment extends PagerFragment {

     private View mViewRoot;
     private TextView mTxtDate;

     private SimpleDateFormat mFormat = new SimpleDateFormat("yyyy/MM/dd\nHH:mm:ss", Locale.CHINA);

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         Log.d("Snser", "DateFragment onCreateView");
         mViewRoot = inflater.inflate(R.layout.viewpager_fragment_date, container, false);
         initView(mViewRoot);
         return mViewRoot;
     }

     @Override
     public void onPageIn() {
         super.onPageIn();
         refreshDate();
     }

     private void initView(View root) {
         mTxtDate = (TextView)root.findViewById(R.id.viewpager_fragment_date_txt);
         refreshDate();
     }

     private void refreshDate() {
         if (mTxtDate != null) {
             mTxtDate.setText(mFormat.format(new Date()));
         }
     }

 }

ClickFragment则搞定了一个多次连续点击“中彩蛋”的效果：

ClickFragment.java：

 public class ClickFragment extends PagerFragment {
     private View mViewRoot;
     private Button mBtnClick;

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         Log.d("Snser", "ClickFragment onCreateView");
         mViewRoot = inflater.inflate(R.layout.viewpager_fragment_click, container, false);
         initView(mViewRoot);
         return mViewRoot;
     }

     private void initView(View root) {
         mBtnClick = (Button)root.findViewById(R.id.viewpager_fragment_click_btn);
         mBtnClick.setOnClickListener(new MultiClickListener());
     }

     private static class MultiClickListener implements View.OnClickListener {
         private int mCount = 0;
         private long mLastClickTime = 0;

         private static final long MAX_CLICK_COUNT = 4;
         private static final long TIMEOUT_CLICK = 500;
         private static final int MSG_TIMEOUT_CLICK = 0x1001;

         private static Handler sHandler = new Handler() {
             @Override
             public void handleMessage(Message msg) {
                 if (msg.what == MSG_TIMEOUT_CLICK && msg.obj instanceof Button) {
                     Log.d("Snser", "MultiClickListener 连续点击超时");
                     ((Button)msg.obj).setText("点我");
                 }
             }
         };

         @Override
         public void onClick(View v) {
             if (v instanceof Button) {
                 final long time = System.currentTimeMillis();
                 if (mCount == 0 || time - mLastClickTime < TIMEOUT_CLICK) {
                     //这是连续点击
                     Log.d("Snser", "MultiClickListener 连续点击 mCount=" + (mCount + 1));
                     ++mCount;
                     mLastClickTime = time;
                     sHandler.removeMessages(MSG_TIMEOUT_CLICK);
                     sHandler.sendMessageDelayed(Message.obtain(sHandler, MSG_TIMEOUT_CLICK, v), TIMEOUT_CLICK);
                     if (mCount < MAX_CLICK_COUNT) {
                         ((Button)v).setText("点我   +" + mCount);
                     } else {
                         ((Button)v).setText("死机了！");
                     }
                 } else {
                     //这是新的点击
                     Log.d("Snser", "MultiClickListener 新的点击 mCount=0");
                     mCount = 0;
                     onClick(v);
                 }
             }
         }
     }

 }

除了页面Fragment之外，TabFragment和TitleFragment都会在 setCurrentTab 方法中更新自己的状态。

不同的是，TabFragment会将点击tab的事件通过 OnTabClickListenser 反馈给activity：

 public class TabFragment extends Fragment {
     private View mRootView;

     private TextView mTxtTabApp;
     private TextView mTxtTabHome;
     private TextView mTxtTabUser;

     private OnTabClickInternalListener mTabClickInternalListener = new OnTabClickInternalListener();
     private OnTabClickListenser mOnTabClickListenser;

     private int mDefaultTab = 0;
     private int mCurrentTab = -1;

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         Log.d("Snser", "TabFragment onCreateView");
         mRootView = inflater.inflate(R.layout.viewpager_fragment_tab, container, false);
         initView(mRootView);
         return mRootView;
     }

     private void initView(View root) {
         mTxtTabApp = (TextView)root.findViewById(R.id.viewpager_fragment_tab_app);
         mTxtTabApp.setTag(Integer.valueOf(0));
         mTxtTabApp.setOnClickListener(mTabClickInternalListener);
         mTxtTabHome = (TextView)root.findViewById(R.id.viewpager_fragment_tab_home);
         mTxtTabHome.setTag(Integer.valueOf(1));
         mTxtTabHome.setOnClickListener(mTabClickInternalListener);
         mTxtTabUser = (TextView)root.findViewById(R.id.viewpager_fragment_tab_user);
         mTxtTabUser.setTag(Integer.valueOf(2));
         mTxtTabUser.setOnClickListener(mTabClickInternalListener);
         setCurrentTab(mDefaultTab);
     }

     public interface OnTabClickListenser {
         public void onTabClick(int tab);
     }

     private class OnTabClickInternalListener implements View.OnClickListener {
         @Override
         public void onClick(View v) {
             if (v != null && v.getTag() instanceof Integer) {
                 final int tab = (Integer)v.getTag();
                 if (tab != mCurrentTab && mOnTabClickListenser != null) {
                     setCurrentTab(tab);
                     mOnTabClickListenser.onTabClick(tab);
                 }
             }
         }
     }

     public void setOnTabClickListenser(OnTabClickListenser listenser) {
         mOnTabClickListenser = listenser;
     }

     public void setCurrentTab(int tab) {
         if (mTxtTabApp != null && mTxtTabHome != null && mTxtTabUser != null) {
             mCurrentTab = tab;
             mTxtTabApp.setTextColor(getResources().getColor(R.color.viewpager_fragment_tab_normal));
             mTxtTabHome.setTextColor(getResources().getColor(R.color.viewpager_fragment_tab_normal));
             mTxtTabUser.setTextColor(getResources().getColor(R.color.viewpager_fragment_tab_normal));
             switch (tab) {
                 case 0:
                     mTxtTabApp.setTextColor(getResources().getColor(R.color.viewpager_fragment_tab_current));
                     break;
                 case 1:
                     mTxtTabHome.setTextColor(getResources().getColor(R.color.viewpager_fragment_tab_current));
                     break;
                 case 2:
                     mTxtTabUser.setTextColor(getResources().getColor(R.color.viewpager_fragment_tab_current));
                     break;
                 default:
                     break;
             }
         } else {
             //TabFragment在Activity的onResume之后才会onCreateView
             //setCurrentTab的时候控件还没初始化，存一下初始值在initView里再初始化
             mDefaultTab = tab;
         }
     }
 }

 public class TitleFragment extends Fragment {
     private View mRootView;
     private TextView mTxt;

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         Log.d("Snser", "TitleFragment onCreateView");
         mRootView = inflater.inflate(R.layout.viewpager_fragment_title, container, false);
         initView(mRootView);
         return mRootView;
     }

     private void initView(View root) {
         mTxt = (TextView)root.findViewById(R.id.viewpager_fragment_title_txt);
     }

     public void setCurrentTab(int tab) {
         if (mTxt != null) {
             switch (tab) {
                 case 0:
                     mTxt.setText("#ClickFragment");
                     break;
                 case 1:
                     mTxt.setText("#DateFragment");
                     break;
                 case 2:
                     mTxt.setText("#AnimFragment");
                     break;
                 default:
                     break;
             }
         }
     }
 }

3.3 Fragment的加载顺序

回归到3.1节中介绍到本文采用三种方式进行Fragment的载入，目的就是为了比较不同方式下Fragment的加载时机。

在 DEFAULT_PAGE = 1 时，各个Fragment的加载顺序为：

//          ViewPagerFragmentActivity onCreate
//          ViewPagerFragmentActivity onCreate setContentView
//          TitleFragment onCreateView (声明在layout布局中的Fragment在setContentView之后就会被加载)
//          ViewPagerFragmentActivity onCreate initView
//          TabFragment onCreateView (动态replace的Fragment在replace之后、onResume之前被加载)
//          ViewPagerFragmentActivity onResume
//          DateFragment onCreateView (ViewPager最先加载默认页)
//          ClickFragment onCreateView (ViewPager默认页左边的页面会被预加载)
//          AnimFragment onCreateView (ViewPager默认页右边的页面会被预加载)

在 DEFAULT_PAGE = 0 时，各个Fragment的加载顺序为：

//          ViewPagerFragmentActivity onCreate
//          ViewPagerFragmentActivity onCreate setContentView
//          TitleFragment onCreateView (声明在layout布局中的Fragment在setContentView之后就会被加载)
//          ViewPagerFragmentActivity onCreate initView
//          TabFragment onCreateView (动态replace的Fragment在replace之后、onResume之前被加载)
//          ViewPagerFragmentActivity onResume
//          ClickFragment onCreateView (ViewPager最先加载默认页)
//          DateFragment onCreateView(ViewPager默认页右边的页面会被预加载)
//          AnimFragment onCreateView(ViewPager切换到DateFragment时才会预加载AnimFragment)

 [转载请保留本文地址：http://www.cnblogs.com/snser/p/5700754.html] 

四、demo工程

先晒一下本文的动图效果：

工程源码如下（下载下面的图片，扩展名改成zip即可）：

 [转载请保留本文地址：http://www.cnblogs.com/snser/p/5700754.html]