Android开发之用ViewPager实现欢迎引导页面

使用ViewPager实现欢迎引导页面，实现如下效果，可以左右滑动切换图片。同时，底部的小圆点可以同步切换。ViewPager使用PagerAdapter适配器为其设定所要展示的视图资源。

一.页面布局

1.xml布局文件

<span style="font-size:14px;"><android.support.v4.view.ViewPager
android:id="@+id/vp_guide_activity_firstpage"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="8" /></span>

2.pagerAdapter的实现，构造函数中，传入要展示的视图

<span style="font-size:14px;">package cn.azry.control.adapter;

import java.util.ArrayList;
import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

public class GuidePageAdapter extends PagerAdapter {

private List<View> pageViews = new ArrayList<View>();

public GuidePageAdapter(List<View> pageViews) {
this.pageViews = pageViews;
}

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

// 来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}

// PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(pageViews.get(arg1));
}

// 当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，我们将要显示的ImageView加入到ViewGroup中，然后作为返回值返回即可
@Override
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(pageViews.get(arg1));
return pageViews.get(arg1);
}
}</span>

3.activity中显示viewpager

<span style="font-size:14px;"></span><p style="margin-top: 0px; margin-bottom: 0px; line-height: normal; font-family: Monaco;"><span style="font-size:14px;">ViewPager vpGuide = (ViewPager) findViewById(R.id.vp_guide_activity_firstpage);</span></p><span style="font-size:14px;">		vpGuide.setOnPageChangeListener(new OnPageChangeListener() {//页面滑动时，改变的事件

@Override
public void onPageSelected(int position) {
currentIndex = position;
myHandler.sendEmptyMessage(MESSAGE_REFRESHINDICATEVIEW);//发送消息给handler，让其改变底部小点
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
});</span>

初始化要显示的view：

int[] pageViewIds = { R.drawable.img_firstpage_first,
R.drawable.img_firstpage_second, R.drawable.img_firstpage_third };

List<View> pageViews = new ArrayList<View>();

LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);

for (int i = 0; i < pageViewIds.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(mParams);
imageView.setImageResource(pageViewIds[i]);
imageView.setScaleType(ScaleType.FIT_XY);
pageViews.add(imageView);
}

初始化适配器：

GuidePageAdapter vpAdapter =new GuidePageAdapter(pageViews);

vpGuide.setAdapter(vpAdapter);

二.处理底部小圆点（提示器）

1.初始化提示器（选中时使用绿色图片替换，默认为灰色图片）

indicaterLayout = (LinearLayout) findViewById(R.id.ll_indicater_layout_activity_firstpage);
this.totelCount = pageViews.size();
// 初始化指示器
for (int index = 0; index < this.totelCount; index++) {
final View indicater = new ImageView(this);
LinearLayout.LayoutParams params = mParams;
params.rightMargin = 10;
indicater.setLayoutParams(params);
this.indicaterLayout.addView(indicater, index);
}

2.当页面滑动时，发送消息切换提示器

if (msg.what == MESSAGE_REFRESHINDICATEVIEW) {
for (int index = 0; index < totelCount; index++) {
final ImageView imageView = (ImageView) indicaterLayout
.getChildAt(index);
if (currentIndex == index) {
imageView
.setBackgroundResource(R.drawable.view_imageindicator_image_indicator_focus);
} else {
imageView
.setBackgroundResource(R.drawable.view_imageindicator_image_indicator);
}
}
}