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

2022-09-13 10:09:53

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

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

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

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

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

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

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

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

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

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

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

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

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

ViewPager相关文章：

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

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

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

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

上一篇：微冷的雨之Java中的多线程初理解(一)


下一篇：微信公众平台开发接口PHP SDK完整版（转载）