Android中如何使用ViewPager實現類似laucher左右拖動效果

現在很多Android應用在首次安裝完都會有指引如何使用該應用的某些功能的指引界面，這樣會獲得很好的用戶體驗，能夠幫助用戶更好使用應用的某些功能。其實該功能和Android主界面的 luncher 的功能完全一樣的效果，可以實現左右拖動。

下面結合 ViewPager 的實例來展示如何實現該功能，先看下該Demo的結構圖：

注：ViewPager類是實現左右兩個屏幕平滑地切換的一個類，是由Google 提供的， 使用ViewPager首先需要引入android-support-v4.jar這個jar包。其中工程項目中的 libs 文件夾下存放著 android-support-v4.jar這個jar包。drawable文件夾下包含有圖片資源文件。

以下是工程中各個文件的源碼：

main.xml源碼：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <android.support.v4.view.ViewPager  
8.         android:id="@+id/guidePages"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="wrap_content"/>  
11.          
12.     <RelativeLayout    
13.         android:layout_width="fill_parent"    
14.         android:layout_height="wrap_content"    
15.         android:orientation="vertical" >  
16.     <LinearLayout    
17.         android:id="@+id/viewGroup"    
18.         android:layout_width="fill_parent"    
19.         android:layout_height="wrap_content"    
20.         android:layout_alignParentBottom="true"    
21.         android:layout_marginBottom="30dp"    
22.         android:gravity="center_horizontal"    
23.         android:orientation="horizontal" >    
24.     </LinearLayout>    
25.     </RelativeLayout>  
26.   
27. </FrameLayout>  

item01.xml源碼：

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.       
7.     <ImageView    
8.         android:layout_width="fill_parent"    
9.         android:layout_height="fill_parent"    
10.         android:background="@drawable/feature_guide_0" >    
11.     </ImageView>  
12.       
13. </LinearLayout>  

其中item02.xml,item03.xml,item04.xml布局文件的源碼和item01.xml布局文件一樣，只是 ImageView 中的 android:background 屬性的背景圖片不同而已。

GuideViewDemoActivity.java 源碼：

1. package com.andyidea.guidedemo;  
2.   
3. import java.util.ArrayList;  
4.   
5. import android.app.Activity;  
6. import android.os.Bundle;  
7. import android.os.Parcelable;  
8. import android.support.v4.view.PagerAdapter;  
9. import android.support.v4.view.ViewPager;  
10. import android.support.v4.view.ViewPager.OnPageChangeListener;  
11. import android.view.LayoutInflater;  
12. import android.view.View;  
13. import android.view.ViewGroup;  
14. import android.view.ViewGroup.LayoutParams;  
15. import android.view.Window;  
16. import android.widget.ImageView;  
17.   
18. public class GuideViewDemoActivity extends Activity {  
19.       
20.     private ViewPager viewPager;    
21.     private ArrayList<View> pageViews;    
22.     private ViewGroup main, group;    
23.     private ImageView imageView;    
24.     private ImageView[] imageViews;   
25.       
26.     /** Called when the activity is first created. */  
27.     @Override  
28.     public void onCreate(Bundle savedInstanceState) {  
29.         super.onCreate(savedInstanceState);  
30.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
31.           
32.         LayoutInflater inflater = getLayoutInflater();    
33.         pageViews = new ArrayList<View>();    
34.         pageViews.add(inflater.inflate(R.layout.item01, null));    
35.         pageViews.add(inflater.inflate(R.layout.item02, null));    
36.         pageViews.add(inflater.inflate(R.layout.item03, null));    
37.         pageViews.add(inflater.inflate(R.layout.item04, null));     
38.     
39.         imageViews = new ImageView[pageViews.size()];    
40.         main = (ViewGroup)inflater.inflate(R.layout.main, null);    
41.           
42.         // group是R.layou.main中的負責包裹小圓點的LinearLayout.    
43.         group = (ViewGroup)main.findViewById(R.id.viewGroup);    
44.     
45.         viewPager = (ViewPager)main.findViewById(R.id.guidePages);    
46.     
47.         for (int i = 0; i < pageViews.size(); i++) {    
48.             imageView = new ImageView(GuideViewDemoActivity.this);    
49.             imageView.setLayoutParams(new LayoutParams(20,20));    
50.             imageView.setPadding(20, 0, 20, 0);    
51.             imageViews[i] = imageView;    
52.             if (i == 0) {    
53.                 //默認選中第一張圖片  
54.                 imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);    
55.             } else {    
56.                 imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
57.             }    
58.             group.addView(imageViews[i]);    
59.         }    
60.     
61.         setContentView(main);    
62.     
63.         viewPager.setAdapter(new GuidePageAdapter());    
64.         viewPager.setOnPageChangeListener(new GuidePageChangeListener());    
65.     }  
66.       
67.     /** 指引頁面Adapter */  
68.     class GuidePageAdapter extends PagerAdapter {    
69.             
70.         @Override    
71.         public int getCount() {    
72.             return pageViews.size();    
73.         }    
74.     
75.         @Override    
76.         public boolean isViewFromObject(View arg0, Object arg1) {    
77.             return arg0 == arg1;    
78.         }    
79.     
80.         @Override    
81.         public int getItemPosition(Object object) {    
82.             // TODO Auto-generated method stub    
83.             return super.getItemPosition(object);    
84.         }    
85.     
86.         @Override    
87.         public void destroyItem(View arg0, int arg1, Object arg2) {    
88.             // TODO Auto-generated method stub    
89.             ((ViewPager) arg0).removeView(pageViews.get(arg1));    
90.         }    
91.     
92.         @Override    
93.         public Object instantiateItem(View arg0, int arg1) {    
94.             // TODO Auto-generated method stub    
95.             ((ViewPager) arg0).addView(pageViews.get(arg1));    
96.             return pageViews.get(arg1);    
97.         }    
98.     
99.         @Override    
100.         public void restoreState(Parcelable arg0, ClassLoader arg1) {    
101.             // TODO Auto-generated method stub    
102.     
103.         }    
104.     
105.         @Override    
106.         public Parcelable saveState() {    
107.             // TODO Auto-generated method stub    
108.             return null;    
109.         }    
110.     
111.         @Override    
112.         public void startUpdate(View arg0) {    
113.             // TODO Auto-generated method stub    
114.     
115.         }    
116.     
117.         @Override    
118.         public void finishUpdate(View arg0) {    
119.             // TODO Auto-generated method stub    
120.     
121.         }    
122.     }   
123.       
124.     /** 指引頁面改監聽器 */  
125.     class GuidePageChangeListener implements OnPageChangeListener {    
126.     
127.         @Override    
128.         public void onPageScrollStateChanged(int arg0) {    
129.             // TODO Auto-generated method stub    
130.     
131.         }    
132.     
133.         @Override    
134.         public void onPageScrolled(int arg0, float arg1, int arg2) {    
135.             // TODO Auto-generated method stub    
136.     
137.         }    
138.     
139.         @Override    
140.         public void onPageSelected(int arg0) {    
141.             for (int i = 0; i < imageViews.length; i++) {    
142.                 imageViews[arg0]    
143.                         .setBackgroundResource(R.drawable.page_indicator_focused);    
144.                 if (arg0 != i) {    
145.                     imageViews[i]    
146.                             .setBackgroundResource(R.drawable.page_indicator);    
147.                 }    
148.             }  
149.     
150.         }    
151.     
152.     }    
153.       
154. }  

運行上面的程序，效果截圖如下：

   
至此大功告成，已經采用ViewPager組件實現了左右滑動(拖動)效果。本文為[Andy.Chen]原創，轉載請注明出處，謝謝。

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2012年資料/4月/23日/Android中如何使用ViewPager實現類似laucher左右拖動效果/

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11