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
}

运行上面的程序，效果截图如下：
Android中如何使用ViewPager实现类似laucher左右拖动效果
至此大功告成，已经采用ViewPager组件实现了左右滑动(拖动)效果。