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