美文网首页iOS学习包
无限循环ScrollView

无限循环ScrollView

作者: HaibaraAii | 来源:发表于2016-03-07 09:25 被阅读149次

今天开始仿写半糖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 {
    
    
}

相关文章

网友评论

    本文标题:无限循环ScrollView

    本文链接:https://www.haomeiwen.com/subject/fayakttx.html