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"
> |
07 |
< android.support.v4.view.ViewPager |
08 |
android:id = "@+id/guidePages" |
09 |
android:layout_width = "fill_parent" |
10 |
android:layout_height = "wrap_content" /> |
13 |
android:layout_width = "fill_parent" |
14 |
android:layout_height = "wrap_content" |
15 |
android:orientation = "vertical"
> |
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"
> |
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"
> |
08 |
android:layout_width = "fill_parent" |
09 |
android:layout_height = "fill_parent" |
10 |
android:background = "@drawable/feature_guide_0"
> |
其中item02.xml,item03.xml,item04.xml布局文件的源码和item01.xml布局文件一样,只是 ImageView 中的 android:background 属性的背景图片不同而已。
GuideViewDemoActivity.java 源码:
001 |
package com.andyidea.guidedemo; |
003 |
import java.util.ArrayList; |
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; |
018 |
public class
GuideViewDemoActivity extends
Activity { |
020 |
private
ViewPager viewPager; |
021 |
private
ArrayList<View> pageViews; |
022 |
private
ViewGroup main, group; |
023 |
private
ImageView imageView; |
024 |
private
ImageView[] imageViews; |
026 |
/** Called when the activity is first created. */ |
028 |
public
void onCreate(Bundle savedInstanceState) { |
029 |
super .onCreate(savedInstanceState); |
030 |
this .requestWindowFeature(Window.FEATURE_NO_TITLE); |
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 )); |
039 |
imageViews =
new ImageView[pageViews.size()];
|
040 |
main = (ViewGroup)inflater.inflate(R.layout.main,
null ); |
043 |
group = (ViewGroup)main.findViewById(R.id.viewGroup);
|
045 |
viewPager = (ViewPager)main.findViewById(R.id.guidePages);
|
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;
|
054 |
imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
|
056 |
imageViews[i].setBackgroundResource(R.drawable.page_indicator);
|
058 |
group.addView(imageViews[i]);
|
061 |
setContentView(main);
|
063 |
viewPager.setAdapter( new
GuidePageAdapter()); |
064 |
viewPager.setOnPageChangeListener( new
GuidePageChangeListener()); |
068 |
class
GuidePageAdapter extends
PagerAdapter {
|
071 |
public
int getCount() { |
072 |
return
pageViews.size(); |
076 |
public
boolean isViewFromObject(View arg0, Object arg1) {
|
081 |
public
int getItemPosition(Object object) {
|
083 |
return
super .getItemPosition(object);
|
087 |
public
void destroyItem(View arg0,
int arg1, Object arg2) {
|
089 |
((ViewPager) arg0).removeView(pageViews.get(arg1));
|
093 |
public
Object instantiateItem(View arg0, int
arg1) { |
095 |
((ViewPager) arg0).addView(pageViews.get(arg1));
|
096 |
return
pageViews.get(arg1); |
100 |
public
void restoreState(Parcelable arg0, ClassLoader arg1) {
|
106 |
public
Parcelable saveState() { |
112 |
public
void startUpdate(View arg0) {
|
118 |
public
void finishUpdate(View arg0) {
|
125 |
class
GuidePageChangeListener implements
OnPageChangeListener { |
128 |
public
void onPageScrollStateChanged( int
arg0) { |
134 |
public
void onPageScrolled( int
arg0, float
arg1,
int arg2) {
|
140 |
public
void onPageSelected( int
arg0) { |
141 |
for
( int
i =
0 ; i < imageViews.length; i++) {
|
143 |
.setBackgroundResource(R.drawable.page_indicator_focused);
|
146 |
.setBackgroundResource(R.drawable.page_indicator);
|
运行上面的程序,效果截图如下:
至此大功告成,已经采用ViewPager组件实现了左右滑动(拖动)效果。本文为[Andy.Chen]原创,转载请注明出处,谢谢。