现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面，这样会获得很好的用户体验，能够帮助用户更好使用应用的某些功 能。其实该功能和Android主界面的 luncher 的功能完全一样的效果，可以实现左右拖动。
下面结合 ViewPager 的实例来展示如何实现该功能，先看下该Demo的结构图：
注：ViewPager类是实现左右两个屏幕平滑地切换的一个类，是由Google 提供的， 使用ViewPager首先需要引入android-support-v4.jar这个jar包。其中工程项目中的 libs 文件夹下存放着 android-support-v4.jar这个jar包。drawable文件夹下包含有图片资源文件。
以下是工程中各个文件的源码：
main.xml源码：
01 <?xml version="1.0" encoding="utf-8"?>
02 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
03 android:layout_width="fill_parent"
04 android:layout_height="fill_parent"
05 android:orientation="vertical" >
06
07 <android.support.v4.view.ViewPager
08 android:id="@+id/guidePages"
09 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源码：
01 <?xml version="1.0" encoding="utf-8"?>
02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03 android:layout_width="fill_parent"
04 android:layout_height="fill_parent"
05 android:orientation="vertical" >
06
07 <ImageView
08 android:layout_width="fill_parent"
09 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 源码：
001 package com.andyidea.guidedemo;
002
003 import java.util.ArrayList;
004
005 import android.app.Activity;
006 import android.os.Bundle;
007 import android.os.Parcelable;
008 import android.support.v4.view.PagerAdapter;
009 import android.support.v4.view.ViewPager;
010 import android.support.v4.view.ViewPager.OnPageChangeListener;
011 import android.view.LayoutInflater;
012 import android.view.View;
013 import android.view.ViewGroup;
014 import android.view.ViewGroup.LayoutParams;
015 import android.view.Window;
016 import android.widget.ImageView;
017
018 public class GuideViewDemoActivity extends Activity {
019
020 private ViewPager viewPager;
021 private ArrayList<View> pageViews;
022 private ViewGroup main, group;
023 private ImageView imageView;
024 private ImageView[] imageViews;
025
026 /** Called when the activity is first created. */
027 @Override
028 public void onCreate(Bundle savedInstanceState) {
029 super.onCreate(savedInstanceState);
030 this.requestWindowFeature(Window.FEATURE_NO_TITLE);
031
032 LayoutInflater inflater = getLayoutInflater();
033 pageViews = new ArrayList<View>();
034 pageViews.add(inflater.inflate(R.layout.item01, null));
035 pageViews.add(inflater.inflate(R.layout.item02, null));
036 pageViews.add(inflater.inflate(R.layout.item03, null));
037 pageViews.add(inflater.inflate(R.layout.item04, null));
038
039 imageViews = new ImageView[pageViews.size()];
040 main = (ViewGroup)inflater.inflate(R.layout.main, null);
041
042 // group是R.layou.main中的负责包裹小圆点的LinearLayout.
043 group = (ViewGroup)main.findViewById(R.id.viewGroup);
044
045 viewPager = (ViewPager)main.findViewById(R.id.guidePages);
046
047 for (int i = 0; i < pageViews.size(); i++) {
048 imageView = new ImageView(GuideViewDemoActivity.this);
049 imageView.setLayoutParams(new LayoutParams(20,20));
050 imageView.setPadding(20, 0, 20, 0);
051 imageViews[i] = imageView;
052 if (i == 0) {
053 //默认选中第一张图片
054 imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
055 } else {
056 imageViews[i].setBackgroundResource(R.drawable.page_indicator);
057 }
058 group.addView(imageViews[i]);
059 }
060
061 setContentView(main);
062
063 viewPager.setAdapter(new GuidePageAdapter());
064 viewPager.setOnPageChangeListener(new GuidePageChangeListener());
065 }
066
067 /** 指引页面Adapter */
068 class GuidePageAdapter extends PagerAdapter {
069
070 @Override
071 public int getCount() {
072 return pageViews.size();
073 }
074
075 @Override
076 public boolean isViewFromObject(View arg0, Object arg1) {
077 return arg0 == arg1;
078 }
079
080 @Override
081 public int getItemPosition(Object object) {
082 // TODO Auto-generated method stub
083 return super.getItemPosition(object);
084 }
085
086 @Override
087 public void destroyItem(View arg0, int arg1, Object arg2) {
088 // TODO Auto-generated method stub
089 ((ViewPager) arg0).removeView(pageViews.get(arg1));
090 }
091
092 @Override
093 public Object instantiateItem(View arg0, int arg1) {
094 // TODO Auto-generated method stub
095 ((ViewPager) arg0).addView(pageViews.get(arg1));
096 return pageViews.get(arg1);
097 }
098
099 @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]原创，转载请注明出处，谢谢。
