现在很多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]原创，转载请注明出处，谢谢。