ViewPager 詳解（一）---基本入門

效果圖：

實現了三個view間的相互滑動

                     第一個VIEW向第二個VIEW滑動　　　　　  第二個VIEW向第三個VIEW滑動

一、新建專案，引入ViewPager控制元件

ViewPager。它是google SDk中自帶的一個附加包的一個類，可以用來實現螢幕間的切換。

1.在主佈局檔案里加入

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     tools:context="com.example.testviewpage_1.MainActivity" >  
6. <android.support.v4.view.ViewPager  
7.     android:id="@+id/viewpager"  
8.     android:layout_width="wrap_content"  
9.     android:layout_height="wrap_content"  
10.     android:layout_gravity="center" />  
11. </RelativeLayout>  

其中 <android.support.v4.view.ViewPager /> 是ViewPager對應的元件，要將其放到想要滑動的位置

2、新建三個layout，用於滑動切換的檢視

從效果圖中也可以看到，我們的三個檢視都非常簡單，裡面沒有任何的控制元件，大家當然可以往裡新增各種控制元件，但這裡是個DEMO，只詳解原理即可，所以我這裡僅僅用背景來區別不用layout佈局。

佈局程式碼分別如下：

layout1.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#ffffff"  
6.     android:orientation="vertical" >  
7. </LinearLayout>  

layout2.xml

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#ffff00"  
6.     android:orientation="vertical" >  
7. </LinearLayout>  

layout3.xml [html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#ff00ff"  
6.     android:orientation="vertical" >  
7. </LinearLayout><span style="color:#660000;">  
8. </span>  

二、程式碼實戰

先上整體程式碼，然後逐步講解。 [java] view plain copy

1. package com.example.testviewpage_1;  
2. /** 
3.  * @author  harvic 
4.  * @date 2014.8.9 
5.  */  
6. import java.util.ArrayList;  
7. import java.util.List;  
8. import java.util.zip.Inflater;  
9. import android.app.Activity;  
10. import android.os.Bundle;  
11. import android.support.v4.view.PagerAdapter;  
12. import android.support.v4.view.ViewPager;  
13. import android.view.LayoutInflater;  
14. import android.view.View;  
15. import android.view.ViewGroup;  
16. public class MainActivity extends Activity {  
17.     private View view1, view2, view3;  
18.     private ViewPager viewPager;  //對應的viewPager  
19.     private List<View> viewList;//view陣列  
20.     @Override  
21.     protected void onCreate(Bundle savedInstanceState) {  
22.         super.onCreate(savedInstanceState);  
23.         setContentView(R.layout.activity_main);  
24.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
25.         LayoutInflater inflater=getLayoutInflater();  
26.         view1 = inflater.inflate(R.layout.layout1, null);  
27.         view2 = inflater.inflate(R.layout.layout2,null);  
28.         view3 = inflater.inflate(R.layout.layout3, null);  
29.         viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中  
30.         viewList.add(view1);  
31.         viewList.add(view2);  
32.         viewList.add(view3);  
33.         PagerAdapter pagerAdapter = new PagerAdapter() {  
34.             @Override  
35.             public boolean isViewFromObject(View arg0, Object arg1) {  
36.                 // TODO Auto-generated method stub  
37.                 return arg0 == arg1;  
38.             }  
39.             @Override  
40.             public int getCount() {  
41.                 // TODO Auto-generated method stub  
42.                 return viewList.size();  
43.             }  
44.             @Override  
45.             public void destroyItem(ViewGroup container, int position,  
46.                     Object object) {  
47.                 // TODO Auto-generated method stub  
48.                 container.removeView(viewList.get(position));  
49.             }  
50.             @Override  
51.             public Object instantiateItem(ViewGroup container, int position) {  
52.                 // TODO Auto-generated method stub  
53.                 container.addView(viewList.get(position));  
54.                 return viewList.get(position);  
55.             }  
56.         };  
57.         viewPager.setAdapter(pagerAdapter);  
58.     }  
59. }  

程式碼量很小，全部放在了OnCreate()函式中。

1、先看宣告的變數的意義：

1. private View view1, view2, view3;  
2. private List<View> viewList;//view陣列  
3. private ViewPager viewPager;  //對應的viewPager  

首先viewPager對應 <android.support.v4.view.ViewPager/>控制元件。

view1,view2 ,view3對應我們的三個layout，即layout1.xml,layout2.xml,layout3.xml

viewList是一個View陣列，盛裝上面的三個VIEW

2、接下來是他們的初始化過程：

1. viewPager = (ViewPager) findViewById(R.id.viewpager);  
2. LayoutInflater inflater=getLayoutInflater();  
3. view1 = inflater.inflate(R.layout.layout1, null);  
4. view2 = inflater.inflate(R.layout.layout2,null);  
5. view3 = inflater.inflate(R.layout.layout3, null);  
6. viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中  
7. viewList.add(view1);  
8. viewList.add(view2);  
9. viewList.add(view3);  

初始化過程難度不大，就是將資源與變數聯絡起來佈局，最後將例項化的view1,view2,view3新增到viewList中

3、PageAdapter——PageView的介面卡

介面卡這個東東想必大家都不莫生，在ListView中也有介面卡，listView通過重寫GetView（）函式來獲取當前要載入的Item。而PageAdapter不太相同，畢竟PageAdapter是單個VIew的合集。

PageAdapter 必須重寫的四個函式：

• boolean isViewFromObject(View arg0, Object arg1)
• int getCount() 
• void destroyItem(ViewGroup container, int position,Object object)
• Object instantiateItem(ViewGroup container, int position)

先看看各個函式，我們上面都做了什麼吧：

1. @Override  
2. public int getCount() {  
3.     // TODO Auto-generated method stub  
4.     return viewList.size();  
5. }  

getCount():返回要滑動的VIew的個數

1. @Override  
2. public void destroyItem(ViewGroup container, int position,  
3.         Object object) {  
4.     // TODO Auto-generated method stub  
5.     container.removeView(viewList.get(position));  
6. }  

destroyItem（）：從當前container中刪除指定位置（position）的View; [java] view plain copy

1. @Override  
2. public Object instantiateItem(ViewGroup container, int position) {  
3.     // TODO Auto-generated method stub  
4.         container.addView(viewList.get(position));  
5.         return viewList.get(position);  
6.     }  
7. };  

instantiateItem()：做了兩件事，第一：將當前檢視新增到container中，第二：返回當前View [java] view plain copy

1. @Override  
2. public boolean isViewFromObject(View arg0, Object arg1) {  
3.     // TODO Auto-generated method stub  
4.     return arg0 == arg1;  
5. }  

isViewFromObject():對於這個函式就先不做講解，大家目前先知道它要這樣重寫就行了，後面我們會對它進行改寫。