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

http://www.open-open.com/lib/view/open1333238063514.html

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