当前位置: 首页 > 工具软件 > Page Scroller > 使用案例 >

RollViewPager的使用

许正平
2023-12-01

RollViewPager的使用

RollViewPager是一个实现图片轮播的安卓开源库。对它的使用只需5步。

1.添加依赖

implementation ‘com.jude:rollviewpager:1.4.6’

2.在xml布局文件中添加view

 	    <!--hint(indicator)圆点位置:app:rollviewpager_hint_gravity="left"-->
        <!--圆点距离本空间的左边:app:rollviewpager_hint_paddingLeft="70dp"(或者paddingbottom)-->
        <!--圆点所在的容器(本控件的下部分)的透明度:app:rollviewpager_hint_alpha="255"-->
        <!--圆点所在的容器(本控件的下部分)的颜色(必须先设置透明度):app:rollviewpager_hint_color="#a000ff00"-->
        <com.jude.rollviewpager.RollPagerView
            android:id="@+id/roll_view_pager"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            app:rollviewpager_hint_color="#aa00ff00"
            app:rollviewpager_play_delay="2500" />

3.在activity中添加适配器内部类

(如果该适配器需要在不同的activity中用到,可以在模块根目录下新建一个adapter目录存放本类,class的权限修饰符改为public)

    private class RollPagerAdapter extends StaticPagerAdapter {
        private int[] datas_list = {
                R.drawable.img1,
                R.drawable.img2,
                R.drawable.img3,
                R.drawable.img4,
        };

        @Override
        public View getView(ViewGroup container, int position) {
        //  当然也可以通过LayoutInflator加载xml布局文件,再返回该view,该view是轮播内容的view(不包括圆点区域)
            ImageView view = new ImageView(container.getContext());
            view.setImageResource(datas_list[position]);
            view.setScaleType(ImageView.ScaleType.CENTER_CROP);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            return view;
        }

        @Override
        public int getCount() {
            return datas_list.length;
        }
    }

4.在activity的onCreate()中使用

        RollPagerView mRollViewPager = findViewById(R.id.roll_view_pager);
//		设置轮播间隔
//        mRollViewPager.setPlayDelay(1000);
//		设置轮播动画时间
        mRollViewPager.setAnimationDurtion(1500);
        mRollViewPager.setAdapter(new RollPagerAdapter());

//        设置圆点颜色
        mRollViewPager.setHintView(new ColorPointHintView(this, ResourcesCompat.getColor(getResources(), R.color.yellow, null), Color.WHITE));
//      图片取代圆点
//        mRollViewPager.setHintView(new IconHintView(this,R.drawable.point_focus,R.drawable.point_normal));
//        文字取代圆点,如2/3就是播放到第二张图
//        mRollViewPager.setHintView(new TextHintView(this));
//        取消圆点区域
//        mRollViewPager.setHintView(null);
//        暂停轮播
//        mRollViewPager.pause();
//        是否正在轮播,返回boolean
//        mRollViewPager.isPlaying();
//        重新开始轮播
//        mRollViewPager.resume();

5.在drawable目录下放置你要轮播的图片

R.drawable.img1
R.drawable.img2
R.drawable.img3
R.drawable.img4

功能增强

功能增强1.实现无限轮播,不会突兀地从最后一张回到第一张

(1)首先创建另外一个适配器类LoopRollPagerAdapter 来取代上面的RollPagerAdapter,代码在下面
(2)将
mRollViewPager.setAdapter(new RollPagerAdapter());
改为
mRollViewPager.setAdapter(new LoopRollPagerAdapter(mRollViewPager));

 private class LoopRollPagerAdapter extends LoopPagerAdapter {
        private int[] datas_list = {
                R.drawable.img1,
                R.drawable.img2,
                R.drawable.img3,
                R.drawable.img4,
        };

        public LoopRollPagerAdapter(RollPagerView viewPager) {
            super(viewPager);
        }

        @Override
        public View getView(ViewGroup container, int position) {
            ImageView view = new ImageView(container.getContext());
            view.setImageResource(datas_list[position]);
            view.setScaleType(ImageView.ScaleType.FIT_XY);
            view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
            return view;
        }

        @Override
        public int getRealCount() {
            return datas_list.length;
        }
  }

功能增强2.实现点击轮播图事件处理

在activity的onCreate中添加以下代码

 mRollViewPager.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(int position) {
                Toast.makeText(getApplicationContext(),"你点击了位置为"+position+"的轮播图",Toast.LENGTH_SHORT).show();
            }
        });

最后,说一下viewpager中的MVC
MVC:
M:Model 数据
V:View 视图
C:Controller 控制者
其中Controller起着中间人的作用,负责将model数据加载到view视图中


在本例中,RollViewPager是View,RollPagerAdapter 是Controller,而Model数据则来源于Adapter中的datas_list。ViewPager(RollViewPager是一种特殊的ViewPager)是通过
mRollViewPager.setAdapter(new RollPagerAdapter());
这行代码与Adapter关联起来的。这行代码指定了由那个Adapter向ViewPager提供数据。关联之后,当ViewPager需要数据时,就会回调其关联的Adapter对象中的getView方法得到View对象数据。所以,Adapter对象要向其负责的ViewPager提供数据,那么就必须持有数据。数据的来源可以在Adapter对象初始化时的构造函数中将数据从外部环境例如Activity中赋值给它,例如在本例中,将datas_list移到activity中作为成员变量,再通过
mRollViewPager.setAdapter(new RollPagerAdapter(datas_list));
传递给Adapter对象。(当然,在编写RollPagerAdapter类时需要提供对应的构造器。)这样做的好处是将Model数据和Controller(本例中的Adapter适配器)解耦。如果不同的activity想调用该RollPagerAdapter的功能,但又想轮播不同的图片数据,可以在不同的activity中提供不同的datas_list,再通过构造器传递给需要构造的RollPagerAdapter对象。这时解耦的概念就发挥了作用。

github源码地址:
https://github.com/Jude95/RollViewPager

 类似资料: