Android中如何使用ViewPager实现类似laucher左右拖动效果

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.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2012年资料/4月/23日/Android中如何使用ViewPager实现类似laucher左右拖动效果/

更多Android相关信息见Android 专题页面 http://www.bkjia.com/topicnews.aspx?tid=11