Android中ViewPager+Adapter的使用

1. 用在哪里

在Android应用开发中，可能会出现有些情况需要使用到非固定样式的页面，或者是在一个页面里实现多种内容的加载，这时候就可以考虑使用ViewPager。
例如：APP的启动时的引导页、页面内某个控件里的滑动事件等。

这里就详细介绍ViewPager+Adapter来实现引导页多张图片的切换加载及底部小圆点的滑动。

---

2. ViewPager的使用

ViewPager样式：

这里使用了四张图片作为引导页的内容，对应底部的四个小圆点。

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


    <android.support.v4.view.ViewPager
        android:id="@+id/guide"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7.5"
        android:layout_marginTop="10dp"
        >

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/llt_page_indicator"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/point1"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:padding="1.5dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/selected" />

        <ImageView
            android:id="@+id/point2"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:padding="1.5dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/unselected" />

        <ImageView
            android:id="@+id/point3"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:padding="1.5dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/unselected" />

        <ImageView
            android:id="@+id/point4"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:padding="1.5dp"
            android:layout_gravity="center_vertical"
            android:src="@drawable/unselected" />
    </LinearLayout>
</LinearLayout>

小圆点的src自行设置就行，注意：如果要用圆的把shape属性设置为oval，然后再把layout_width和layout_height设置为相同就行（注意padding*2<=layout_width）。

Activity样式：

把需要放置在ViewPager里的XML样式设置在这个里，Activity也绑定这个页面。

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

    <ImageView
        android:id="@+id/img"
        android:layout_marginTop="150dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img1"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一页文字"
        android:textSize="28sp"
        android:textColor="#0073FF"
        android:layout_marginTop="78dp"
        android:id="@+id/text"
        />
 </LinearLayout>

Adapter配置

自定义一个PagerAdapter需要继承PagerAdapter类，并重写四个方法。

public class GuideAdapter extends PagerAdapter {
        private List<View> mViews;

        public GuidePageAdapter(List<View> views) {
            mViews = views;
        }

        @Override
        public boolean isViewFromObject(@NonNull final View view, @NonNull final Object object) {
            return view == object;
        }

        @NonNull
        @Override
        public Object instantiateItem(@NonNull final ViewGroup container, final int position) {
            container.addView(mViews.get(position));
            return mViews.get(position);
        }

        @Override
        public void destroyItem(final ViewGroup container, final int position,
                                final Object object) {
            container.removeView(mViews.get(position));
        }

        @Override
        public int getCount() {
            return mViews == null ? 0 : mViews.size();
        }
    }

在MainActivity/Fragment中使用Adapter

初始化页面：

public void initView(){
	List<View> views = new ArrayList<>();
	for(int i = 0; i<4; i++){
		views.add(getView(i));
	}
	GuideAdapter guideAdapter = new GuideAdapter(views);
	
	mViewPager.setAdapter(guideAdapter);
	
	mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
	
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        switch (position) {
            case 0:
                point1.setImageResource(R.drawable.selected);
                point2.setImageResource(R.drawable.unselected);
                point3.setImageResource(R.drawable.unselected);
                point4.setImageResource(R.drawable.unselected);
                break;
            case 1:
                point1.setImageResource(R.drawable.unselected);
                point2.setImageResource(R.drawable.selected);
                point3.setImageResource(R.drawable.unselected);
                point4.setImageResource(R.drawable.unselected);
                break;
            case 2:
                point1.setImageResource(R.drawable.unselected);
                point2.setImageResource(R.drawable.unselected);
                point3.setImageResource(R.drawable.selected);
                point4.setImageResource(R.drawable.unselected);
                break;
            case 3:
                point1.setImageResource(R.drawable.unselected);
                point2.setImageResource(R.drawable.unselected);
                point3.setImageResource(R.drawable.unselected);
                point4.setImageResource(R.drawable.selected);
                break;
        }
        if (position > 3) {
            handleNext();
        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});
}

重写onPageSelected(int position)方法中，position是当前List中的view的位置。

这里的handleNext( )方法用来处理滑动到最后一页后的事项，一般是进入登录界面/主界面，写一个Intent跳转就可以做到了，这里就不贴出代码了。

---

getView( i )方法返回需要添加在List里的view：

private View getView(int i){
	View v = View.inflate(getActivity(), R.layout.main_activity, null);
	ImageView guideImg = v.findViewById(R.id.img);

	TextView text = v.findViewById(R.id.text);
	switch (i) {
	    case 0:
	        guideImg.setImageResource(R.drawable.img1);
	        break;
	    case 1:
	        guideImg.setImageResource(R.drawable.img2);
	        tv1.setText("第二页文字");
	        break;
	    case 2:
	        guideImg.setImageResource(R.drawable.img3);
	        tv1.setText("第三页文字");
	        break;
	    case 3:
	        guideImg.setImageResource(R.drawable.img4);
	        tv1.setText("第四页文字");
	        break;
	    return v;
	}

这里设置好每个页面要加载的图片或者其他内容的更新，就可以啦！

---

3. 总结

ViewPager+Adapter的使用可以灵活的实现在一个页面内加载多种内容，使用起来也并不复杂，避免了使用多个页面的反复跳转。