登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

查看: 324|回复: 6

[代码分享] Swift学习笔记之无限轮播图的三种实现方式

[复制链接]

1

主题

1

帖子

46

金钱

初级码农

Rank: 1

发表于 2017-8-1 17:33:51 | 显示全部楼层 |阅读模式

Swift学习笔记之无限轮播图的三种实现方式

先上效果

效果图

实现思路:

第一种: 在原图片集合的基础上, 分别在原数据的开始及结尾处插入一张图片, 内容分别是原图片集合的最后一张和第一张, 新图片集合.count = 原图片集合.count + 2; 当滑动到第一张或者最后一张图片时, "偷偷地"将当前偏移位置切换到对应图片的位置(展示第一张图片或者最后一张图片的ImageView所在位置), 详见下图:

方式一

核心代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let index = scrollView.contentOffset.x / self.bounds.width
        let currentIndex = (index - 1.0).truncatingRemainder(dividingBy: CGFloat(imageBox.imageArray.count - 2)) + 0.5
        pageControl?.currentPage = Int(currentIndex) == (imageBox.imageArray.count - 2) ? 0 : Int(currentIndex)
        
        if index >= CGFloat(imageBox.imageArray.count - 1) {
            scrollView.contentOffset = CGPoint(x: self.bounds.width, y: 0)
        } else if index <= 0 {
            scrollView.contentOffset = CGPoint(x: CGFloat(imageBox.imageArray.count - 2) * self.bounds.width, y: 0)
        } else if index <= 0.5 { // 此处只是为了在第一张向前滚动到展示最后一张时, pageControl可以及时变化
            pageControl?.currentPage = imageBox.imageArray.count - 2
        }
    }

第二种: 只需要左, 中, 右三个UIImageView, 默认只展示中间位置的UIImageView, 然后动态调整UIImageView上应该放置的image; 例如: 刚开始时, 左中右分别放置的是图片数组中最后一张,第0张,第1张图片, 此时用户看到是第0张图片, 当用户向右滑动时, 此时展示应该是第1张图片,当滑动结束时, "偷偷地"将scrollView的偏移量调整为中间UIImageView位置, 同时调整对应imageView上展示的图片, 此时左中右分别对应的应该是 第0, 1, 2张图片; 详见下图:

方式二

核心代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let index = scrollView.contentOffset.x / self.bounds.width
        if index >= 2 || index <= 0 {
            
            self.currentIndex = index >= 2 ? (self.currentIndex + 1) : (self.currentIndex - 1)
            
            setImage()
            
            scrollView.contentOffset = CGPoint(x: self.bounds.width, y: 0)
            
        }
        
        pageControl?.currentPage = self.currentIndex
    }

第三种: 最简单, 最不费脑的实现方式了, 简单粗暴的将图片数组成倍的扩充, 没明白是吗? 举个简单例子: 新图片集合.count = 原图片集合.count 150(一张图片的情况除外); 然后开始时默认展示的是偏移量为(新图片集合.count / 2) 图片宽度的位置(也是原图片集合的第一张图片), 由于这种方法可能需要占用较多的内存, 所以建议使用UICOllectionView, 基于其cell的重用机制, 可以降低内存占用.

核心代码:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        
        let offsetIndex = scrollView.contentOffset.x / self.bounds.width

        let currentIndex = Int(offsetIndex.truncatingRemainder(dividingBy: CGFloat(self.imageBox!.imageArray.count)) + 0.5)
        
        if Int(offsetIndex) >= actualItemCount {
            
            scrollView.contentOffset = CGPoint(x: self.bounds.width * CGFloat(actualItemCount) / 2, y: 0)
        }
        
        pageControl?.currentPage = currentIndex == imageBox.imageArray.count ? 0 : currentIndex
                
    }

3

主题

4195

帖子

330

金钱

攻城狮

Rank: 3Rank: 3

发表于 2017-8-1 17:33:53 | 显示全部楼层
感谢分享,楼主V5~

0

主题

4180

帖子

-429

金钱

限制会员

发表于 2017-8-1 17:34:06 | 显示全部楼层
支持,感谢,祝code4app越来越好~

18

主题

4203

帖子

1647

金钱

iOS大神

Rank: 6Rank: 6

发表于 2017-8-1 17:34:10 | 显示全部楼层
感谢分享,code4app有你更精彩

11

主题

4185

帖子

1026

金钱

iOS大神

Rank: 6Rank: 6

发表于 2017-8-1 17:34:35 | 显示全部楼层
感谢大神分享,必须顶!

23

主题

4211

帖子

1133

金钱

iOS大神

Rank: 6Rank: 6

分享大神

发表于 2017-8-1 17:36:01 | 显示全部楼层
不错不错,楼主辛苦了。。。

18

主题

4189

帖子

1809

金钱

iOS大神

Rank: 6Rank: 6

发表于 2017-8-1 17:36:36 | 显示全部楼层
写的真的很不错
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表