閱讀243 返回首頁    go 微軟 go windows

ViewPager實現左右兩個屏幕的切換

項目終於需要這樣的效果了，采用ViewPager去實現吧，讓網上那些亂七八糟的屏幕切換類都終結了吧，ViewPager是google官方的！ 
下麵是我借鑒的文章： 

起初最早接觸到左右兩個屏幕切換的是在 《創新源於模仿之三：實現左右兩個屏幕的切換》 這篇文章上，感謝作者為我們提供了這麼好的DEMO。 

什麼是ViewPager呢？ 
它是實現左右兩個屏幕平滑地切換的一個類，它是Google提供的，作為Android的一個補充。先上個效果圖把，讓大家有個直觀的認識。 

 
我們在網上搜索這相關到主題的時候，會看到有很多關於這方麵的問題：如何平滑？水平移動？等等。現在，我們可以自己不去親自做這個費力的事情了，隻需要使用到一個叫ViewPager的類即可。ViewPager是最近在Compatibility package發布的，支持android 1.6+，如果要使用的話，要通過SDK Manager去更新Compatibility package，具體使用方法在<SDK_DOC_PATH>/sdk/compatibility-library.html(SDK_DOC_PATH是自帶Android文檔的位置，需要更新到最新的文檔才有)。 

《創新源於模仿之三：實現左右兩個屏幕的切換》提供了Workspace實現了左右屏幕的切換，現在Google I/O上已經發布了這樣的Workspace類，方便我們大家去使用，稍後我會同本文DEMO的源代碼一起發布。那ViewPager和Workspace有什麼樣的區別呢？先看下api doc的說法： 
Layout manager that allows the user to flip left and right through pages of data. You supply an implementation of a PagerAdapter to generate the pages that the view shows. 

如上所述，ViewPager提供了一個適配器，方便我們對各個View進行控製，而Workspace需要我們手動去添加，它相當於是一個"靜態切換"。接下來我將介紹下如何使用： 

1、下載來Android SDK & AVD manager的更新：Available Packages -> Android Repository -> Android Compatibility Package, revision 3. 它將安裝在\extras\android\compatibility\v4文件下 

2、建立一個Android項目，在上述安裝目錄下把 android-support-v4.jar添加進項目，如果是最新的ADT，隻需要右擊project->Android Tools->Add Compatibility Library 

3、在Activity中使用ViewPager 

4、如果ViewPager是用xml去定義的，需要寫上全局的路徑，如： 
Xml代碼  收藏代碼
  1. <android.support.v4.view.ViewPager  
  2. android:layout_width="match_parent"   
  3. android:layout_height="match_parent"   
  4. android:id="@+id/awesomepager"/>  

5、建立一個PagerAdapter，實現如下方法： 
getCount(), instantiateItem(), destroyItem()， isViewFromObject() 。 
總上所述，貼上俺的代碼，我們發現，可以很快很簡單的實現左右兩個屏幕的切換 
Java代碼  收藏代碼
  1. public class AwesomePagerActivity extends Activity {  
  2.       
  3.     private ViewPager awesomePager;  
  4.   
  5.     private Context cxt;  
  6.     private AwesomePagerAdapter awesomeAdapter;  
  7.       
  8.     private LayoutInflater mInflater;  
  9.     private List<View> mListViews;  
  10.       
  11.     /** Called when the activity is first created. */  
  12.     @Override  
  13.     public void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.main);  
  16.         cxt = this;  
  17.           
  18.         awesomeAdapter = new AwesomePagerAdapter();  
  19.         awesomePager = (ViewPager) findViewById(R.id.awesomepager);  
  20.         awesomePager.setAdapter(awesomeAdapter);  
  21.           
  22.         mListViews = new ArrayList<View>();  
  23.         mInflater = getLayoutInflater();  
  24.         mListViews.add(mInflater.inflate(R.layout.layout1, null));  
  25.         mListViews.add(mInflater.inflate(R.layout.layout2, null));  
  26.         mListViews.add(mInflater.inflate(R.layout.layout3, null));  
  27.           
  28.     }  
  29.       
  30.     private class AwesomePagerAdapter extends PagerAdapter{  
  31.   
  32.           
  33.         @Override  
  34.         public int getCount() {  
  35.             return mListViews.size();  
  36.         }  
  37.   
  38.         /** 
  39.          * 從指定的position創建page 
  40.          * 
  41.          * @param container ViewPager容器 
  42.          * @param position The page position to be instantiated. 
  43.          * @return 返回指定position的page，這裏不需要是一個view，也可以是其他的視圖容器. 
  44.          */  
  45.         @Override  
  46.         public Object instantiateItem(View collection, int position) {  
  47.   
  48.               
  49.             ((ViewPager) collection).addView(mListViews.get(position),0);  
  50.               
  51.             return mListViews.get(position);  
  52.         }  
  53.   
  54.         /** 
  55.          * <span >從指定的position銷毀page</span> 
  56.          *  
  57.          *  
  58.          *<span >參數同上</span> 
  59.          */  
  60.         @Override  
  61.         public void destroyItem(View collection, int position, Object view) {  
  62.             ((ViewPager) collection).removeView(mListViews.get(position));  
  63.         }  
  64.   
  65.           
  66.           
  67.         @Override  
  68.         public boolean isViewFromObject(View view, Object object) {  
  69.             return view==(object);  
  70.         }  
  71.   
  72.         @Override  
  73.         public void finishUpdate(View arg0) {}  
  74.           
  75.   
  76.         @Override  
  77.         public void restoreState(Parcelable arg0, ClassLoader arg1) {}  
  78.   
  79.         @Override  
  80.         public Parcelable saveState() {  
  81.             return null;  
  82.         }  
  83.   
  84.         @Override  
  85.         public void startUpdate(View arg0) {}  
  86.           
  87.     }  
  88.       
  89.       
  90. }  

就這樣，我們可以很容易就實現左右兩個屏幕之間的切換。具體頁麵到內容就靠大家去發揮了！ 
項目代碼：https://download.csdn.net/source/3488073 

補充： 
用ViewPager寫的左右滑屏，默認是沒有沒有循環效果的。就是當滑到最左端或者最右端就不能滑動了，所以就試著弄了下在左麵和右麵各增加個空View，然後在onPageSelected方法中： 
Java代碼  收藏代碼
  1. @Override  
  2. public void onPageSelected(int arg0) {  
  3.   // TODO Auto-generated method stub  
  4.   System.out.println("onPageSelected = " + arg0);  
  5.   if(arg0 == 0)  
  6.       mViewPaper.setCurrentItem(arg0 + 1);  
  7.   else if(arg0 == mViewList.size() - 1)  
  8.       mViewPaper.setCurrentItem(arg0 - 1);  
  9.   }  

其他文章： 
android中的左右滑屏實現By ViewPager

最後更新：2017-04-02 17:51:24

  上一篇：go android中的matrix的簡單應用
  下一篇：go Gallery 模仿Flash廣告欄~！附源碼