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
<?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]原創，轉載請註明出處，謝謝。