Skip to content

关于封装ViewPager2的FragmentStateAdapter的封装,以最简单的方式实现抖音列表的上下加载,画廊效果,以及ViewPager2的各种封装

License

Notifications You must be signed in to change notification settings

lihangleo2/ViewPager2Demo

Repository files navigation

万能ViewPager2适配器--SmartViewPager2Adapter

特点功能

完全脱离xml,所有效果只需要通过api调用。掘金地址,什么收藏量比star量高!!

具体功能:
    1. 两句代码实现抖音列表效果
    2. 无感且丝滑,动态从头部或者底部加载数据
    3. 设置上下加载监听,再达到预加载limit的时候触发监听
    4. 实现数据源接口,和Fragment接口,你会体验到什么是丝滑
    5. 画廊的实现,不再需要在xml设置clipChildren属性,调用即可实现。
    6. 极限脱离xml控制,以简化使用者使用
    7. 支持无线循环模式
    8. 支持自动滚动模式;设置滚动时长,设置循环间隔时长
    9. 循环滚动可绑定页面lifeCycle生命周期

  

SmartViewPager2Adapter动态

Demo

为录制流畅,截图分辨率比较模糊。可在下方扫描二维码下载apk


效果展示

为录制流畅,截图分辨率模糊。可下载apk查看真机效果

几句代码实现抖音列表 向上或向下加载数据 设置加载监听
Sample Sample Sample

asGallery一句代码搞定 3d画廊
Sample Sample

无限循环 自动滚动
Sample Sample

指示器的使用 指示器自动更新 边缘滑动监听
Sample Sample Sample

极速实现app的tab切换 重写点击事件,判断是否可切换页面
Sample Sample

添加依赖

  • 项目build.gradle添加如下
    allprojects {
         repositories {
             maven { url 'https://jitpack.io' }
         }
     }
  • app build.gradle添加如下
    dependencies {
            implementation 'com.github.lihangleo2:SmartViewPager2Adapter:3.1.3'
    }

一、基本使用

使用此库,你只需在xml加上简单的viewPager2即可,其他只需调用方法即可

1.1、两句代码实现抖音效果:步骤一:初始化adapter

    
    private val mAdapter by lazy {
        //SourceBean是你使用的数据泛型
        SmartViewPager2Adapter.Builder<SourceBean>(this)
            .addFragment(1, ImageFragment::class.java)
            .addFragment(2, TextFragment::class.java)
            .build(mBinding.viewPager2)
            //可以在这里初始化数据
            .addData(list)
    }

1.2、步骤二:设置给viewpager2(做完这下就搞定了,你没看错)

mBinding.viewPager2.adapter = mAdapter

1.3、步骤三:数据源对象bean要实现接口:SmartFragmentTypeExEntity

public class SourceBean extends SmartFragmentTypeExEntity {
    int type;

    @Override
    public int getFragmentType() {
        return type;
    }
}

数据源bean实现此接口后,例如:通过方法.addFragment(1, ImageFragment::class.java)(也就是说type==1时生成ImageFragment,这些逻辑adapter帮你操作了)


1.4、步骤四:目标fragment要实现接口:SmartFragmentImpl

public class ImageFragment extends Fragment implements SmartFragmentImpl<SourceBean> {
    //....伪代码
    @Override
    public void initSmartFragmentData(SourceBean bean) {
        this.mSourceBean = bean
    }
}

要使用SmartViewPager2Adapter,你的目标fragment必须要实现SmartFragmentImpl接口,adapter会将数据回传给fragment


二、数据加载及监听

2.1、数据类api

  • 向下无感加载数据

    mAdapter.addData(list)
  • 向上无感加载数据

    mAdapter.addFrontData(list)
  • 移除数据

    mAdapter.removeData(index: Int)
  • 根据position获取对象

    //getLastItem() 获取last item
    //getItemOrNull() 不存在position会返回null
    var item = mAdapter.getItem(index: Int)
  • 获取数据源list

    var list = mAdapter.getData()

2.2、监听类api

使用加载监听可以搭配此设置。不设置则默认是3

//设置滑动到preLoadLimit触发预加载监听
.setPreLoadLimit(3)
  • 设置头部加载监听(不设置则不触发)

              mAdapter.setOnRefreshListener(object : OnRefreshListener {
                  override fun onRefresh(smartAdapter: SmartViewPager2Adapter<*>) {
                      //滑动到preLoadLimit后触发头部加载监听
    
                  }
              })
  • 设置底部加载监听(不设置则不触发)

              mAdapter.setOnLoadMoreListener(object :OnLoadMoreListener{
                  override fun onLoadMore(smartAdapter: SmartViewPager2Adapter<*>) {
                      //滑动到preLoadLimit后触发底部加载监听
    
                  }
              })
  • 同时设置头部和底部监听(不设置则不触发)

              mAdapter.setOnRefreshLoadMoreListener(object : OnRefreshLoadMoreListener {
                  override fun onRefresh(smartAdapter: SmartViewPager2Adapter<*>) {
                      
                  }
    
                  override fun onLoadMore(smartAdapter: SmartViewPager2Adapter<*>) {
                      
                  }
    
              })
  • 设置ViewPager2边缘滑动监听(不设置则不触发)

          mAdapter.setOnSideListener(object :onSideListener{
              override fun onLeftSide() {
                  ToastUtils.showShort("触发左边缘事件")
              }
    
              override fun onRightSide() {
                  ToastUtils.showShort("触发右边缘事件")
              }
    
          })

2.3 数据加载其他方法

  • 头部已经不能翻页时,调用。将不再触发头部监听。

    mAdapter.finishRefreshWithNoMoreData()
  • 底部已经不能翻页时,调用。将不再触发底部监听。

    mAdapter.finishLoadMoreWithNoMoreData()
  • 结束头部刷新状态,继续触发监听

    //1.注意调用mAdapter.addData(list)和mAdapter.addFrontData(list)也会触发此效果,无须主动调用
    //2.此方法针对调用加载接口时,接口异常等无数据情况下需要主动调用
    mAdapter.finishRefresh()
  • 结束底部刷新状态,继续触发监听

    //同上
    mAdapter.finishLoadMore()

三、画廊效果

画廊只需要加上如下代码,无需在xml里写clipChildren="false"这些代码,解放xml

    private val mAdapter by lazy {
        SmartViewPager2Adapter.Builder<SourceBean>(this)
            //实现画廊功能,参数为左右间距
            .asGallery(ConvertUtils.dp2px(50f),ConvertUtils.dp2px(50f))
            //设置滑动效果
            .setPagerTransformer(SmartTransformer.TRANSFORMER_ALPHA_SCALE)
            .addFragment(1,ImageFragment::class.java)
            .addFragment(2,TextFragment::class.java)
            .build(mBinding.viewPager2)
            .addData(list)
    }

四、无线循环和自动滚动

    private val mAdapter by lazy {
        SmartViewPager2Adapter.Builder<SourceBean>(this)
            //实现无线循环模式
            .setInfinite(true)
            //实现自动滚动
            .setAutoLoop(true)
            //自动滚动下绑定页面生命周期:即离开页面暂停滚动,回到页面恢复滚动
            .addLifecycleObserver()
            //滚动间隔时间
            .setLoopTime(3000L)
            //切换轮播滚动速度
            .setScrollTime(600L)
            .addFragment(1, ImageFragment::class.java)
            .addFragment(2, TextFragment::class.java)
            .build(mBinding.viewPager2)
            .addData(list)
    }

五、指示器的使用

指示器的使用也是非常的简单,如下:(demo里的IndicatorActivity有具体用法)。

5.1、api使用指示器

特别注意,使用withIndicator(SmartIndicator.CIRCLE) api,必须是viewPage2的父控件是ConstraintLayout布局,否则建议使用xml里的方式,不受父控件约束

    private val mAdapter by lazy {
        SmartViewPager2Adapter.Builder<SourceBean>(this)
            //圆形指示器:SmartIndicator.CIRCLE   线性指示器:SmartIndicator.LINE 
            .withIndicator(SmartIndicator.CIRCLE)

            //以上会默认在居中靠下的位置,设置位置你可以使用以下api
            //.withIndicator(SmartIndicator.CIRCLE,SmartGravity.LEFT_BOTTOM, ConvertUtils.dp2px(20f),ConvertUtils.dp2px(20f)) 
            .addFragment(1, ImageFragment::class.java)
            .addFragment(2, TextFragment::class.java)
            .build(mBinding.viewPager2)
            .addData(list)
    }

5.2 布局xml里使用指示器:

你还可以将指示器放在xml里,这样可以更强自定义指示器样式,及把指示器放置你布局里想放置的任何位置,不受父控件影响 xml里如下:

    <com.smart.adapter.indicator.CircleIndicator
        android:id="@+id/circle_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        app:layout_constraintBottom_toBottomOf="@+id/viewPager2"
        app:layout_constraintRight_toRightOf="parent"
        app:lh_indicator_mode="fill"
        app:lh_indicator_radius="10dp"
        app:lh_indicator_scrollWithViewPager2="true"
        app:lh_indicator_selectColor="#FF0101"
        app:lh_indicator_space="10dp"
        app:lh_indicator_strokeWidth="1.5dp"
        app:lh_indicator_unselectColor="#FFEB3B" />

代码如下:

    private val mAdapter by lazy {
        SmartViewPager2Adapter.Builder<SourceBean>(this)
            //关键代码,xml里的指示器
            .withIndicator(mBinding.circleIndicator)
            .addFragment(1, ImageFragment::class.java)
            .addFragment(2, TextFragment::class.java)
            .build(mBinding.viewPager2)
            .addData(list)
    }

六、刷新问题和视频的用法问题

本库开源以后,有很多说刷新问题和视频的问题,这个这里详细讲解一下

6.1 刷新问题:

我们首先是通过.addData()去设置数据源的,然后到了我们的fragment里。以下代码,在fragment里你可以拿到mSourceBean,注意这里的内存地址和数据源list里的内存地址指向一个地方的。记住这一点就好办了。

public class ImageFragment extends Fragment implements SmartFragmentImpl2<SourceBean> {
    private SourceBean mSourceBean;
    //....伪代码
    @Override
    public void initSmartFragmentData(SourceBean bean) {
        this.mSourceBean = bean
    }

    //....伪代码
    private void initView(){
        //一般封装的baseFragement都通过一个方法去初始化页面
        //当然你也可以叫initData()这里随便。拿到mSourceBean去初始化页面
    }
}

需求来了:假设你有一个点赞按钮,点击了,从未点赞状态变成了红色点赞状态如下:

btn.setOnClickListener{
    //第一步:(因为你在fragment里),你要去改变按钮ui的样式
    //第二步:【重点】你要去修改数据源里的点赞字段假设:mSourceBean.isClick = 1
    //执行了第二步以后,你的数据源的isClick字段改变了。因为内存地址一样,数据源list里的数据也改变了。
    //所以,当你随便滑动你的viewPager2,即使超过offscreenPageLimit,
    //页面被销毁了,然后重建,因为数据源在这,样式也会恢复之前的状态。
    //其实就和RecycleView里的Adapter里的用法是一样的
}

以上是对此库页面刷新的用法。其实很简单

6.2、视频在fragment里的用法:

视频用法也是极其简单,我这里放我baseFragment里的封装,我相信大部分开发者都会有一个base,如下:

public abstract BaseFragment{
    //....伪代码
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        //初始化子布局
        initView()
    }

    override fun onResume() {
        super.onResume()
        if (!isLoaded && !isHidden) {
            lazyInit()
            isLoaded = true
        }

        if (!isHidden) {
            onVisible()
        }
    }

    override fun onPause() {
        super.onPause()
        onInVisible()
    }
}

这里有3个方法

  • initView() 在这里你可以初始化你的视频数据,甚至preLoad(因为缓存问题会加载很多个fragment,只要你不播放视频即可)
  • onVisible() 页面可见时,播放视频
  • onInVisible() 页面不可见时,暂停播放。假设你滑回这个页面你想从第一帧开始播放,你可以将视频seekTo到第0秒的时间。可以根据你的需求来。

希望我表达清楚了。看懂了也是非常好用!感谢,让我们共同维护这个库,让你在使用ViewPager2的时候,是如此简单


方法详解

    private val mAdapter by lazy {
        SmartViewPager2Adapter.Builder<SourceBean>(this) //SourceBean 泛型bean
            //构造参数(3.0后部分api不可动态改变,规范及正确使用)
            .overScrollNever() //取消viewPager2滑动边缘阴影
            .canScroll(false) //viewPager2不可手势滑动
            .setOffscreenPageLimit(5) //设置viewPager2缓存
            .setPreLoadLimit(3) //滑动到preLoadLimit触发预加载监听
            .addFragment(1, ImageFragment::class.java) //添加要生成的fragment
            .addFragment(2, TextFragment::class.java)
            .addDefaultFragment(TextFragment::class.java) //找不到对应type的数据时生成的默认fragment
            .asGallery(50,50) //实现画廊
            .setPagerTransformer(SmartTransformer.TRANSFORMER_ALPHA_SCALE) //设置滑动效果
            .withIndicator(SmartIndicator.CIRCLE) // 添加指示器
            .setVertical(true) //viewPager2是否竖直方向
            .setInfinite(true) //实现无线循环模式
            .setAutoLoop(true) //实现自动滚动
            .addLifecycleObserver() //自动滚动下绑定页面生命周期:即离开页面暂停滚动,回到页面恢复滚动
            .setLoopTime(3000L) //滚动间隔时间
            .setScrollTime(600L) //切换轮播滚动速度
            .build(mBinding.viewPager2) //绑定viewPager2

            //方法
            .addData(list) //添加数据
            .addFrontData(list) //添加头部数据
            .removeData(index) //移除数据
            .addLifecycleObserver() //自动滚动下绑定页面生命周期:即离开页面暂停滚动,回到页面恢复滚动
            .removeLifecycleObserver() //移除页面监听
            //结束头部刷新状态,继续触发监听(addData,addFrontData默认调用此方法),此方法针对数据加载失败时需要主动调用
            .finishRefresh() 
            .finishLoadMore() //同上
            .finishRefreshWithNoMoreData() //头部已经不能翻页时,调用。将不再触发头部监听。
            .finishLoadMoreWithNoMoreData() //底部已经不能翻页时,调用。将不再触发底部监听。
            .canScroll(false) //viewPager2不可手势滑动
            .overScrollNever() //取消viewPager2边缘阴影
            .setPagerTransformer(SmartTransformer.TRANSFORMER_ALPHA_SCALE)//设置滑动效果
            .setLoopTime(3000L) //设置滚动间隔时间
            .setScrollTime(600L) //设置轮播切换速度


            //监听
            .setOnRefreshLoadMoreListener(object :OnRefreshLoadMoreListener{ //加载监听
                override fun onRefresh(smartAdapter: SmartViewPager2Adapter<*>) {
                    //滑动到preLoadLimit后触发头部加载监听
                }

                override fun onLoadMore(smartAdapter: SmartViewPager2Adapter<*>) {
                    //滑动到preLoadLimit后触发底部加载监听
                }

            })
            .setOnSideListener(object : onSideListener { //左右边界滑动监听
                override fun onLeftSide() {
                    //触发左边缘事件

                }
                override fun onRightSide() {
                    //触发右边缘事件
                }

            })
    }

七、无数据源的使用

作者在使用时发现,长长会出现,无数据源的情况,比如我们大部分app的首页,我的这些页面切换功能,故增添了此api

7.1、几行代码快速实现切换

注意这里是没数据源的,此刻的fragment是不需实现上面的接口
步骤一:

    private val mAdapter by lazy {
        SmartViewPager2Adapter.NoDataBuilder(this)
            //如果你不需要按钮联动,也可不用这个
            .bindViews(mBinding.tabHome, mBinding.tabFile, mBinding.tabManager, mBinding.tabMine)
            .build(mBinding.viewPager2)
            //也支持List<Fragment>
            .addData(ImageFragment(),TextFragment(),NoDataFragment(),TestApiFragment())
    }

步骤二:设置给viewpager2(做完这下就搞定了,你没看错)

mBinding.viewPager2.adapter = mAdapter

7.2、点击事件处理

如果你点击按钮1需要实现额外逻辑,只需重写以下监听.setOnClickListener(callback)

    private val mAdapter by lazy {
        SmartViewPager2Adapter.NoDataBuilder(this)
            //如果你不需要按钮连动,也可不用这个
            .bindViews(mBinding.tabHome, mBinding.tabFile, mBinding.tabManager, mBinding.tabMine)
            .build(mBinding.viewPager2)
            //也支持List<Fragment>,里面是你new出来的fragment实例
            .setFragmentList(HomeFragment(),FileFragment(),ManagerFragment(),MineFragment())
            .setOnClickListener(object :SmartNoDataAdapter.OnClickListener{
                override fun onClick(v: View): Boolean {
                    when(v.id){
                        R.id.tab_mine->{
                            //假如有些app可先不登录,但是点击"我的"tab按钮,判断没有登录去登录并返回false,
                            //那么adapter就不会去切换tab
                            if (!isLogin){
                                //跳转登录页
                                //伪代码...
                                //返回false不会选中tab
                                return false
                            }
                            //登录后的操作...
                        }
                    }
                    return true
                }
            })
    }

7.3、获取Fragment实例

    private fun getRealFragment() {
        //泛型直接获取,【注意】:前提是setFragmentList() 时,fragment类型必须唯一,
        //如,不能有2个HomeFragment,否则会报错
        var mHomeFragment = mAdapter.getFragment<HomeFragment>()

        //也可以不使用泛型获取
        var mHomeFragment = mAdapter.getFragment(0) as HomeFragment
    }

无数据源Adapter方法详解

无数据源Adapter大部分api和有数据源的Adapter一样,除了舍去了跟数据有关的api,新增的方法如下:

    private val mAdapterOther by lazy {
        SmartViewPager2Adapter.NoDataBuilder(this)
            .overScrollNever() //去掉阴影
            .canScroll(false) //viewPager2不可手势滑动
            .smoothScroll(false) //点击tab后,viewPager2直接切换,不带滚动动画
            //与按钮联动,如果不需要可不写
            .bindViews(mBinding.tabHome, mBinding.tabFile, mBinding.tabManager, mBinding.tabMine) 
            .build(mBinding.viewPager2)
            //设置fragment实例
            .setFragmentList(HomeFragment(),FileFragment(),ManagerFragment(),MineFragment())
            //重写联动按钮点击事件,返回false,不切换tab
            .setOnClickListener(object : SmartNoDataAdapter.OnClickListener { 
                override fun onClick(v: View): Boolean {
                    return true
                }
            })
    }

赞赏

如果你喜欢 SmartViewPager2Adapter 的功能,感觉 SmartViewPager2Adapter 帮助到了你,可以点右上角 "Star" 支持一下 谢谢! ^_^ 你也还可以扫描下面的二维码~ 请作者喝一杯咖啡。或者遇到工作中比较难实现的需求请作者帮忙。

如果在捐赠留言中备注名称,将会被记录到列表中~ 如果你也是github开源作者,捐赠时可以留下github项目地址或者个人主页地址,链接将会被添加到列表中


其他作品

万能阴影布局


关于作者。

Android工作多年了,如果你在学习的路上也感觉孤独,请和我一起。让我们在学习道路上少些孤独

  • QQ群: 209010674 android交流群(点击图标,可以直接加入)

Licenses

MIT License

Copyright (c) 2023 leo

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

About

关于封装ViewPager2的FragmentStateAdapter的封装,以最简单的方式实现抖音列表的上下加载,画廊效果,以及ViewPager2的各种封装

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages