您所在的位置: > 主页 > 江苏网视 > 科技 > 正文
玩转斗鱼直播APP——实现无限轮播!来源: 日期:2021-01-15 04:39:21  阅读:-

    实现无限轮播

    生活杂谈

    • 最近很多童鞋私信我,Swift项目有些语法跟不上。希望我出OC版的(OC版我会在后续推出),但是以我的考虑来说,Swift在语言排行版上面其实已经超过OC,另外国内现在新项目一般都会用Swift开发了。所有其实不能总是对于Swift是一种拒绝的态度,待在舒适区是会被淘汰的噢

    • 但是对于刚从OC转Swift的人来说,确实Swift语法和OC差异太大,又没有比较好的教程。后续我会看看能不能出一个OC快速转向Swift的教程,不需要的童鞋可以先研究我们的项目,需要的童鞋可以抓紧时间学习一下

    实现效果

    • 轮播效果

      玩转斗鱼直播APP——实现无限轮播

    思路分析

    • 实现无限轮播常用的方案有三个:

      • 第三方框架:(不推荐,该功能并不难,而且三方框架中会有很多冗余代码)

      • UIScrollView:上面放三个View,自己实现三个View的循环利用

      • UICollectionView:利用系统会对UICollectionViewCell的循环利用机制实现

    • 方案选择:

      • 方案三:简单好用,循环利用的问题交给系统自己处理即可

    界面搭建

    • 自定义一个UIView

      • 由于该View上面内容比较固定,因此可以直接通过Xib进行描述

      • 添加UICollectionView,占据整个View,右下角添加UIPageControl

        玩转斗鱼直播APP——实现无限轮播

      • 设置UICollectionView的布局,设置数据源以及实现数据源方法(见代码)

      • 切记:设置自定义View的autoresizingMask = .None,否则控件将不能显示

      • 部分代码解释

        玩转斗鱼直播APP——实现无限轮播

    玩转斗鱼直播APP——实现无限轮播
    玩转斗鱼直播APP——实现无限轮播

    • 将自定义View添加到UICollectionView中

      • 懒加载RecommendCycleView对象

      • 将cycleView添加到UICollectionView中

      • 设置UICollectionView的内边距

      • 代码如下:

    • 懒加载RecommendCycleView

    玩转斗鱼直播APP——实现无限轮播

    • 添加到collectionView中

    玩转斗鱼直播APP——实现无限轮播

    请求数据&展示数据

    请求数据

    • 接口描述

      • 接口名称:顶部轮播数据

      • 接口地址:http://www.douyutv.com/api/v1/slide/6

      • 请求参数:

    参数名称参数说明
    version当前版本号:2.300
    • 在RecommendViewMode中发送网络请求

      • 根据接口发送请求

      • 定义CycleModel模型

      • 将请求到的数据转成模型对象

    • 模型定义

    玩转斗鱼直播APP——实现无限轮播

    • 数据请求

    玩转斗鱼直播APP——实现无限轮播

    展示数据

    • 将数据传递给RecommendCycleView对象

      • 刷新UICollectionView

      • 设置UIPageControl的个数

    • 自定义Cell,用于展示数据

      • 通过xib直接描述Cell

        玩转斗鱼直播APP——实现无限轮播

    • 根据模型展示数据

      • 代码如下:

    玩转斗鱼直播APP——实现无限轮播

    实现无限轮播功能

    • 在返回Cell个数地方,返回无限个数

      • 例如:(cycleModels?.count ?? 0) * 10000

      • 原因:无论用户怎么滚动,滚动几天可能才能滚完

      • 另外:因为Cell有循环利用,是不会常见那么多Cell的。不会造成内存很大

    玩转斗鱼直播APP——实现无限轮播

    • 随着用户的滚动,改变pageControl的显示

      • 监听UICollectionView的滚动即可

    玩转斗鱼直播APP——实现无限轮播

    • 让用户向前滚动也可以

      • 默认滚动到60处,那么用户向前滚动也有内容

      • 注意:不需要太多,因为用户习惯来讲是很少向前滚动的

        玩转斗鱼直播APP——实现无限轮播

    • 自动滚动功能

      • 添加定时器

      • 每隔3秒钟自动滚动到下一个

    玩转斗鱼直播APP——实现无限轮播

    • 监听用户拖拽

      • 用户拖拽过程中,定时器不更新

      • 监听用户拖拽&结束拖拽即可

    玩转斗鱼直播APP——实现无限轮播更多实用的干货,请登录520it.com,小码哥社区。

    (正文已结束)

    免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!