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

爱被打了一巴掌 2022-08-20 03:29 157阅读 0赞

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

![Center][]

## 一.页面布局 ##

1.xml布局文件

<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" />

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

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

3.activity中显示viewpager

ViewPager vpGuide = (ViewPager) findViewById(R.id.vp_guide_activity_firstpage);		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) {
 			}
 		});

初始化要显示的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);
 					}
 				}
 			}

[Center]: /images/20220731/936293d7e19b4294b9e535f3d1a9dca1.png