Android中如何使用ViewPager实现类似laucher左右拖动效果

现在很多Android应用在首次安装完都会有指引如何使用该应用的某些功能的指引界面,这样会获得很好的用户体验,能够帮助用户更好使用应用的某些功 能。其实该功能和Android主界面的 luncher 的功能完全一样的效果,可以实现左右拖动。

下面结合 ViewPager 的实例来展示如何实现该功能,先看下该Demo的结构图:

Android中如何使用ViewPager实现类似laucher左右拖动效果_第1张图片

注: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 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(); 
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(200200); 
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                 

你可能感兴趣的:(Android)