玩转ViewPager系列（一），从实现引导页说起

最新推荐文章于 2021-11-17 17:07:46 发布

德松欧巴

最新推荐文章于 2021-11-17 17:07:46 发布

阅读量1.3k

点赞数 1

分类专栏： android 文章标签： android 安卓 viewpager

本文链接：https://blog.csdn.net/qq_39678305/article/details/104206482

版权

android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

viewpager是android里一个非常常用的控件。之前项目用到的时候，我只是从网上找几篇文章复制粘贴就好，自己也没有好好研究，所以印象不深。这次有一些时间，决心好好研究一下，并把自己的心得分享给大家。

今天我们来一步步地实现引导页功能。首先，先准备4张图片和4个小圆点，用于轮播，把他们装到2个列表里。

        /**
         * 手动添加imageView
         */
        ImageView v1 = new ImageView(this);
        v1.setImageResource(R.drawable.img_avatar_01);
        v1.setScaleType(ImageView.ScaleType.FIT_XY);

        ImageView v2 = new ImageView(this);
        v2.setImageResource(R.drawable.img_avatar_02);
        v2.setScaleType(ImageView.ScaleType.FIT_XY);

        ImageView v3 = new ImageView(this);
        v3.setImageResource(R.drawable.img_avatar_03);
        v3.setScaleType(ImageView.ScaleType.FIT_XY);

        ImageView v4 = new ImageView(this);
        v4.setImageResource(R.drawable.img_avatar_04);
        v4.setScaleType(ImageView.ScaleType.FIT_XY);

        datas.add(v1);
        datas.add(v2);
        datas.add(v3);
        datas.add(v4);

       /**
         * 手动添加小点点
         */
        circles.add(img1);
        circles.add(img2);
        circles.add(img3);
        circles.add(img4);

接着是重点，创建一个adapter继承pageradapter

    /**
     * 适配器
     */

    private class ImagePagerAdapter extends PagerAdapter{


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

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

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {

            Log.v("aaaaa","instantiateItem:"+position);

            if (datas.get(position).getParent()==null){
                container.addView(datas.get(position));

            }

            return datas.get(position);

        }


        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

//            Log.v("aaaaa","ondestory:"+position);
//            container.removeAllViews();

        }
    }

这里面要注意3个重写的方法。第一个是public boolean isViewFromObject，用来判断返回的是不是view。

第二个是 public Object instantiateItem 用来加载页面，通过打印位置我们发现，每一次不是初始化当前的页面，而是它的下一个页面，这是pagerAdapter的预加载机制，这里不做探讨。这里我们需要做个判断，对于已经加载过的页面，不能再用 container.addView(datas.get(position))方法，否则会报错。

第三个是public void destroyItem方法，我们可以在这里移除不需要的view来减少内存的占用，也可以什么都不写，这样原来加载的页面会一直存在，翻页也显得更加流畅自然。

给viewpager绑定adapter

 ViewPager pager = findViewById(R.id.viewpager);
 pager.setAdapter(new ImagePagerAdapter());

小圆点功能的实现

实现OnPageChangeListener接口，onPageSelected(int i)会返回当前位置，根据这个位置，调整4个小圆点颜色即可

 pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {

                Log.v("aaaaa","position:"+i);
                clearstate();
                circles.get(i).setSelected(true);

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

小圆点的xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:drawable="@drawable/circle1" android:state_selected="true">

    </item>


    <item android:drawable="@drawable/circle2" android:state_selected="false">

    </item>

</selector>

相信看到这里，大家已经有所了解了，最后附上完整代码

/**
 * created by desong 2020 02 07
 */

public class GuideActivity extends AppCompatActivity {


    List<ImageView> datas = new ArrayList<>();//4张图片集合

    ImageView img1,img2,img3,img4;//4张图片

    List<ImageView>circles = new ArrayList<>();//下面的小点点集合

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);


        img1 = findViewById(R.id.img1);
        img2 = findViewById(R.id.img2);
        img3 = findViewById(R.id.img3);
        img4 = findViewById(R.id.img4);

        /**
         * 手动添加imageView
         */
        ImageView v1 = new ImageView(this);
        v1.setImageResource(R.drawable.img_avatar_01);
        v1.setScaleType(ImageView.ScaleType.FIT_XY);

        ImageView v2 = new ImageView(this);
        v2.setImageResource(R.drawable.img_avatar_02);
        v2.setScaleType(ImageView.ScaleType.FIT_XY);

        ImageView v3 = new ImageView(this);
        v3.setImageResource(R.drawable.img_avatar_03);
        v3.setScaleType(ImageView.ScaleType.FIT_XY);

        ImageView v4 = new ImageView(this);
        v4.setImageResource(R.drawable.img_avatar_04);
        v4.setScaleType(ImageView.ScaleType.FIT_XY);

        datas.add(v1);
        datas.add(v2);
        datas.add(v3);
        datas.add(v4);

        img1.setSelected(true);

        /**
         * 手动添加小点点
         */
        circles.add(img1);
        circles.add(img2);
        circles.add(img3);
        circles.add(img4);


        ViewPager pager = findViewById(R.id.viewpager);
        pager.setAdapter(new ImagePagerAdapter());

        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int i) {

                Log.v("aaaaa","position:"+i);
                clearstate();
                circles.get(i).setSelected(true);

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });


    }

    /**
     * 适配器
     */

    private class ImagePagerAdapter extends PagerAdapter{


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

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

        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {

            Log.v("aaaaa","instantiateItem:"+position);

            if (datas.get(position).getParent()==null){
                container.addView(datas.get(position));

            }

            return datas.get(position);

        }


        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {

//            Log.v("aaaaa","ondestory:"+position);
//            container.removeAllViews();

        }
    }

    /**
     * 先清除所有圆点的选中状态
     */

    private void clearstate(){

        for (ImageView img:circles){

            img.setSelected(false);

        }

    }



}