fragment 滑動 viewPager

1. ViewPager要點：

• ViewPager 是一個佈局管理類（layout manager），用於提供頁面的左右滑動功能，類似於ListView，也有爲ViewPager提供     數據（Fragment）的 adapter 控制類（FragmentPagerAdapter, FragmentStatePagerAdapter）。
• ViewPager 經常和 Fragment 一起使用，結合ActionBar 的 Tab，實現 tab 頁面的左右滑動。
  
• ViewPager 屬於 android sdk 擴展包，若要使用 ViewPager，需要外部導入擴展包：android-support-v4.jar
  

2. 實現功能：

本例實現的功能效果如下圖所示：

    實現 tab 頁的左右滑動的好處是，由於我們經常習慣單手操作手機，而單手切換 tab 頁是非常困難的，而 tab 頁面的左右滑動     功能正好可以解決這個問題，提供更加方便的交互。

3. 原理說明：

整個應用可以分爲如圖所示的幾個模塊：

• 主界面Activity 主要由一個 ViewPager 組成，裏面裝載了三個 Fragment 頁面，進行左右滑動；
• 主界面Activity 的ActionBar 中創建三個 Tab 按鍵（Tab Button）；
• ActionBar 與 ViewPager 之間的交互關係如下：ViewPager 帶動其裝載的三個 Fragment 左右切換的同時，控制其相對應的Action Tab Button 的左右切換；反過來，當用戶手動切換三個 Tab Button 時，控制 ViewPager 中相對應的 Fragment 的切換。

4. 具體步驟：

4.1 新建工程並導入android-support-v4.jar擴展包：

• 新建一個名爲ActionTabWithSlippingFragment。
• 導入android-support-v4.jar擴展包：網上很多導入方法都表示要通過 “Project - Properties - Java Build Path - Add External JARs” 進行導入，這樣可以保證編譯通過，但是運行的時候會出錯！這裏我用的導入方法如下：
• 首先在工程目錄下新建一個文件夾 libs，然後從 "android sdk目錄\extras\android\compatibility\v4" 下將 android-support-v4.jar 手動拷貝到新建的 libs 目錄下，最後右擊工程選擇 “Refresh” 刷新即可，這時可以看到 libs 目錄和 Android Dependencies 目錄下均有 android-support-v4.jar 出現，這就表示導入成功了！如下圖所示：

4.2 創建三個 Fragment 類作爲可滑動的 Tab 頁（view），並由 ViewPager來管理（manager）：

• 創建三個 Fragement 類：Fragment1.java，Fragment2.java，Fragment3.java，同時爲其各自創建佈局視圖文件：fragment1.xml，fragment2.xml，fragment3.xml，分別設置紅（R）、綠（G）、藍（B）背景。
• Fragment1.java創建如下，關鍵實現其 onCreateView 方法，設置其佈局：

• public class Fragment1 extends Fragment {
  
      @Override
      public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
          return inflateAndSetupView(inflater, container, savedInstanceState, R.layout.fragment1);
      }
  
      private View inflateAndSetupView(LayoutInflater inflater, ViewGroup container,
              Bundle savedInstanceState, int layoutResourceId) {
          View layout = inflater.inflate(layoutResourceId, container, false);
  
          return layout;
      }
  }

  
  
  
• fragment1.xml 主要定義一個帶有紅色背景的的LinearLayout：

• <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:background="#FF0000" >
  
      <TextView
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:layout_gravity="center"
          android:gravity="center"
          android:text="@string/frag_1"
          android:textSize="30dp"
          android:textStyle="bold"
          android:textColor="#FFFFFF" />
  
  </LinearLayout>

  
  
  

4.3 創建主界面 Activity：ActionTabWithSlippingFragmentActivity，及其對應的佈局文件：main.xml：

• 設置 ActionBar 的樣式，如：無回退按鍵、無標題等——setUpActionBar()
• 初始化並設置 ViewPager，兩個要點：首先要定義並設置 ViewPager 所需要的數據控制類 ViewPagerAdapter，ViewPagerAdapter 必須實現如何返回對應位置的 Fragment、頁數、頁標題；其次，要實現 ViewPager 的翻頁監聽接口（OnPageChangeListener），主要是實現當前頁面被切換時需要導航到對應位置的action tab button，必要的時候，還需要實現在頁面翻動的各個狀態下（正在翻動、翻動即將停止、翻動完全停止）的相應處理——setUpViewPager()
• 然後需要創建三個 tab button，並實現 tab 的監聽接口：主要是當選擇相應 tab 時，如何切換 ViewPager 的相應頁面——setUpTabs()
• ActionTabWithSlippingFragmentActivity.java 的實現部分 

• public class ActionTabWithSlippingFragmentActivity extends FragmentActivity
                  implements ActionBar.TabListener{
  
      private Fragment1 mFragment1 = new Fragment1();
      private Fragment2 mFragment2 = new Fragment2();
      private Fragment3 mFragment3 = new Fragment3();
  
      private static final int TAB_INDEX_COUNT = 3;
  
      private static final int TAB_INDEX_ONE = 0;
      private static final int TAB_INDEX_TWO = 1;
      private static final int TAB_INDEX_THREE = 2;
  
      private ViewPager mViewPager;
      private ViewPagerAdapter mViewPagerAdapter;
  
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.main);
  
          setUpActionBar();
          setUpViewPager();
          setUpTabs();
      }
  
      private void setUpActionBar() {
          final ActionBar actionBar = getActionBar();
          actionBar.setHomeButtonEnabled(false);
          actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
          actionBar.setDisplayShowTitleEnabled(false);
          actionBar.setDisplayShowHomeEnabled(false);
      }
  
      private void setUpViewPager() {
          mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
  
          mViewPager = (ViewPager)findViewById(R.id.pager);
          mViewPager.setAdapter(mViewPagerAdapter);
          mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
              @Override
              public void onPageSelected(int position) {
                  final ActionBar actionBar = getActionBar();
                  actionBar.setSelectedNavigationItem(position);
              }
  
              @Override
              public void onPageScrollStateChanged(int state) {
                  switch(state) {
                      case ViewPager.SCROLL_STATE_IDLE:
                          //TODO
                          break;
                      case ViewPager.SCROLL_STATE_DRAGGING:
                          //TODO
                          break;
                      case ViewPager.SCROLL_STATE_SETTLING:
                          //TODO
                          break;
                      default:
                          //TODO
                          break;
                  }
              }
          });
      }
  
      private void setUpTabs() {
          final ActionBar actionBar = getActionBar();
          for (int i = 0; i < mViewPagerAdapter.getCount(); ++i) {
              actionBar.addTab(actionBar.newTab()
                      .setText(mViewPagerAdapter.getPageTitle(i))
                      .setTabListener(this));
          }
      }
  
      @Override
      protected void onDestroy() {
          super.onDestroy();
      }
  
      public class ViewPagerAdapter extends FragmentPagerAdapter {
  
          public ViewPagerAdapter(FragmentManager fm) {
              super(fm);
              // TODO Auto-generated constructor stub
          }
  
          @Override
          public Fragment getItem(int position) {
              // TODO Auto-generated method stub
              switch (position) {
                  case TAB_INDEX_ONE:
                      return mFragment1;
                  case TAB_INDEX_TWO:
                      return mFragment2;
                  case TAB_INDEX_THREE:
                      return mFragment3;
              }
              throw new IllegalStateException("No fragment at position " + position);
          }
  
          @Override
          public int getCount() {
              // TODO Auto-generated method stub
              return TAB_INDEX_COUNT;
          }
  
          @Override
          public CharSequence getPageTitle(int position) {
              String tabLabel = null;
              switch (position) {
                  case TAB_INDEX_ONE:
                      tabLabel = getString(R.string.tab_1);
                      break;
                  case TAB_INDEX_TWO:
                      tabLabel = getString(R.string.tab_2);
                      break;
                  case TAB_INDEX_THREE:
                      tabLabel = getString(R.string.tab_3);
                      break;
              }
              return tabLabel;
          }
      }
  
      @Override
      public void onTabReselected(Tab tab, FragmentTransaction ft) {
          // TODO Auto-generated method stub
  
      }
  
      @Override
      public void onTabSelected(Tab tab, FragmentTransaction ft) {
          // TODO Auto-generated method stub
          mViewPager.setCurrentItem(tab.getPosition());
      }
  
      @Override
      public void onTabUnselected(Tab tab, FragmentTransaction ft) {
          // TODO Auto-generated method stub
  
      }
  }

  
   
• main.xml 的實現部分：

• <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" >
  
      <android.support.v4.view.ViewPager
          android:id="@+id/pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent" >
      </android.support.v4.view.ViewPager>
  </RelativeLayout>

  
  
  

4.4 結束語：

• 關於 ViewPager 結合ActionBar 和 Fragment 實現頁面滑動式 tab 功能在 google 的官方開發文檔中也有說明，本例相關原理亦以此作爲參考，詳情請查閱：http://developer.android.com/reference/android/support/v4/view/ViewPager.html
• 源代碼供開放，無需積分：http://download.csdn.net/detail/ixiaobu/4743378
•