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