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