Android应用程序引导页

一般的Android程序首次进入时都会有一个引导页面，本文简单的实现了一下这个功能。主要是用ViewPager配合GridView实现。ViewPager用来装载引导图片，GridView用来显示底部的指示图标。附件里是一些资源图片。
先看一下效果图:
 
具体代码如下，包括一个主Activity和两个适配器：

主Activity

public class GuideActivityActivity extends Activity implements OnPageChangeListener {
    
	private List<View> views;
	private ViewPager viewPager;
	private GridView gridView;
	private GuidePagerAdapter pagerAdapter;
	private GuideGridAdapter gridAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);
        initData();
        initView();
    }

	private void initData() {
		int images[] = {R.drawable.guide_first, R.drawable.guide_second, R.drawable.guide_third};
		views = new ArrayList<View>();
		for (int i = 0; i < images.length; i++) {
			ImageView imageView = new ImageView(this);
			imageView.setImageResource(images[i]);
			imageView.setScaleType(ScaleType.FIT_XY);
			views.add(imageView);
		}
	}

	private void initView() {
		viewPager = (ViewPager) findViewById(R.id.guide_viewpager);
        gridView = (GridView) findViewById(R.id.guide_gridview);
       
        pagerAdapter = new GuidePagerAdapter();
        pagerAdapter.setViews(views);
        viewPager.setAdapter(pagerAdapter);
        viewPager.setCurrentItem(0);
		viewPager.setOnPageChangeListener(this);
		
		gridAdapter = new GuideGridAdapter(this);
		gridAdapter.setCountSize(views.size());
		gridView.setColumnWidth(12);
		gridView.setNumColumns(views.size());
		gridView.setAdapter(gridAdapter);
		gridAdapter.setSelectPoint(0);
		gridAdapter.notifyDataSetChanged();
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {}

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

	@Override
	public void onPageSelected(int position) {
		gridAdapter.setSelectPoint(position);
		gridAdapter.notifyDataSetChanged();
	}
	
	@Override
	protected void onPause() {
		super.onPause();
		if (null != views) {
			views.clear();
		} 
	}
	
	@Override
	protected void onDestroy() {
		super.onDestroy();
		if(null != viewPager){
			viewPager.removeAllViews();
			viewPager.destroyDrawingCache();
		}
	}
}

GridView和ViewPager的适配器

public class GuideGridAdapter extends BaseAdapter {
	
	private int size;
	private int index = 0;
	private Context context;

	public GuideGridAdapter(Context context) {
		this.context = context;
	}

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

	@Override
	public Object getItem(int position) {
		return null;
	}
	
	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(final int position, View convertView, ViewGroup parent) {
		ViewHolder viewHolder = null;
		if (convertView == null) {
			ImageView imageView = new ImageView(context);
			convertView = imageView;
			viewHolder = new ViewHolder();
			viewHolder.dotView = imageView;
			convertView.setTag(viewHolder);
		} else {
			viewHolder = (ViewHolder) convertView.getTag();
		}

		if (index == position) {
			viewHolder.dotView.setImageResource(R.drawable.point_select);
		} else {
			viewHolder.dotView.setImageResource(R.drawable.point_noselect);
		}
		
		return convertView;
	}

	static class ViewHolder {
		ImageView dotView = null;
	}

	/**
	 * 设置选中页 高亮显示
	 * @param indexPoint 当前选中页索引
	 */
	public void setSelectPoint(int indexPoint) {
		this.index = indexPoint;
	}

	/**
	 * 设置页码总数
	 * @param countSize 页码总数
	 */
	public void setCountSize(int countSize) {
		this.size = countSize;
	}
}

public class GuidePagerAdapter extends PagerAdapter {
	
	private List<View> views;
	
	public void setViews(List<View> views) {
		this.views = views;
	}
	
	@Override
	public int getCount() {
		return views.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == (arg1);
	}
	
	@Override
	public void destroyItem(View arg0, int arg1, Object arg2){
		((ViewPager) arg0).removeView(views.get(arg1));
	}
	
	@Override
	public Object instantiateItem(View arg0, int arg1) {
		((ViewPager) arg0).addView(views.get(arg1), 0);
		return views.get(arg1);
	}

}

布局文件guide.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
	<GridView 
		android:id="@+id/guide_gridview"
		android:layout_width="70.0dip" 
		android:layout_height="25dip"
		android:focusable="false" 
		android:focusableInTouchMode="false"
		android:background="#00000000"
    	android:cacheColorHint="#00000000"
    	android:layout_alignParentBottom="true"
    	android:layout_marginBottom="10.0dip"
    	android:layout_marginTop="10.0dip"
    	android:layout_centerHorizontal="true">
    </GridView>
    <android.support.v4.view.ViewPager
    	android:id="@+id/guide_viewpager"
    	android:layout_width="fill_parent"
    	android:layout_height="fill_parent"
    	android:layout_above="@id/guide_gridview"/>
</RelativeLayout>