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" >
7. <android.support.v4.view.ViewPager
8. android:id="@+id/guidePages"
9. android:layout_width="fill_parent"
10. android:layout_height="wrap_content"/>
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>
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" >
7. <ImageView
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:background="@drawable/feature_guide_0" >
11. </ImageView>
13. </LinearLayout>

其中item02.xml,item03.xml,item04.xml布局文件的源碼和item01.xml布局文件一樣，只是 ImageView 中的 android:background 屬性的背景圖片不同而已。

GuideViewDemoActivity.java 源碼：

1. package com.andyidea.guidedemo;
3. import java.util.ArrayList;
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;
18. public class GuideViewDemoActivity extends Activity {
20. private ViewPager viewPager;
21. private ArrayList<View> pageViews;
22. private ViewGroup main, group;
23. private ImageView imageView;
24. private ImageView[] imageViews;
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);
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));
39. imageViews = new ImageView[pageViews.size()];
40. main = (ViewGroup)inflater.inflate(R.layout.main, null);
42. // group是R.layou.main中的負責包裹小圓點的LinearLayout.
43. group = (ViewGroup)main.findViewById(R.id.viewGroup);
45. viewPager = (ViewPager)main.findViewById(R.id.guidePages);
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. }
61. setContentView(main);
63. viewPager.setAdapter(new GuidePageAdapter());
64. viewPager.setOnPageChangeListener(new GuidePageChangeListener());
65. }
67. /** 指引頁面Adapter */
68. class GuidePageAdapter extends PagerAdapter {
70. @Override
71. public int getCount() {
72. return pageViews.size();
73. }
75. @Override
76. public boolean isViewFromObject(View arg0, Object arg1) {
77. return arg0 == arg1;
78. }
80. @Override
81. public int getItemPosition(Object object) {
82. // TODO Auto-generated method stub
83. return super.getItemPosition(object);
84. }
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. }
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. }
99. @Override
100. public void restoreState(Parcelable arg0, ClassLoader arg1) {
101. // TODO Auto-generated method stub
103. }
105. @Override
106. public Parcelable saveState() {
107. // TODO Auto-generated method stub
108. return null;
109. }
111. @Override
112. public void startUpdate(View arg0) {
113. // TODO Auto-generated method stub
115. }
117. @Override
118. public void finishUpdate(View arg0) {
119. // TODO Auto-generated method stub
121. }
122. }
124. /** 指引頁面改監聽器 */
125. class GuidePageChangeListener implements OnPageChangeListener {
127. @Override
128. public void onPageScrollStateChanged(int arg0) {
129. // TODO Auto-generated method stub
131. }
133. @Override
134. public void onPageScrolled(int arg0, float arg1, int arg2) {
135. // TODO Auto-generated method stub
137. }
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. }
150. }
152. }
154. }

運行上面的程序，效果截圖如下：

至此大功告成，已經采用ViewPager組件實現了左右滑動(拖動)效果。本文為[Andy.Chen]原創，轉載請注明出處，謝謝。

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2012年資料/4月/23日/Android中如何使用ViewPager實現類似laucher左右拖動效果/

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11