Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

今天我们要实现的这个效果呢，在Android的应用中十分地常见，我们可以看到下面两张图，无论是系统内置的联系人应用，还是AnyView的阅读器应用，我们总能找到这样的影子，当我们滑动屏幕时，Tab可以相应地完成切换，而当我们点击Tab时，我们的屏幕同样可以完成切换。讲到滑动，我们会立即想到PagerView，讲到ActionBar，我们立即会想到将ActionBar的导航模式。那么，我们今天要做的一件事情就是，通过这些组件的组合，来实现这样一个效果。


          

       按照一般的思路，我们或许会这么做：首先，使用getActionBar()方法获得操作栏，然后我们将操作栏的导航模式设置为Tab，并添加一些Tab，然后实现TabListener接口；其次，我们将多个布局通过Inflater()方法变成View，然后放到ViewPager里面(其实呢，ViewPager就是个容器啦，你换成FrameLayout也是一样的，所以这里可以用Fragment替换就是这个道理)，并实现OnPageChangeListener接口就可以了。由此我们可以写出下面的代码：

[java] view plain copy print?
  1. package com.Android.AnyViewUI;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.os.Bundle;  
  6. import android.support.v4.app.FragmentActivity;  
  7. import android.support.v4.app.FragmentManager;  
  8. import android.support.v4.view.ViewPager;  
  9. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  10. import android.app.ActionBar;  
  11. import android.app.ActionBar.Tab;  
  12. import android.app.ActionBar.TabListener;  
  13. import android.app.Activity;  
  14. import android.app.FragmentTransaction;  
  15. import android.view.LayoutInflater;  
  16. import android.view.View;  
  17.   
  18.   
  19. public class MainActivity extends FragmentActivity implements TabListener,OnPageChangeListener {  
  20.       
  21.     private ActionBar mActionBar;  
  22.     private ViewPager mViewPager;  
  23.     private TabPagerAdapter mAdapter;  
  24.     private ArrayList<View> mViews;  
  25.     private ArrayList<ActionBar.Tab> mTabs;  
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.layout_main);  
  30.         //取得ActionBar  
  31.         mActionBar=getActionBar();  
  32.         //以Tab方式导航  
  33.         mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  34.         //禁用ActionBar标题  
  35.         mActionBar.setDisplayShowTitleEnabled(false);  
  36.         //禁用ActionBar图标  
  37.         mActionBar.setDisplayUseLogoEnabled(false);  
  38.         //禁用ActionBar返回键  
  39.         mActionBar.setDisplayShowHomeEnabled(false);  
  40.         //添加Tabs  
  41.         mTabs=new ArrayList<ActionBar.Tab>();  
  42.           
  43.         ActionBar.Tab tab0=mActionBar.newTab();  
  44.         tab0.setText("界面一");  
  45.         tab0.setTabListener(this);  
  46.         mTabs.add(tab0);  
  47.         mActionBar.addTab(tab0);  
  48.           
  49.         ActionBar.Tab tab1=mActionBar.newTab();  
  50.         tab1.setText("界面二");  
  51.         tab1.setTabListener(this);  
  52.         mTabs.add(tab1);  
  53.         mActionBar.addTab(tab1);  
  54.           
  55.         ActionBar.Tab tab2=mActionBar.newTab();  
  56.         tab2.setText("界面三");  
  57.         tab2.setTabListener(this);  
  58.         mTabs.add(tab2);  
  59.         mActionBar.addTab(tab2);  
  60.           
  61.         //获取ViewPager  
  62.         mViewPager=(ViewPager)findViewById(R.id.ViewPager);  
  63.         //初始化mViews  
  64.         mViews=new ArrayList<View>();  
  65.         mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_0, null));  
  66.         mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_1, null));  
  67.         mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_2, null));  
  68.         //初始化mAdapter  
  69.         mAdapter=new TabPagerAdapter(mViews);  
  70.         mViewPager.setAdapter(mAdapter);  
  71.         mViewPager.setOnPageChangeListener(this);  
  72.         //默认显示第二项  
  73.         mViewPager.setCurrentItem(2);  
  74.           
  75.     }  
  76.       
  77.   
  78.   
  79.     @Override  
  80.     public void onTabReselected(Tab mTab, FragmentTransaction arg1)   
  81.     {  
  82.           
  83.     }  
  84.   
  85.     @Override  
  86.     public void onTabSelected(Tab mTab, FragmentTransaction arg1)   
  87.     {  
  88.         if(mViewPager!=null)  
  89.         {  
  90.            mViewPager.setCurrentItem(mTab.getPosition());  
  91.         }  
  92.     }  
  93.   
  94.     @Override  
  95.     public void onTabUnselected(Tab mTab, FragmentTransaction arg1)   
  96.     {  
  97.           
  98.     }  
  99.   
  100.   
  101.     @Override  
  102.     public void onPageScrollStateChanged(int arg0)   
  103.     {  
  104.           
  105.     }  
  106.   
  107.   
  108.     @Override  
  109.     public void onPageScrolled(int arg0, float arg1, int arg2)   
  110.     {  
  111.           
  112.     }  
  113.   
  114.   
  115.     @Override  
  116.     public void onPageSelected(int Index)   
  117.     {  
  118.         //设置当前要显示的View  
  119.         mViewPager.setCurrentItem(Index);  
  120.         //选中对应的Tab  
  121.         mActionBar.selectTab(mTabs.get(Index));  
  122.     }  
  123.   
  124. }  

        其中，TabPagerAdapter是一个继承自PagerAdapter的适配器类：

[java] view plain copy print?
  1. package com.Android.AnyViewUI;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.support.v4.view.PagerAdapter;  
  6. import android.support.v4.view.ViewPager;  
  7. import android.view.View;  
  8.   
  9. public class TabPagerAdapter extends PagerAdapter   
  10. {  
  11.   
  12.   
  13.   
  14.     private ArrayList<View> mViews;  
  15.     public TabPagerAdapter(ArrayList<View> mViews)  
  16.     {  
  17.         this.mViews=mViews;  
  18.     }  
  19.       
  20.     @Override  
  21.     public void destroyItem(View container, int position, Object object)   
  22.     {  
  23.         ((ViewPager)container).removeView(mViews.get(position));  
  24.     }  
  25.       
  26.     @Override  
  27.     public Object instantiateItem(View container, int position)   
  28.     {  
  29.         ((ViewPager)container).addView(mViews.get(position), 0);  
  30.          return mViews.get(position);  
  31.     }  
  32.       
  33.     @Override  
  34.     public int getCount()   
  35.     {  
  36.         return mViews.size();  
  37.     }  
  38.   
  39.     @Override  
  40.     public boolean isViewFromObject(View mView, Object mObject)   
  41.     {  
  42.         return (mView==mObject);  
  43.     }  
  44.   
  45.       
  46.   
  47. }  


           我们的代码从逻辑上来讲是没有什么问题的，但是当我们试图运行这段代码的时候，我们发现这段代码出了问题，而问题就出在OnTabSelected()上。但是我们冷静下来想了想，没有错啊，那么问题到底出在哪里呢？看到网上的朋友说，这里这个适配器应该继承自FragmentPagerAdapter：

[java] view plain copy print?
  1. package com.Android.AnyViewUI;  
  2.   
  3. import android.support.v4.app.Fragment;  
  4. import android.support.v4.app.FragmentManager;  
  5. import android.support.v4.app.FragmentPagerAdapter;  
  6.   
  7. public class ViewPagerAdapter extends FragmentPagerAdapter {  
  8.   
  9.     //定义三个Fragment的索引  
  10.     public static final int Fragment_Index_0=0;  
  11.     public static final int Fragment_Index_1=1;  
  12.     public static final int Fragment_Index_2=2;  
  13.       
  14.     public ViewPagerAdapter(FragmentManager fragmentManager)   
  15.     {  
  16.         super(fragmentManager);  
  17.     }  
  18.   
  19.     @Override  
  20.     public Fragment getItem(int Index)   
  21.     {  
  22.         Fragment mFragemnt=null;  
  23.         switch(Index)  
  24.         {  
  25.           case Fragment_Index_0:  
  26.               mFragemnt=new Fragment_0();  
  27.               break;  
  28.           case Fragment_Index_1:  
  29.               mFragemnt=new Fragment_1();  
  30.               break;  
  31.           case Fragment_Index_2:  
  32.               mFragemnt=new Fragment_2();  
  33.               break;  
  34.         }  
  35.         return mFragemnt;  
  36.     }  
  37.   
  38.     @Override  
  39.     public int getCount()   
  40.     {  
  41.         return 3;  
  42.     }  
  43.   
  44. }  

      

        其中，Fragment_0、Fragment_1、Fragment_2是继承自Fragment的类，由于三个布局基本一样，这里只给出Fragment_0的代码：

[java] view plain copy print?
  1. package com.Android.AnyViewUI;  
  2.   
  3.   
  4. import android.os.Bundle;  
  5. import android.support.v4.app.Fragment;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9.   
  10. public class Fragment_0 extends Fragment   
  11. {  
  12.   
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)   
  14.     {  
  15.         View mView=inflater.inflate(R.layout.layout_0, container, false);  
  16.         return mView;  
  17.     }  
  18.       
  19. }  

 

        现在，我们将开始写好的代码中的mAdapter用这个适配器类去替换，然后我们发现程序可以运行了，可是为什么啊？看了Android文档，上面说FragmentPagerAdapter是实现了PagerAdapter，换句话说，真正起作用的还是PagerAdapter这个类，好，我们回头看这个类，在我们开始的代码中，我们在instantiateItem()、destroyItem()操作的对象始终是View，如果我们把这个View换成Fragment，把View[]换成Fragment[],在类内部使用FragmentManager对Fragment进行管理，我们会发现这样的效果和继承FragmentPagerAdapter是一样的，这样对于这两个适配器的关系我们就已经很明确了。可是，我还是想知道为什么刚开始的那个方法不行呢？希望知道这个问题的答案的朋友，可以告诉我，最后放上效果图：





ViewPager相关文章：

1、Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

2、Android开发学习之基于ViewPager实现Gallery画廊效果

3、Android开发学习之使用ViewPager+PagerTabStrip制作可滑动的Tab

4、Android开发学习之使用ViewPager打造应用引导界面面

posted @ 2016-11-05 11:43  天涯海角路  阅读(113)  评论(0)    收藏  举报