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引导页面的功能啦~