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

  • 相关阅读:
    Spring(八)-spring5框架新功能
    Spring(七)-事务操作
    Spring(五)-AOP
    Linux errno错误码
    思考:如何保证服务稳定性?
    CPU性能分析工具原理
    Oracle数据库url格式
    java对象的四种引用:强引用、软引用、弱引用和虚引用
    给老板汇报技术规划的要点
    后端程序员必备:分布式事务基础篇
  • 原文地址:https://www.cnblogs.com/zhyunfe/p/6064146.html
Copyright © 2011-2022 走看看