ViewPager实现APP的引导页面（小圆点联动）

ViewPager是v4扩展包中提供的一个控件，是一个ViewGroup，可以包含多个View，当时手指在屏幕上左右滑动时，可以切换页面。

一般常用的APP引导页面通常会用到ViewPager技术。

这里我的滑动页面就是三张图片，另外还需要两张小圆点的图片来进行联动。

在res/drawable下新建如下xml文件，通过小圆点的状态改变显示页面的切换：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon02" android:state_enabled="true"/>
    <item android:drawable="@drawable/icon01" android:state_enabled="false"/>
</selector>

 布局文件：

注意这里是RelativeLayout,目的是要小圆点悬浮在页面的上方

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.shen.viewpagerdemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
    <LinearLayout
        android:id="@+id/llContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginBottom="50dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/dots"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/dots"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/dots"/>
    </LinearLayout>
</RelativeLayout>

MainActivity代码：

public class MainActivity extends AppCompatActivity {
    private ViewPager viewPager;
    private LinearLayout llContainer;
    private MyPagerAdapter adapter;
    private List<ImageView> listPics;
    //三张图片资源
    private int[] pics = {R.mipmap.test1,R.mipmap.test2,R.mipmap.test3};
    private ImageView [] dots;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewPager);
	//获得小圆点所在的容器
        llContainer = (LinearLayout) findViewById(R.id.llContainer);
        dots = new ImageView[pics.length];
        listPics = new ArrayList<>();
	//设置图片
        for(int i=0;i<pics.length;i++){
            ImageView ivPic = new ImageView(this);
            ivPic.setImageResource(pics[i]);
            ivPic.setScaleType(ImageView.ScaleType.FIT_XY);
            listPics.add(ivPic);
        }
	//初始化小圆点
        for(int i =0;i<dots.length;i++){
            dots[i] = (ImageView) llContainer.getChildAt(i);
            dots[i].setEnabled(true);
            dots[i].setTag(i);
	    //给每个小圆点配置单击事件的监听
            dots[i].setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
		   //是ViewPager跟着小圆点联动
                    viewPager.setCurrentItem(Integer.parseInt(view.getTag().toString()));
                }
            });
        }
        dots[0].setEnabled(false);
        adapter = new MyPagerAdapter(listPics);
        viewPager.setAdapter(adapter);
	//监听ViewPager的滑动事件
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
		//让小圆点跟着ViewPager联动
               for(int i=0;i<dots.length;i++){
                    dots[i].setEnabled(true);
               }
                dots[position].setEnabled(false);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }
}

还要有ViewPager的适配器：

public class MyPagerAdapter extends PagerAdapter {
    private List<ImageView> listPics;

    public MyPagerAdapter(List<ImageView> listPics) {
        this.listPics = listPics;
    }

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

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

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

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

    }
}

这样就可以用ViewPager来实现APP引导页面的功能啦~