Swift 使用CollectionView 实现图片轮播封装就是这样简单

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

自制图片

先上Demo:Github上封装好的下载即用, 好用请Star Thanks
首先新建一个继承于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, 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, atScrollPosition: UICollectionViewScrollPosition.Left, 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, 0, frame.size.width, 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)")
    }

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

文/夏天然后(简书作者)
原文链接:http://www.jianshu.com/p/f5fa66699a96
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-10-13 15:58:18

Swift 使用CollectionView 实现图片轮播封装就是这样简单的相关文章

Android 图片轮播(最简单的)

布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <FrameLayout android:layout_width="match_parent" an

UISCrollView —— 图片轮播器实现(三)——(第二讲)

1. 所用知识点 1> UIScrollView的基本属性,和UIPageControl设置,还有就是要用到NSTimer来定时实现UIScrollView的图片轮播 2> NSTimer简单介绍: 2.1  NSTimer叫做“定时器”,它的作用如下 * 在指定的时间执行指定的任务 * 每隔一段时间执行指定的任务 2.2  NSTimer简单使用: 1> 调用下面的方法就会开启一个定时任务 + (NSTimer *)scheduledTimerWithTimeInterval:(NST

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

UISCrollView —— 图片轮播器封装实现(三)——(第三讲)

1.分析 利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可 2. 程序结构 3. 代码具体实现 1>  xib文件 2>  创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib 1>    (如图,设置xib与类关联) 2>  XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速

基于ionic框架封装一个图片轮播指令的几点

在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslidebanner',['$state',function(s){ return{ templateUrl:'directives/slide-banner/slide-banner.html', scope:{ banimg:'=',//数据的来源 }, link:function(s,el,atr)

iOS开发项目实战——Swift实现图片轮播与浏览

最近开始开发一个新的iOS应用,自己决定使用Swift,进行了几天之后,发现了一个很严峻的问题,那就是不管是书籍,还是网络资源,关于Swift的实在是太少了,随便一搜全都是OC实现某某某功能.就算是找到Swift的资源,一看,大概是半年前的代码,或是一年前的代码,一运行,全都报错.这是由于毕竟Swift还是在不断发展完善当中,随着Swift2.0的开源以来,包括发布Swift这一年多以来,Swift的改动还是很大的,很多的接口或是语法前后有较大差异.有些功能只能自己硬生生看官方文档或挤破脑子想,

原生JavaScript实现的图片轮播左右滑动效果函数封装

原生js实现的图片轮播左右滑动效果函数封装 方便以后需要的时候拿出来复用. 适合新手学习使用. 使用方法轮播图的html结构就不多说了.不过有一点:为了实现无缝无限轮播,需要在三张图片的最前面和最后面再额外添加两张图片(见下),原理简单说就是当图片滑动到最后一张时立马跳到第二张,眼睛看上去就像前后无缝一样. 把img_slider.js引入html,然后编辑window.onload = (function () { ··· });中的内容. (获取图片床,按钮,标识等元素.然后调用slideI

Swift基础 - - StoryBoard间切换与UIScrollView控件实现图片轮播

界面切换 在项目中可以把耦合度比较高的界面放在通过一个StoryBoard中,可以按照功能使用多个StoryBoard搭建界面,这样便于项目维护以及多人开发,对于多个StoryBoard间切换,可以使用以下代码: @IBAction func ChangeOne(sender: UIButton) { var oneStoryBoard:UIStoryboard = UIStoryboard(name: "One", bundle: NSBundle.mainBundle()) let

Swift版本的图片轮播器框架

由于在开发中,总是要写图片轮播器之类的东东,写的烦了,忍不住就用Swift写了一个非常方便的图片轮播器的框架https://github.com/SarielTang/CycleView 大家在使用的时候,只需要像这样: import CycleView class className : PictureCycleController{ //override loadView function //重写loadViewe方法 override func loadView() { super.lo