无限循环ScrollView

今天开始仿写半糖APP,首页顶部有一个无限轮播的Scroll View。
这个可以用第三方库SDCycleScrollView来实现,很方便,这里我尝试自己实现。
实现原理采用collection view,将图片*100作为collection view 的data source,然后自动翻页播放,目前可以实现自动播放,本想添加弧形蒙版,可是考虑到贝塞尔曲线一些参数不清楚,加出来的很丑,所以暂时不添加。

代码如下:

import UIKit

class CycleScrollView: UIView {
    
    private let reusableCycleCell = "CycleCell"
    //图片
    private var imageGroup:[UIImage]?
    private var imageURLStrings:[String]?
    
    private var pageIndicator:UIPageControl?
    private var bezierPath:UIBezierPath?
    private var timer:NSTimer?
    private var collectionView:UICollectionView?
    private var collectionViewFlowLayout:UICollectionViewFlowLayout?
    
    private var pageCount:Int = 1
    private var scrollInterval:Double = 3.0
    private var counter:Int = 0    

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    convenience init(frame:CGRect, imageGroup:[UIImage]) {
        self.init(frame:frame)
        self.imageGroup = imageGroup
        self.pageCount  = imageGroup.count
        setUpScrollView()
        addPageIndicator()
        setUpAutoScrollTimer()     
    }
    
    convenience init(frame:CGRect, imageURLStrings:[String]) {
        self.init(frame:frame)
        self.imageURLStrings    = imageURLStrings
        self.pageCount          = imageURLStrings.count
        self.imageGroup         = imageURLStrings.map({(urlString) -> UIImage in
            
            if let data = NSData(contentsOfURL: NSURL(string: urlString)!) {
                if let image = UIImage(data: data) {
                    return image
                } else {
                    return UIImage(named: "scrollImage_1")!
                }
            } else {
                return UIImage(named: "scrollImage_2")!
            }
        })
        
        setUpScrollView()
        addPageIndicator()
        setUpAutoScrollTimer()
        
    }
    //设置scroll view
    internal func setUpScrollView(){
        //collection view flow lay out
        collectionViewFlowLayout = UICollectionViewFlowLayout()
        collectionViewFlowLayout!.minimumInteritemSpacing = 0
        collectionViewFlowLayout!.minimumLineSpacing = 0
        collectionViewFlowLayout!.scrollDirection = UICollectionViewScrollDirection.Horizontal
        
        collectionView = UICollectionView(frame: self.frame, collectionViewLayout: collectionViewFlowLayout!)
        collectionView?.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reusableCycleCell)
        collectionView?.pagingEnabled = true
        collectionView?.showsHorizontalScrollIndicator = false
        collectionView?.showsVerticalScrollIndicator = false
        
        collectionView?.dataSource = self
        collectionView?.delegate = self

        self.addSubview(collectionView!)
        
    }
    //添加页面指示
    internal func addPageIndicator(){
        
        pageIndicator = UIPageControl()
        
        pageIndicator?.numberOfPages = pageCount
        pageIndicator?.hidesForSinglePage = true
        pageIndicator?.currentPageIndicatorTintColor = UIColor.redColor()
        pageIndicator?.pageIndicatorTintColor = UIColor.lightGrayColor()
        pageIndicator?.frame.size = (pageIndicator?.sizeForNumberOfPages(pageCount))!
        pageIndicator?.center = CGPointMake(self.centerX(),self.maxY()-8)
        self.addSubview(pageIndicator!)
    }
    //设置自动翻页
    internal func setUpAutoScrollTimer(){
        timer = NSTimer(timeInterval: scrollInterval, target: self, selector: "autoScroll", userInfo: nil, repeats: true)
        NSRunLoop.currentRunLoop().addTimer(timer!, forMode: NSRunLoopCommonModes)
    }
    internal func autoScroll(){
        
        counter++ 
         self.collectionView?.scrollToItemAtIndexPath(NSIndexPath(forItem: counter, inSection: 0), atScrollPosition: UICollectionViewScrollPosition.None, animated: true)
        
    }
    //添加蒙版图层
    internal func addMaskLayer(){ 
        bezierPath = UIBezierPath(ovalInRect: CGRectMake(0, self.maxY() - 30, self.width(), 60))
        
        let maskLayer = CAShapeLayer()
        maskLayer.path = bezierPath!.CGPath
        maskLayer.fillColor = UIColor.whiteColor().CGColor
        
        self.layer.addSublayer(maskLayer)
        
    }
    //由于auto layout,需要在super view 尺寸计算完成之后重新计算subview的尺寸
    override func layoutSubviews() {
        super.layoutSubviews()

        print("lay out subviews")
        collectionViewFlowLayout?.itemSize = self.frame.size
        collectionView?.frame = self.frame
        pageIndicator?.center = CGPointMake(self.centerX(),self.maxY()-8)

    }
    
}
//MARK:Collection View Data Source
extension CycleScrollView:UICollectionViewDataSource {
    
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }
    
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return pageCount * 100
    }
    
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reusableCycleCell, forIndexPath: indexPath)
        let imageView = UIImageView(frame: cell.contentView.frame)
        imageView.image = imageGroup![indexPath.row % pageCount]
        cell.contentView.addSubview(imageView)
        
        return cell
    }
    
}
//MARK:Scroll View Delegate,此处完成设置手动翻页与自动翻页之间的切换
extension CycleScrollView:UIScrollViewDelegate {
    //当翻页时修改page indicator
    func scrollViewDidScroll(scrollView: UIScrollView) {
        pageIndicator?.currentPage = Int(scrollView.contentOffset.x / self.width()) % pageCount
        counter = Int(scrollView.contentOffset.x / self.width())
    }
    //当手动翻页时停止记时
    func scrollViewWillBeginDragging(scrollView: UIScrollView) {
        timer?.invalidate()
    }
    //当手动翻页停止时重新开始计时
    func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        setUpAutoScrollTimer()
    }
    
}
//MARK: Collection View Delegate
extension CycleScrollView:UICollectionViewDelegate {
    
    
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,069评论 4 358
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,212评论 1 287
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,912评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,424评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,741评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,194评论 1 206
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,553评论 2 307
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,289评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,923评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,251评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,775评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,144评论 2 249
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,698评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,936评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,658评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,214评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,159评论 2 258

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,592评论 4 59
  • 到月底,小女儿弹弹满7个月。这7个月感觉很漫长,耳朵中轻易就听见她叛逆的哼叫,虽难听却无法阻止。我感觉她就是我怀中...
    北境之风阅读 116评论 0 0
  • 看得见的风,是流动的意志。看得见的冷,是沉稳的精灵。看得见的喜悦,是绽放的微笑,看得见的忧郁,是无言的思考...
    粼遴阅读 971评论 0 1
  • (开始) 《http://img.1985t.com/uploads/previews/2017/07/0-dSs...
    振和阅读 516评论 0 0