Android中如何使用ViewPager實現相似laucher左右拖動效果

  如今不少Android應用在首次安裝完都會有指引如何使用該應用的某些功能的指引界面，這樣會得到很好的用戶體驗，可以幫助用戶更好使用應用的某些功能。其實該功能和Android主界面的 luncher 的功能徹底同樣的效果，能夠實現左右拖動。

下面結合 ViewPager 的實例來展現如何實現該功能，先看下該Demo的結構圖：

注：ViewPager類是實現左右兩個屏幕平滑地切換的一個類，是由Google 提供的， 使用ViewPager首先須要引入android-support-v4.jar這個jar包。其中工程項目中的 libs 文件夾下存放着 android-support-v4.jar這個jar包。drawable文件夾下包含有圖片資源文件。

如下是工程中各個文件的源碼：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
android:id="@+id/guidePages"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>

<RelativeLayout 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:orientation="vertical" >
<LinearLayout 
android:id="@+id/viewGroup" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
android:layout_alignParentBottom="true" 
android:layout_marginBottom="30dp" 
android:gravity="center_horizontal" 
android:orientation="horizontal" > 
</LinearLayout> 
</RelativeLayout>

</FrameLayout>

item01.xml源碼：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<ImageView 
android:layout_width="fill_parent" 
android:layout_height="fill_parent" 
android:background="@drawable/feature_guide_0" > 
</ImageView>

</LinearLayout>

其中item02.xml,item03.xml,item04.xml佈局文件的源碼和item01.xml佈局文件同樣，只是 ImageView 中的 android:background 屬性的背景圖片不一樣而已。GuideViewDemoActivity.java 源碼：

package com.andyidea.guidedemo;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;

public class GuideViewDemoActivity extends Activity {

private ViewPager viewPager; 
private ArrayList<View> pageViews; 
private ViewGroup main, group; 
private ImageView imageView; 
private ImageView[] imageViews; 

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);

LayoutInflater inflater = getLayoutInflater(); 
pageViews = new ArrayList<View>(); 
pageViews.add(inflater.inflate(R.layout.item01, null)); 
pageViews.add(inflater.inflate(R.layout.item02, null)); 
pageViews.add(inflater.inflate(R.layout.item03, null)); 
pageViews.add(inflater.inflate(R.layout.item04, null)); 

imageViews = new ImageView[pageViews.size()]; 
main = (ViewGroup)inflater.inflate(R.layout.main, null); 

// group是R.layou.main中的負責包裹小圓點的LinearLayout. 
group = (ViewGroup)main.findViewById(R.id.viewGroup); 

viewPager = (ViewPager)main.findViewById(R.id.guidePages); 

for (int i = 0; i < pageViews.size(); i++) { 
imageView = new ImageView(GuideViewDemoActivity.this); 
imageView.setLayoutParams(new LayoutParams(20,20)); 
imageView.setPadding(20, 0, 20, 0); 
imageViews[i] = imageView; 
if (i == 0) { 
//默認選中第一張圖片
imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused); 
} else { 
imageViews[i].setBackgroundResource(R.drawable.page_indicator); 
} 
group.addView(imageViews[i]); 
} 

setContentView(main); 

viewPager.setAdapter(new GuidePageAdapter()); 
viewPager.setOnPageChangeListener(new GuidePageChangeListener()); 
}

/** 指引頁面Adapter */
class GuidePageAdapter extends PagerAdapter { 

@Override 
public int getCount() { 
return pageViews.size(); 
} 

@Override 
public boolean isViewFromObject(View arg0, Object arg1) { 
return arg0 == arg1; 
} 

@Override 
public int getItemPosition(Object object) { 
// TODO Auto-generated method stub 
return super.getItemPosition(object); 
} 

@Override 
public void destroyItem(View arg0, int arg1, Object arg2) { 
// TODO Auto-generated method stub 
((ViewPager) arg0).removeView(pageViews.get(arg1)); 
} 

@Override 
public Object instantiateItem(View arg0, int arg1) { 
// TODO Auto-generated method stub 
((ViewPager) arg0).addView(pageViews.get(arg1)); 
return pageViews.get(arg1); 
} 

@Override 
public void restoreState(Parcelable arg0, ClassLoader arg1) { 
// TODO Auto-generated method stub 

} 

@Override 
public Parcelable saveState() { 
// TODO Auto-generated method stub 
return null; 
} 

@Override 
public void startUpdate(View arg0) { 
// TODO Auto-generated method stub 

} 

@Override 
public void finishUpdate(View arg0) { 
// TODO Auto-generated method stub 

} 
} 

/** 指引頁面改監聽器 */
class GuidePageChangeListener implements OnPageChangeListener { 

@Override 
public void onPageScrollStateChanged(int arg0) { 
// TODO Auto-generated method stub 

} 

@Override 
public void onPageScrolled(int arg0, float arg1, int arg2) { 
// TODO Auto-generated method stub 

} 

@Override 
public void onPageSelected(int arg0) { 
for (int i = 0; i < imageViews.length; i++) { 
imageViews[arg0] 
.setBackgroundResource(R.drawable.page_indicator_focused); 
if (arg0 != i) { 
imageViews[i] 
.setBackgroundResource(R.drawable.page_indicator); 
} 
}

} 

} 

}