zoukankan      html  css  js  c++  java
  • Swift-ScrollView轮播图的简易封装和使用

    不多说,轮播图是开发中必要一项技能,直接上代码:

    先说我的思路:首次继承于UIScrollView类自定义MyScrollView,在MyScrollView里自定制方法,func creatMyScrollView(imageName:[String],height:CGFloat)在里面完成动态布局,通过传入的两个参数imageName,height来制作轮播图的图片和高度,设置contentSize属性和pagingEnabled属性,上代码:

    首先继承于UIScrollView自定义MyScrollView类

    class ZYF_MyScrollView: UIScrollView {}
    
    

    自定义方法

    scrollView的轮播就是利用其偏移量来进行设置,如果实现n张图片自动轮播,创建计时器是必须的,在scrollView中创建n+1张图片,容量也是n+1张图片的容量。让第1张和最后一张是同一张图片,在偏移量达到n*width的时候,让偏移量置零,这样,在即将显示最后一张图的时候,scrollView的展示图片瞬间变成第一张,然后继续往后播。这样形成了我们常见的轮播效果

    class ZYF_MyScrollView: UIScrollView {
    	func creatMyScrollView(imageName:[String],height:CGFloat) {
    		//动态布局
    		 for i in 0...(imageName.count - 1) {
                let imageView = UIImageView(frame: CGRectMake(CGFloat(i) * width,0,width,height))
                self.addSubview(imageView)
                
              	//设置轮播图图片
                imageView.image = UIImage(named: imageName[i])
            }
    	//设置轮播图容量
    	self.contentSize = CGSizeMake(CGFloat(imageName.count ) * width, height)
    	//设置吸附属性
        self.bounces = false
        //设置书页效果
        self.pagingEnabled = true
        
        //单独创建第n+1张轮播图,和第一张图片是同一张图
        let imageView = UIImageView(frame:CGRectMake(CGFloat(imageName.count) * width, 0, width, height))
        imageView.image = UIImage(named:imageName[0])
        self.addSubview(imageView)
    		
    	}
    }
    
    

    这样就算是简单的封装了一下,使用方法如下:

    在你要放置的轮播图的.swift文件中生成 ZYF_MyScrollView的对象

    let scr = ZYF_MyScrollView()

    创建图片名称数组

    let iamgeNames = ["App公测","简书出版","简书官方专题","简书月刊","简书出版","简书官方专题"]

    调用creatUI方法,传入图片名称数组,设置高度

    func creatScrollView() {
         let view = UIView(frame: CGRectMake(0,0,UIScreen.mainScreen.bounds.size.width,280))
    	scr.creatUI(imageNames,height:200)
    	view.addSubView(scr)
    }
    
    

    到此,一个能够拖动的轮播图就制作结束了,实现自动轮播,下面我们需要借助计时器NSTimer

    创建NSTimer

     //创建轮播图定时器
        func creatTimer() {
        let  timer =  NSTimer.scheduledTimerWithTimeInterval(3, target: self, selector: #selector(self.timerManager), userInfo: nil, repeats: true)
        
        //这句话实现多线程,如果你的ScrollView是作为TableView的headerView的话,在拖动tableView的时候让轮播图仍然能轮播就需要用到这句话
        NSRunLoop.currentRunLoop().addTimer(timer, forMode: NSRunLoopCommonModes)
    
        }
    
        //创建定时器管理者
        func timerManager() {
        	//设置偏移量scr.setContentOffset(CGPointMake(scr.contentOffset.x + width, 0), animated: true)
        	//当偏移量达到最后一张的时候,让偏移量置零
            if scr.contentOffset.x == CGFloat(width) * CGFloat(imageNames.count) {
                scr.contentOffset = CGPointMake(0, 0)
            }
    
        }
    

    到此,自动轮播图制作完毕,在使用中还缺少了一个组件,就是小白点UIPageControl,回到func creatScrollView(){}中

    func creatScrollView() {
    	let view =  let view = UIView(frame: CGRectMake(0,0,UIScreen.mainScreen.bounds.size.width,280))
    	scr.creatUI(imageNames,height:200)`
    	view.addSubView(scr)
    	let page = UIPageControl()
    	page.frame = CGRectMake(width / 2 - 50,160,100,30)
        page.numberOfPages = imageNames.count
        //将小白点放到scr之上
        view.insertSubview(page, aboveSubview: scr)
    }
    

    遵守UIScrollViewDelegate协议,设置小白点的跟随轮动

      //当手动滚动视图翻页时调用该方法
        var cnt = 0
        func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
            let cPage = scr.contentOffset.x / width
            page.currentPage = Int(cPage)
            cnt = Int(cPage)
        }
    
        //自动播放时,调用该方法
        func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
            cnt += 1
            page.currentPage = cnt % imageNames.count
        }
    
    

    到此,全部工程就完成了

    效果如下

    轮播图效果.gif

  • 相关阅读:
    第一节,Django+Xadmin打造上线标准的在线教育平台—创建用户app,在models.py文件生成3张表,用户表、验证码表、轮播图表
    Tensorflow 错误:Unknown command line flag 'f'
    Python 多线程总结
    Git 强制拉取覆盖本地所有文件
    Hive常用函数 傻瓜学习笔记 附完整示例
    Linux 删除指定大小(范围)的文件
    Python 操作 HBase —— Trift Trift2 Happybase 安装使用
    梯度消失 梯度爆炸 梯度偏置 梯度饱和 梯度死亡 文献收藏
    Embedding 文献收藏
    深度学习在CTR预估中的应用 文献收藏
  • 原文地址:https://www.cnblogs.com/zhyunfe/p/6064146.html
Copyright © 2011-2022 走看看