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

Swift 使用CollectionView 实现图片轮播封装,第1张

概述前言: 这篇你可以学会自定义视图,创建collectionView,协议的使用,定时器; 首先新建一个继承于UIView的视图, 且用collectionView实现所以需要签订两个协议代码如下: let sectionNum: Int = 100 // 区的数量let width = UIScreen.mainScreen().bounds.size.width // 屏幕宽度let he

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

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

let sectionNum: Int = 100 // 区的数量let wIDth = UIScreen.mainScreen().bounds.size.wIDth  // 屏幕宽度let height = UIScreen.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(ZJCustomCycleCell.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,forMode: 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! ZJCustomCycleCell        // 这个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)")    }

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

总结

以上是内存溢出为你收集整理的Swift 使用CollectionView 实现图片轮播封装全部内容,希望文章能够帮你解决Swift 使用CollectionView 实现图片轮播封装所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1076914.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-26
下一篇 2022-05-26

发表评论

登录后才能评论

评论列表(0条)

保存