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源码：

01	<?xmlversion="1.0"encoding="utf-8"?>

02	<FrameLayoutxmlns: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	<?xmlversion="1.0"encoding="utf-8"?>

02	<LinearLayoutxmlns: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	packagecom.andyidea.guidedemo;

002

003	importjava.util.ArrayList;

004

005	importandroid.app.Activity;

006	importandroid.os.Bundle;

007	importandroid.os.Parcelable;

008	importandroid.support.v4.view.PagerAdapter;

009	importandroid.support.v4.view.ViewPager;

010	importandroid.support.v4.view.ViewPager.OnPageChangeListener;

011	importandroid.view.LayoutInflater;

012	importandroid.view.View;

013	importandroid.view.ViewGroup;

014	importandroid.view.ViewGroup.LayoutParams;

015	importandroid.view.Window;

016	importandroid.widget.ImageView;

017

018	publicclassGuideViewDemoActivityextendsActivity {

019

020	privateViewPager viewPager;

021	privateArrayList<View> pageViews;

022	privateViewGroup main, group;

023	privateImageView imageView;

024	privateImageView[] imageViews;

025

026	/** Called when the activity is first created. */

027

@Override

028	publicvoidonCreate(Bundle savedInstanceState) {

029	super.onCreate(savedInstanceState);

030	this.requestWindowFeature(Window.FEATURE_NO_TITLE);

031

032	LayoutInflater inflater = getLayoutInflater();

033	pageViews =newArrayList<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 =newImageView[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(inti =0; i < pageViews.size(); i++) {

048	imageView =newImageView(GuideViewDemoActivity.this);

049	imageView.setLayoutParams(newLayoutParams(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(newGuidePageAdapter());

064	viewPager.setOnPageChangeListener(newGuidePageChangeListener());

065

}

066

067	/** 指引页面Adapter */

068	classGuidePageAdapterextendsPagerAdapter {

069

070

@Override

071	publicintgetCount() {

072	returnpageViews.size();

073

}

074

075

@Override

076	publicbooleanisViewFromObject(View arg0, Object arg1) {

077	returnarg0 == arg1;

078

}

079

080

@Override

081	publicintgetItemPosition(Object object) {

082	// TODO Auto-generated method stub

083	returnsuper.getItemPosition(object);

084

}

085

086

@Override

087	publicvoiddestroyItem(View arg0,intarg1, Object arg2) {

088	// TODO Auto-generated method stub

089	((ViewPager) arg0).removeView(pageViews.get(arg1));

090

}

091

092

@Override

093	publicObject instantiateItem(View arg0,intarg1) {

094	// TODO Auto-generated method stub

095	((ViewPager) arg0).addView(pageViews.get(arg1));

096	returnpageViews.get(arg1);

097

}

098

099

@Override

100	publicvoidrestoreState(Parcelable arg0, ClassLoader arg1) {

101	// TODO Auto-generated method stub

102

103

}

104

105

@Override

106	publicParcelable saveState() {

107	// TODO Auto-generated method stub

108	returnnull;

109

}

110

111

@Override

112	publicvoidstartUpdate(View arg0) {

113	// TODO Auto-generated method stub

114

115

}

116

117

@Override

118	publicvoidfinishUpdate(View arg0) {

119	// TODO Auto-generated method stub

120

121

}

122

}

123

124	/** 指引页面改监听器 */

125	classGuidePageChangeListenerimplementsOnPageChangeListener {

126

127

@Override

128	publicvoidonPageScrollStateChanged(intarg0) {

129	// TODO Auto-generated method stub

130

131

}

132

133

@Override

134	publicvoidonPageScrolled(intarg0,floatarg1,intarg2) {

135	// TODO Auto-generated method stub

136

137

}

138

139

@Override

140	publicvoidonPageSelected(intarg0) {

141	for(inti =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组件实现了左右滑动(拖动)效果。