文档章节

Swift-collectionView实现轮播图(循环滚动)

zh_iOS
 zh_iOS
发布于 2016/12/26 15:10
字数 853
阅读 506
收藏 12

轮播图现在基本已经是app的标准配件之一了。一个实用的轮播图控件无疑能在很大程度上提高我们的开发效率。撸主自己封装了一个简易的bannerView。

使用sd加载图片,支持 horizontalvertical 两个滚动方向,可以设置 isAutoScroll 和自动滚动的duration

这里将思路和关键代码分享给大家。

循环滚动的思路如下图:

1.如果只有一张图,返回一个cell并展示这张图

2.如果有多个图,cell的个数=图片个数+2.

3.展示的时候 第一个cell 展示最后一张图 最后一个cell 展示第一张图,其他的cell按顺序展示图片。

4.collectionView的起始偏移量设置为collectionView的width (滚动到第二个cell的位置)。

5.向右滑动collectionView,当滚动到(最后一个cell完全展示出来)最后一个cell时无动画滚回第二个cell,向左滑动,当滚动到第一个cell时,无动画滚动到倒数第二个cell。

6.如果设置的是自动滚动,则添加定时器,每隔一段时间自动滚动到下一页。

 1.2.对应code:

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if (self.imgArr?.count)! > 1 {
           return (self.imgArr?.count)! + 2
        }
        return 1
    }

3.对应code:

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellID, for: indexPath) as! BannerCollectionCell
        cell.placeholder = self.placeholder
        if indexPath.row == 0 {
            cell.imgUrl = self.imgArr?.last
        } else if indexPath.row == (self.imgArr?.count)! + 1 {
            cell.imgUrl = self.imgArr?.first
        } else {
            cell.imgUrl = self.imgArr?[indexPath.row - 1]
        }
        return cell
    }

4.对应code:

    override func willMove(toSuperview newSuperview: UIView?) {
        guard newSuperview != nil else {
            return
        }
        super.willMove(toSuperview: newSuperview)
        // 如果imgArr 为 nil return
        if self.imgArr == nil {
            return
        }
        guard (self.imgArr?.count)! > 1 else {
            self.collectionView.isScrollEnabled = false
            return
        }
        scrollTo(crtPage: 0 + 1 , animated: false)
        if self.isAutoScroll == true {
            addTimer()
        }
    }

我这里将滚动到第二个cell的时机设置到了 willMove(toSuperview newSuperview: UIView?)  

5.对应code

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        var offset = CGFloat(0)
        if self.mode == .horizontal {
            offset = scrollView.contentOffset.x
        } else {
            offset = scrollView.contentOffset.y
        }
        
        let x = self.mode == .horizontal ? self.frame.size.width : self.frame.size.height
        
        if offset == 0 {
            scrollTo(crtPage: (self.imgArr?.count)!, animated: false)
            self.pageControl.currentPage = (self.imgArr?.count)! - 1
        } else if offset == CGFloat((self.imgArr?.count)! + 1) * x {
            scrollTo(crtPage: 1, animated: false)
            self.pageControl.currentPage = 0
        } else {
           self.pageControl.currentPage = lroundf(Float(offset/self.frame.size.width)) - 1
        }
    }

6.对应code:

    fileprivate func addTimer() {
        if self.timer == nil {
            self.timer = Timer.scheduledTimer(timeInterval: self.duration, target: self, selector: #selector(nextPage), userInfo: nil, repeats: true)
            RunLoop.current.add(self.timer!, forMode: RunLoopMode.commonModes)
        }
    }

    @objc fileprivate func nextPage() {
        if (self.imgArr?.count)! > 1 {
            var crtPage = 0
            if self.mode == .horizontal {
                crtPage = lroundf(Float(self.collectionView.contentOffset.x/self.frame.size.width))
            } else {
                crtPage = lroundf(Float(self.collectionView.contentOffset.y/self.frame.size.height))
            }
            scrollTo(crtPage: crtPage + 1, animated: true)
        }
    }

添加定时器后需要在scrollVIew的代理方法里实现:

开始拖拽collectionView时停止计时器,停止拖拽后重新启动定时器。

    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        // pause
        self.timer?.fireDate = Date.distantFuture
    }
    
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        // resume
        self.timer?.fireDate = Date.init(timeIntervalSinceNow: self.duration)
    }

以上就实现循环滚动的思路。

撸主这里使用的是collectionView,使用起来比较方便简洁 。还有一种方法是使用 scrollView里面添加3个子view,通过子view的循环使用来达到类似的效果,其实现思路也类似以上。

完整代码请移步github:https://github.com/zh-ios/BannerView-Swift.git

如有问题欢迎指出 。

在code 测试过程发现一个有意思现象:

        // 注意:下面这两个属性有冲突(hidesForSinglePage优先级比较高),当设置了pageControl.hidesForSinglePage = true 时,如果不止有一页那么再设置pageControl.isHidden = true 没有卵用!!!。反之,如果不设置这个属性则可以通过 isHidden 这个属性控制pageControll的显示和隐藏。

        self.pageControl.hidesForSinglePage = true

//        self.pageControl.isHidden = true

这就是所谓的“就近原则”吧。具体可以参照 https://my.oschina.net/zhxx/blog/663226 这篇控件对齐方式的博客。

© 著作权归作者所有

共有 人打赏支持
zh_iOS
粉丝 28
博文 73
码字总数 34061
作品 0
石景山
程序员
私信 提问
加载中

评论(2)

猪猪晓星
猪猪晓星
实用。正好还可以学学swift
TP_yang
TP_yang
看见了
什么样的轮播在osc算一个好轮播

使用collectionView可以很方便的创建轮播图,并且利用collectionViewCell的复用,很方便的管理,原理也很简单 a,把轮播图的元数据扩大,123123123...123123123 b,创建视图把初始位置设置为中间点...

iShown
2016/11/18
99
0
iOS怎么写一个轮播图..

使用collectionView可以很方便的创建轮播图,并且利用collectionViewCell的复用,很方便的管理,原理也很简单 a,把轮播图的元数据扩大,123123123...123123123 b,创建视图把初始位置设置为中间点...

iShown
2016/11/17
177
0
SDCycleScrollView实现自定义view的轮播(跑马灯效果)

需求是一个跑马灯的效果 已知SDCycleScrollView的轮播实现是基于Collectionview的。 如果我们想自定义实现轮播展示的内容就可以自定义一个CollectionviewCell 。让 SDCycleScrollView 的 Co...

长大以后想当小孩
2017/07/28
0
0
iOS流布局UICollectionView系列二——UICollectionView的代理方法

iOS流布局UICollectionView系列二——UICollectionView的代理方法 一、引言 在上一篇博客中,介绍了最基本的UICollectionView的使用和其中我们常用的属性和方法,也介绍了瀑布流布局的过程与...

珲少
2015/10/27
0
3
iOS ScrollView嵌套ScrolloView解决方案 - Swift

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/glt_code/article/details/78576628 iOS ScrollView嵌套ScrolloView解决方案 - Swift 本文Demo下载地址:Scr...

高刘通
2017/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring学习记录

Java类定义配置 @Configuration //标记为配置类@ComponentScan //标记为扫描当前包及子包所有标记为@Component的类@ComponentScan(basePackageClasses = {接口.class,...}) //标记为扫描当...

CHONGCHEN
14分钟前
0
0
如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
3
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
4
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
4
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部