ViewPager2Demo 关于封装 ViewPager2 的 FragmentState @codeKK AndroidOpen Source Website

ViewPager2Demo

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

Tags:

特点功能

完全脱离 xml，所有效果只需要通过 api 调用

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

SmartViewPager2Adapter 动态

SmartViewPager2Adapter 更新动态及以往版本

Demo

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

效果展示

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

基础功能展示跳转基础使用文档 ------ 跳转数据加载监听文档

|几句代码实现抖音列表|向上或向下加载数据|设置加载监听| |:---:|:---:|:---:| |||
画廊功能展示跳转至此文档

|asGallery 一句代码搞定|3d 画廊| |:---:|:---:| ||
version2.0 跳转至此文档

|无线循环模式|自动滚动模式| |:---:|:---:| ||
version2.1.0 跳转至此文档

|指示器的使用|指示器自动更新|边缘滑动监听| |:---:|:---:|:---:| |||

添加依赖

项目 build.gradle 添加如下

allprojects {
     repositories {
         maven { url 'https://jitpack.io' }
     }
 }

app build.gradle 添加如下

dependencies {
         implementation 'com.github.lihangleo2:SmartViewPager2Adapter:2.1.1'
 }

基本使用

一、两句代码实现抖音效果

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

1.1、步骤一：初始化 adapter


    private val mAdapter by lazy {
        SmartViewPager2Adapter(this, mBinding.viewPager2)
            .cancleOverScrollMode()
            .setOffscreenPageLimit(5)
            .setPreLoadLimit(3)
            .addFragment(1, ImageFragment::class.java)
            .addFragment(2, TextFragment::class.java)
            //可以在这里初始化数据
            .addData(list)
    }

1.2、步骤二：设置给 viewpager2（做完这下就搞定了，你没看错）

mBinding.viewPager2.adapter = mAdapter

1.3、步骤三：list 数据源（注意点）；bean 对象要实现接口：SmartFragmentTypeExEntity

解析数据 bean 要实现 SmartFragmentTypeExEntity 接口，返回你在 adapter 里要生成的 fragment 的 type。(也就是说 type==1 时生成图片 fragment，这些逻辑 adapter 帮你操作了)

public class SourceBean implements SmartFragmentTypeExEntity {
    int type;

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

1.4、步骤四：fragment（注意点）

可以看到方法.addFragment(type, Fragment.class)，这里结合步骤三就很清楚了。
比如上面的基础使用里调用了.addFragment(1, ImageFragment::class.java)。最后加载了数据.addData(list)，这样 adapter 会自动在数据里找到对应的 tyep，然后生成你要的 fragment。

注意你的 fragment 必须实现 SmartFragmentImpl 接口，这个接口是让 adapter 把数据回传给你，以便你做页面操作。【2.1.0 后 SmartFragmentImpl 接口已舍弃，SmartFragmentImpl2 加上泛型可以避免数据类型转换】

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

二、画廊效果

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

//如果是横向就是左右，竖直的话就是上下。adapter 会自己判断
.asGallery(int leftMargin,int rightMargin)

//想要加上滑动效果只需要加上（后续会加上更多效果）
setPagerTransformer(SmartTransformer.TRANSFORMER_ALPHA_SCALE)

三、无线循环和自动滚动

3.1 无线循环

//一句代码即可加上循环模式
.setInfinite(true)

3.2 自动滚动

加上自动滚动功能
```
.isAutoLoop()
```
设置滚动间隔时间
```
.setLoopTime(3000L)
```
设置切换滚动时长（也就是 item1 滚动到 item2 所需的时长）

注意 scrollTime≤LoopTime 时，会滚动的很流畅，请谨慎设置
```
.setScrollTime(600L)
```
滚动模式下绑定当前页面的 lifeCycle，提升 app 性能
```
.addLifecycleObserver()
```

四、数据加载监听和滑动效果

这里我会把重要的方法拿出来讲，其他的会出个表格

4.1 数据加载

向下无感加载数据

.addData(List<SmartFragmentTypeExEntity> list)

向上无感加载数据

.addFrontData(List<SmartFragmentTypeExEntity> list)

加载对应 type 的 fragment.class
```
.addFragment(type, Fragment.class)
```

4.2 设置监听

设置头部加载监听（不设置则不触发）

.setOnRefreshListener(OnRefreshListener listener)

设置底部加载监听（不设置则不触发）

.setLoadMoreListener(OnLoadMoreListener listener)

同时设置头部和底部监听（不设置则不触发）

.setOnRefreshLoadMoreListener(OnRefreshLoadMoreListener listener)

4.3 结束监听

头部已经不能翻页时，调用。将不再触发头部监听。
```
.finishRefreshWithNoMoreData()
```
底部已经不能翻页时，调用。将不再触发底部监听。
```
.finishLoadMoreWithNoMoreData()
```

4.4 ViewPager2 滑动效果

SmartTransformer.TRANSFORMER_3D 3d 滑动效果
SmartTransformer.TRANSFORMER_ALPHA_SCALE 缩放透明度效果
```
.setPagerTransformer(SmartTransformer enum)
```

五、指示器的使用和边缘滑动监听

指示器的使用也是非常的简单，如下：（demo 里的 IndicatorActivity 有具体用法）。

特别注意，使用 withIndicator(SmartIndicator.CIRCLE) api，必须是 viewPage2 的父控件是 ConstraintLayout 布局，否则建议使用 xml 里的方式，不受父控件约束 ```java private val mAdapter by lazy {

  SmartViewPager2Adapter(this, mBinding.viewPager1)
      //关键代码
      .withIndicator(SmartIndicator.CIRCLE)
      .addFragment(1, ImageFragment::class.java)
      .addFragment(2, TextFragment::class.java)
      .addData(DataUtil.productDatas(0, isLoadMore = true, isGallery = true, 4))

}

<br>

### 5.1 指示器详解：
* 圆形指示器的使用
```java
.withIndicator(SmartIndicator.CIRCLE)

线性指示器的使用
```
.withIndicator(SmartIndicator.LINE)
```

以上会默认在居中靠下的位置，设置位置你可以使用以下 api

.withIndicator(SmartIndicator.CIRCLE,SmartGravity.LEFT_BOTTOM, ConvertUtils.dp2px(20f),ConvertUtils.dp2px(20f))

你还可以将指示器放在 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" />

代码如下,是不是超级简单：

//关键代码，xml 里的指示器
.withIndicator(mBinding.circleIndicator)

5.2 边缘滑动监听：

使用也非常简单，当然此监听也是支持横或者竖的 viewPager2

    private val mAdapter by lazy {
        SmartViewPager2Adapter(this, mBinding.viewPager2)
            .setOffscreenPageLimit(3)
            .addFragment(1, ImageFragment::class.java)
            .addFragment(2, TextFragment::class.java)
            .addData(DataUtil.productDatas(0, isLoadMore = true, isGallery = true, 4))
            /**
             * 设置左右边界滑动监听
             * */
            .setOnSideListener(object : onSideListener {
                override fun onLeftSide() {
                    ToastUtils.showShort("触发左边缘事件")

                }
                override fun onRightSide() {
                    ToastUtils.showShort("触发右边缘事件")
                }

            })
    }

其他方法

name	format	description
.getDataList()	List\	返回数据源
.addDefaultFragment()	SmartFragmentImpl	找不到对应 type 的默认 fragment
cancleOverScrollMode()	void	取消 viewpager2 边缘阴影
setVertical()	boolean	是否设置竖直 viewpager2，默认横向
setOffscreenPageLimit()	integer	设置预加载数量
setPreLoadLimit()	integer	设置滑动到 limit 触发预加载监听
setUserEnabled()	boolean	是否允许用户左右滑动

赞赏

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

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

捐赠列表

其他作品

万能阴影布局

关于作者。

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

QQ 群： 209010674 （点击图标，可以直接加入）

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.

Apps

Android Developer Tools

Android Developer Tools Pro