Swift 使用CollectionView 实现图片轮播封装

前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器;

首先新建一个继承于UIView的视图,且用collectionView实现所以需要签订两个协议代码如下:

let sectionNum: Int = 100 // 区的数量
let width = UIScreen.@H_484_21@mainScreen().bounds.size.width  // 屏幕宽度
let height = UIScreen.@H_484_21@mainScreen().bounds.size.width // 屏幕高度 
// 因为要实现轮播图片可以点击定义一个协议
// 协议
protocol XTCycleViewDelegate {
    func didSELEcTindexCollectionViewCell(index: int)->Void
}

class XTCycleScrollView: UIView,UICollectionViewDelegate,UICollectionViewDatasource{

使用到的变量以及创建视图

var delegate: XTCycleViewDelegate?
    var cycleCollectionView: UICollectionView?
    var images = NSMutableArray()
    var pageControl = UIPageControl()
    var flowlayout = UICollectionViewFlowLayout()
    var timer = NSTimer()
    override init(frame: CGRect) {
        super.init(frame: framE)
        self.createSubviews(framE)
    }

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

布局必要的UI以及创建定时器

func createSubviews(frame: CGRect){
        cycleCollectionView = UICollectionView.init(frame: CGRectMake(0,0,frame.size.width,frame.size.height),collectionViewLayout: flowlayout)
        flowlayout.itemSize = CGSizeMake(frame.size.width,frame.size.height);
        flowlayout.minimumInteritemSpacing = 0;
        flowlayout.minimumLinespacing = 0;
        flowlayout.scrollDirection = UICollectionViewScrollDirection.Horizontal;
        cycleCollectionView!.BACkgroundColor = UIColor.lightGrayColor()
        cycleCollectionView!.pagingEnabled = true
        cycleCollectionView!.datasource  = self
        cycleCollectionView!.delegate = self
        cycleCollectionView!.showsHorizontalScrollInDicator = false
        cycleCollectionView!.showsVerticalScrollInDicator = false
        cycleCollectionView!.registerClass(ZJCustomcatycleCell.self,forCellWithReusEIDentifier: "cellId")
        self.addSubview(cycleCollectionView!)
        pageControl = UIPageControl.init(frame: CGRectMake(0,frame.size.width / 2,30))
        pageControl.center = CGPointMake(frame.size.width / 2,frame.size.height - 20);
        self.addSubview(pageControl);
        self.addTimer()
    }

定时器初始化

func addTimer(){
        let timer1 = NSTimer.init(timeInterval: 2,target: self,SELEctor: "nextPageView",userInfo: nil,repeats: true)
        NSRunLoop.currentRunLoop().addTimer(timer1,for@H_484_21@mode: NSRunLoopCommonModes)
        timer = timer1
    }

销毁定时器

func removeTimer(){
        self.timer.invalidate()
    }

实现循环滚动

func returnIndexPath()->NSIndexPath{
        var currenTindexPath = cycleCollectionView!.indexPathsForVisibleItems().last
        currenTindexPath = NSIndexPath.init(forRow: (currenTindexPath?.row)!,inSection: sectionNum / 2)
        cycleCollectionView!.scrollToItemATindexPath(currenTindexPath!,atScrollPosition: UICollectionViewScrollPosition.Left,animated: falsE)
        return currenTindexPath!;
    }
 func nextPageView(){

        let indexPath = self.returnIndexPath()
        var item = indexPath.row + 1;
        var section = indexPath.section;
        if item == images.count {
            item = 0
            section++
        }
        self.pageControl.currentPage = item;
        let nexTindexPath = NSIndexPath.init(forRow: item,inSection: section)
        cycleCollectionView!.scrollToItemATindexPath(nexTindexPath,animated: truE)
    }

collectionView Delegate

// 重用池
     func collectionView(collectionView: UICollectionView,cellForItemATindexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        // 这里使用的自定义cell,下面会贴出自定义cell代码
        let cell = collectionView.dequeueReusableCellWithReusEIDentifier("cellId",forIndexPath: indexPath) as! ZJCustomcatycleCell
        // 这个Label实现显示数字,表示是第几张图片
        cell.labeltitle.text = NSString(format: "%d",indexPath.row) as String
        // 这里是图片赋值
        let url:string = self.images[indexPath.row] as! String
        // 这里我使用的是一个赋值图片的三方库,看自己喜好,为方便我没有自己写
        cell.imageView.hnk_setImageFromURL(NSURl.init(String: url)!)
        return cell
    }
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return sectionNum
    }
    func collectionView(collectionView: UICollectionView,numberOfItemsInSection section: int) -> Int {
        // 在这里给出了pageControl的数量
        pageControl.numberOfPages = images.count
        return images.count
    }

// 重新添加定时器
    func scrollViewDidEndDragging(scrollView: UIScrollView,willDecelerate decelerate: Bool) {
        self.addTimer()
    }
    // 手动滑动的时候销毁定时器
    func scrollViewWillBeginDragging(scrollView: UIScrollView) {
        self.removeTimer()
    }

设置当前的pagecontrol

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let page = (Int(scrollView.contentOffset.x) / Int(width)) % images.count
        pageControl.currentPage = page
    }

点击方法

func collectionView(collectionView: UICollectionView,didSELEctItemATindexPath indexPath: NSIndexPath) {
        self.delegate?.didSELEcTindexCollectionViewCell(indexPath.row)
    }

下面是我在自定义cell中的代码

var urlImage: String = ""
    var imageView = UIImageView()
    var labeltitle = UILabel()
    override init(frame: CGRect) {
        super.init(frame: framE)
        self.createSubviews(framE)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    func createSubviews(frame: CGRect){
        imageView = UIImageView.init(frame: CGRectMake(0,frame.size.height))
        self.contentView.addSubview(imageView)
        labeltitle = UILabel.init(frame: CGRectMake(10,10,30,30))
        imageView.addSubview(labeltitlE)
    }

封装基本完成了,下面看看如何使用

// 创建
        let cycle = XTCycleScrollView.init(frame: CGRectMake(0,70,width,175))
        // 要实现点击需要制定代理人
        cycle.delegate = self;
        // 图片链接数组
        let images: NSMutableArray = ["","",""]
        // 数组赋值
        cycle.images = images
        self.view.addSubview(cyclE)

实现代理方法

func didSELEcTindexCollectionViewCell(index: int) {
        print("\(indeX)")
    }

总结: 这样就实现了简单的图片轮播效果,并且带有点击方法,都看到这里就点个赞吧. 哈哈