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);
					}
				}
			}