Swift3.1-简单的轮播图

1.开发环境
  • xcode 8.3.2swift 3.1
  • pod: Kingfisher-swift版SDWebImage、SnapKit-swift版Masonry,语法更简单
2.原理
基于collectionView实现循环滚动,根据需要展示数据的个数设置较大的组数,并且默认滚动到中间组,然后实现左右滚动
利用Timer实现collectionView的自动滚动,
通过scrollView.contentOffset计算页码,
利用scrollViewWillBeginDragging和scrollViewDidEndDragging处理定时器操作
3.实现步骤

1.初始化view

 //  设置布局样式
 fileprivate lazy var layout : UICollectionViewFlowLayout = {
        var tempLayout : UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        tempLayout.minimumLineSpacing = 0;
        tempLayout.scrollDirection = .horizontal
        return tempLayout
    }()
    
    // 初始化collectionView
    fileprivate lazy var collectionView : UICollectionView = {
        var tempCollectionView : UICollectionView = UICollectionView(frame: self.frame, collectionViewLayout: self.layout)
        tempCollectionView.backgroundColor = UIColor.clear
        tempCollectionView.isPagingEnabled = true
        tempCollectionView.showsVerticalScrollIndicator = false
        tempCollectionView.showsHorizontalScrollIndicator = false
        tempCollectionView.scrollsToTop = false
        tempCollectionView.dataSource = self
        tempCollectionView.delegate = self
        tempCollectionView.register(IBannerCell.self, forCellWithReuseIdentifier: BannerCellIdentifier)
        return tempCollectionView
    }()

   lazy var bottomView : UIView = {
        var tempView = UIView()
        tempView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        return tempView
    }()

    //  初始化PageControl
    fileprivate lazy var pageControl : UIPageControl = {
        var tempControl = UIPageControl()
        tempControl.contentHorizontalAlignment = .right
        return tempControl
    }()

    //  初始化定时器
    fileprivate var timer : Timer?
    
   //  初始化数据
    fileprivate var imageDatas : Array<Any> = []
    
    //  总共有多少组item
    fileprivate var totalItemsCount : Int = 0
  • lazy:是swift懒加载关键字声明,定义lazy系统不会创建新的对象,使用lazy关键字后面只能用var,不能用let声明

懒加载其他写法:

// 声明懒加载view
private lazy var bgView = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
         //  对view进行操作
        bgView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
        bgView.layer.cornerRadius = 4
        bgView.clipsToBounds = true
        ··· ···
    }
  • fileprivate:声明属性当前文件私有,便于当前文件extension class内部访问,如果当前文件不需要使用extension class,可以定义private,则当前类私有,extension class内部将不能访问private定义的成员变量

2.代理或者闭包数据回调

// MARK: 设置回调
    //  闭包
    open var selectItem:((Array<Any>,Int)->())?
    
    // 代理
    weak open var bannerDelegate: IBannerViewDelegate?
  • //MARK : - 注释内容swift的分组注释和oc#pragma mark - 注释内容类似
  • open: open是弥补public语义上的不足,声明其他class类可以访问
  • swift的闭包和ocblock类似,格式:(参数列表) -> (返回值类型)

2.1代理声明

public protocol IBannerViewDelegate : NSObjectProtocol{

   /// 选中某一行banner
   ///
   /// - Parameters:
   ///   - datas: 选中的数据源
   ///   - indexItem: 选中的索引
   func selectBannerItem(datas : Array<Any> ,indexItem : Int) -> Void
}
  • xocde8快速注释快捷键:option + command + /

3.声明传递数据方法和加载UI

    // MARK: 填充数据,开启滚动
    open func initDatas(datas : Array<Any> ) {
        
        // 设置pageControl最大个数
        pageControl.numberOfPages = datas.isEmpty ? 0 : datas.count
        
        imageDatas = datas
    
        // 设置较大的组数,只有1个数据的时候,不左右滑动
        totalItemsCount = datas.count == 1 ? 1 : imageDatas.count * 60

          collectionView.reloadData()

        // 默认显示最中间的那组
        collectionView.scrollToItem(at: IndexPath.init(item: 0, section: totalItemsCount / 2), at: .left, animated: false)
        
        weak var weakSelf = self
        // 开启定时器,延迟0.05秒。避免runloop阻塞无法启动定时器
        DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()
            + 0.05) {
                weakSelf?.startTimer()
        }
        
        initTitleLabel(item: 0)
    }

    // 初始方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        // 配置UI
        configureUI()
    }
    
    fileprivate func configureUI() {
        self.addSubview(collectionView);
        bottomView.addSubview(pageControl)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
        collectionView.snp.makeConstraints { (make) in
          //  make.left.right.bottom.top.equalTo(0)
            make.edges.equalToSuperview()
        }

        bottomView.snp.makeConstraints { (make) in
            make.left.right.bottom.equalTo(0)
            make.height.equalTo(30)
        }
        pageControl.snp.makeConstraints { (make) in
            make.right.equalTo(-10)
            make.top.bottom.equalTo(0)
            make.width.equalTo(100)
        }
        
        layout.itemSize = CGSize(width: self.frame.size.width, height: self.frame.size.height )
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
  • isEmpty: swift空判断
  • 重写init方法必须写required init?
  • swift调用方法直接 方法名()
  • 闭包内部调用成员变量或者方法需要self.

4.处理collectionView协议

 func numberOfSections(in collectionView: UICollectionView) -> Int {
        return totalItemsCount;
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return imageDatas.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: BannerCellIdentifier, for: indexPath) as! IBannerCell
        cell.setDatas(cellData: imageDatas[indexPath.item])
        return cell
    }
    
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        
        // 代理回调
        if bannerDelegate != nil {
            bannerDelegate!.selectBannerItem(datas: imageDatas, indexItem: indexPath.item)
        }
        
        // 闭包回调
        if selectItem != nil {
            selectItem!(imageDatas,indexPath.item)
        }
    }

5.页码计算

    // 开始拖拽停止定时器
    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        removeTimer()
    }
    
    // 结束拖拽开启定时器
    func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        startTimer()
    }
    
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if imageDatas.isEmpty || imageDatas.count == 1 {
            return
        }
        
        // 拖拽计算页码
        let page = (Int)(scrollView.contentOffset.x / scrollView.bounds.size.width + 0.5) % imageDatas.count;
        self.pageControl.currentPage = page
        
        initTitleLabel(item: page)
    }
    
    override func willMove(toSuperview newSuperview: UIView?) {
        if newSuperview != nil {
            removeTimer()
        }
    }
    
    // MARK: 开启定时器
    open func startTimer() {
        
        if timer != nil{
            timer!.invalidate()
        }
        
        if self.imageDatas.count > 1 {
            timer = Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(nextPage), userInfo: nil, repeats: true)
            RunLoop.main.add(timer!, forMode: .commonModes)
        }
    }
    
    // MARK: 移除定时器
    open func removeTimer() {
        if timer != nil {
            timer!.invalidate()
            timer = nil
        }
    }
    
  // MARK: 下一页
    @objc fileprivate func nextPage() {
        
        // 马上显示回最中间那组的数据
        let currentIndexPathReset = resetIndexPath()
        // 计算出下一个需要展示的位置
        var nextItem = currentIndexPathReset.item + 1;
        var nextSection = currentIndexPathReset.section
        if nextItem == self.imageDatas.count {
            nextItem = 0
            nextSection += 1
        }
        let nextIndexPath = IndexPath.init(item: nextItem, section: nextSection)
        // 通过动画滚动到下一个位置
        self.collectionView.scrollToItem(at: nextIndexPath, at: .left, animated: true)
    }
    
    fileprivate func resetIndexPath() -> IndexPath {
        // 当前正在展示的位置
        let currentIndexPath = self.collectionView.indexPathsForVisibleItems.last
        let currentIndexPathReset = IndexPath.init(item: (currentIndexPath?.item)!, section: self.totalItemsCount / 2)
        // 马上显示回最中间那组的数据
        self.collectionView.scrollToItem(at: currentIndexPathReset, at: .left, animated: false)
        return currentIndexPathReset
    }
  • @objc : 保留OC某些特性, #selector(nextPage)就是使用OC的方式调用方法
  • 如果不想使用@obj,swift版的参考UIScreen.main.responds(to: #selector(getter: UIScreen.main.currentMode))写法

6.cell数据处理

open func setDatas(_ cellData: Any)  {
        
        if cellData is IBannerModel {
            let model = cellData as! IBannerModel
            let url = URL(string: model.url!)!
            let placeholderImg = UIImage(named: model.placeholderImage!)!
            imageView.kf.setImage(with: url, placeholder: placeholderImg, options: nil, progressBlock: nil, completionHandler: nil)
        }
    }
  • cellData is IBannerModel 等价于 (cellData as AnyObject).isKind(of: IBannerModel.self) , 这里可以理解为cellData是否是```IBannerModel``类型
  • cellData as! IBannerModel : 数据的强转,声明cellData必须是IBannerModel类型
  • Kingfisher的另一方法:imageView.kf.setImage(with: url)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,066评论 4 62
  • 【禪言茶語】 2017-08-20 「不驚擾別人的寧靜,就是慈悲」 不驚擾別人的寧靜,就是慈悲;不傷害別人的自尊,...
    北火望阅读 163评论 0 0
  • 雨,一直不停地下,草木似乎感受到了雨的热情,它们开心地被雨水清洗着,从家里的楼上看下去,树木越发绿了,大自然...
    真峥阅读 152评论 0 0
  • 我们家很富有,一直很富有,富有的只剩缺钱花。 我有一个世界上最好的爸爸,从小到大,浓浓的父爱将我浇灌。 记忆特别深...
    熊孩子CEO阅读 422评论 0 2
  • 前言 ???C/C++javanode.jsC#scala 相关文章 1. 为什么多数游戏服务端是用 C++ 来写...
    itzhangbao阅读 15,379评论 0 8