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

来源：互联网发布：pr域名出售编辑：程序博客网时间：2024/05/21 10:05

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

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

[java] view plaincopyprint?
package com.Android.AnyViewUI;  
  
import java.util.ArrayList;  
  
import android.os.Bundle;  
import android.support.v4.app.FragmentActivity;  
import android.support.v4.app.FragmentManager;  
import android.support.v4.view.ViewPager;  
import android.support.v4.view.ViewPager.OnPageChangeListener;  
import android.app.ActionBar;  
import android.app.ActionBar.Tab;  
import android.app.ActionBar.TabListener;  
import android.app.Activity;  
import android.app.FragmentTransaction;  
import android.view.LayoutInflater;  
import android.view.View;  
  
  
public class MainActivity extends FragmentActivity implements TabListener,OnPageChangeListener {  
      
    private ActionBar mActionBar;  
    private ViewPager mViewPager;  
    private TabPagerAdapter mAdapter;  
    private ArrayList<View> mViews;  
    private ArrayList<ActionBar.Tab> mTabs;  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.layout_main);  
        //取得ActionBar  
        mActionBar=getActionBar();  
        //以Tab方式导航  
        mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
        //禁用ActionBar标题  
        mActionBar.setDisplayShowTitleEnabled(false);  
        //禁用ActionBar图标  
        mActionBar.setDisplayUseLogoEnabled(false);  
        //禁用ActionBar返回键  
        mActionBar.setDisplayShowHomeEnabled(false);  
        //添加Tabs  
        mTabs=new ArrayList<ActionBar.Tab>();  
          
        ActionBar.Tab tab0=mActionBar.newTab();  
        tab0.setText("界面一");  
        tab0.setTabListener(this);  
        mTabs.add(tab0);  
        mActionBar.addTab(tab0);  
          
        ActionBar.Tab tab1=mActionBar.newTab();  
        tab1.setText("界面二");  
        tab1.setTabListener(this);  
        mTabs.add(tab1);  
        mActionBar.addTab(tab1);  
          
        ActionBar.Tab tab2=mActionBar.newTab();  
        tab2.setText("界面三");  
        tab2.setTabListener(this);  
        mTabs.add(tab2);  
        mActionBar.addTab(tab2);  
          
        //获取ViewPager  
        mViewPager=(ViewPager)findViewById(R.id.ViewPager);  
        //初始化mViews  
        mViews=new ArrayList<View>();  
        mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_0, null));  
        mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_1, null));  
        mViews.add(LayoutInflater.from(this).inflate(R.layout.layout_2, null));  
        //初始化mAdapter  
        mAdapter=new TabPagerAdapter(mViews);  
        mViewPager.setAdapter(mAdapter);  
        mViewPager.setOnPageChangeListener(this);  
        //默认显示第二项  
        mViewPager.setCurrentItem(2);  
          
    }  
      
  
  
    @Override  
    public void onTabReselected(Tab mTab, FragmentTransaction arg1)   
    {  
          
    }  
  
    @Override  
    public void onTabSelected(Tab mTab, FragmentTransaction arg1)   
    {  
        if(mViewPager!=null)  
        {  
           mViewPager.setCurrentItem(mTab.getPosition());  
        }  
    }  
  
    @Override  
    public void onTabUnselected(Tab mTab, FragmentTransaction arg1)   
    {  
          
    }  
  
  
    @Override  
    public void onPageScrollStateChanged(int arg0)   
    {  
          
    }  
  
  
    @Override  
    public void onPageScrolled(int arg0, float arg1, int arg2)   
    {  
          
    }  
  
  
    @Override  
    public void onPageSelected(int Index)   
    {  
        //设置当前要显示的View  
        mViewPager.setCurrentItem(Index);  
        //选中对应的Tab  
        mActionBar.selectTab(mTabs.get(Index));  
    }  
  
}  

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

[java] view plaincopyprint?
package com.Android.AnyViewUI;  
  
import java.util.ArrayList;  
  
import android.support.v4.view.PagerAdapter;  
import android.support.v4.view.ViewPager;  
import android.view.View;  
  
public class TabPagerAdapter extends PagerAdapter   
{  
  
  
  
    private ArrayList<View> mViews;  
    public TabPagerAdapter(ArrayList<View> mViews)  
    {  
        this.mViews=mViews;  
    }  
      
    @Override  
    public void destroyItem(View container, int position, Object object)   
    {  
        ((ViewPager)container).removeView(mViews.get(position));  
    }  
      
    @Override  
    public Object instantiateItem(View container, int position)   
    {  
        ((ViewPager)container).addView(mViews.get(position), 0);  
         return mViews.get(position);  
    }  
      
    @Override  
    public int getCount()   
    {  
        return mViews.size();  
    }  
  
    @Override  
    public boolean isViewFromObject(View mView, Object mObject)   
    {  
        return (mView==mObject);  
    }  
  
      
  
}  

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

[java] view plaincopyprint?
package com.Android.AnyViewUI;  
  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentManager;  
import android.support.v4.app.FragmentPagerAdapter;  
  
public class ViewPagerAdapter extends FragmentPagerAdapter {  
  
    //定义三个Fragment的索引  
    public static final int Fragment_Index_0=0;  
    public static final int Fragment_Index_1=1;  
    public static final int Fragment_Index_2=2;  
      
    public ViewPagerAdapter(FragmentManager fragmentManager)   
    {  
        super(fragmentManager);  
    }  
  
    @Override  
    public Fragment getItem(int Index)   
    {  
        Fragment mFragemnt=null;  
        switch(Index)  
        {  
          case Fragment_Index_0:  
              mFragemnt=new Fragment_0();  
              break;  
          case Fragment_Index_1:  
              mFragemnt=new Fragment_1();  
              break;  
          case Fragment_Index_2:  
              mFragemnt=new Fragment_2();  
              break;  
        }  
        return mFragemnt;  
    }  
  
    @Override  
    public int getCount()   
    {  
        return 3;  
    }  
  
}  

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

[java] view plaincopyprint?
package com.Android.AnyViewUI;  
  
  
import android.os.Bundle;  
import android.support.v4.app.Fragment;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
  
public class Fragment_0 extends Fragment   
{  
  
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)   
    {  
        View mView=inflater.inflate(R.layout.layout_0, container, false);  
        return mView;  
    }  
      
}  

现在，我们将开始写好的代码中的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打造应用引导界面面

1 1