1. 程式人生 > >Android開發之ViewPager+ActionBar+Fragment實現響應式可滑動Tab

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

    

     

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

[java] view plain
copyprint?
  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. publicclass 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.     protectedvoid 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.     publicvoid onTabReselected(Tab mTab, FragmentTransaction arg1)   
  68.     {  
  69.     }  
  70.     @Override
  71.     publicvoid onTabSelected(Tab mTab, FragmentTransaction arg1)   
  72.     {  
  73.         if(mViewPager!=null)  
  74.         {  
  75.            mViewPager.setCurrentItem(mTab.getPosition());  
  76.         }  
  77.     }  
  78.     @Override
  79.     publicvoid onTabUnselected(Tab mTab, FragmentTransaction arg1)   
  80.     {  
  81.     }  
  82.     @Override
  83.     publicvoid onPageScrollStateChanged(int arg0)   
  84.     {  
  85.     }  
  86.     @Override
  87.     publicvoid onPageScrolled(int arg0, float arg1, int arg2)   
  88.     {  
  89.     }  
  90.     @Override
  91.     publicvoid onPageSelected(int Index)   
  92.     {  
  93.         //設定當前要顯示的View
  94.         mViewPager.setCurrentItem(Index);  
  95.         //選中對應的Tab
  96.         mActionBar.selectTab(mTabs.get(Index));  
  97.     }  
  98. }  
        其中,TabPagerAdapter是一個繼承自PagerAdapter的介面卡類: [java] view plaincopyprint?
  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. publicclass TabPagerAdapter extends PagerAdapter   
  7. {