Android開發之ViewPager+ActionBar+Fragment實現響應式可滑動Tab

         今天我們要實現的這個效果呢，在Android的應用中十分地常見，我們可以看到下面兩張圖，無論是系統內建的連絡人應用，還是AnyView的閱讀器應用，我們總能找到這樣的影子，當我們滑動螢幕時，Tab可以相應地完成切換，而當我們點擊Tab時，我們的螢幕同樣可以完成切換。講到滑動，我們會立即想到PagerView，講到ActionBar，我們立即會想到將ActionBar的導航模式。那麼，我們今天要做的一件事情就是，通過這些組件的組合，來實現這樣一個效果。

          

       按照一般的思路，我們或許會這麼做：首先，使用getActionBar()方法獲得操作欄，然後我們將操作欄的導航模式設定為Tab，並添加一些Tab，然後實現TabListener介面；其次，我們將多個布局通過Inflater()方法變成View，然後放到ViewPager裡面(其實呢，ViewPager就是個容器啦，你換成FrameLayout也是一樣的，所以這裡可以用Fragment替換就是這個道理)，並實現OnPageChangeListener介面就可以了。由此我們可以寫出下面的代碼：

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;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.layout_main);//取得ActionBarmActionBar=getActionBar();    //以Tab方式導航mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);    //禁用ActionBar標題mActionBar.setDisplayShowTitleEnabled(false);//禁用ActionBar表徵圖mActionBar.setDisplayUseLogoEnabled(false);//禁用ActionBar返回鍵mActionBar.setDisplayShowHomeEnabled(false);//添加TabsmTabs=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);    }    @Overridepublic void onTabReselected(Tab mTab, FragmentTransaction arg1) {}@Overridepublic void onTabSelected(Tab mTab, FragmentTransaction arg1) {if(mViewPager!=null){   mViewPager.setCurrentItem(mTab.getPosition());}}@Overridepublic void onTabUnselected(Tab mTab, FragmentTransaction arg1) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageSelected(int Index) {//設定當前要顯示的ViewmViewPager.setCurrentItem(Index);    //選中對應的TabmActionBar.selectTab(mTabs.get(Index));}}

        其中，TabPagerAdapter是一個繼承自PagerAdapter的適配器類：

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;}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager)container).removeView(mViews.get(position));}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager)container).addView(mViews.get(position), 0); return mViews.get(position);}@Overridepublic int getCount() {return mViews.size();}@Overridepublic boolean isViewFromObject(View mView, Object mObject) {return (mView==mObject);}}

           我們的代碼從邏輯上來講是沒有什麼問題的，但是當我們試圖運行這段代碼的時候，我們發現這段代碼出了問題，而問題就出在OnTabSelected()上。但是我們冷靜下來想了想，沒有錯啊，那麼問題到底出在哪裡呢？看到網上的朋友說，這裡這個適配器應該繼承自FragmentPagerAdapter：

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);}@Overridepublic 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;}@Overridepublic int getCount() {return 3;}}

      

        其中，Fragment_0、Fragment_1、Fragment_2是繼承自Fragment的類，由於三個布局基本一樣，這裡只給出Fragment_0的代碼：

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;}}

       

4、