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
}
到此,全部工程就完成了
效果如下

Swift-ScrollView轮播图的简易封装和使用的更多相关文章
- swift 广告轮播图
import UIKit import Kingfisher class BannerView: UIView,UIScrollViewDelegate{ enum ImageType{ case I ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- 简要分析javascript的选项卡和轮播图
选项卡 思路 1.按钮和展示的页面要对应:分别遍历,记住当前按钮的索引,让其成为展示页面的索引 2.只出现所对应的页面:所有的页面隐藏,只展示想要的页面 只展示js代码 for(var i=0;i&l ...
- 初识 swift 封装轮播图
一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- swift-自定义无限轮播图
一 前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式
Android开发工程师文集-Fragment,适配器,轮播图,ScrollView,Gallery 图片浏览器,Android常用布局样式 Fragment FragmentManager frag ...
- iOS swift版本无限滚动轮播图
之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...
随机推荐
- 20165101刘天野 2018-2019-2《网络对抗技术》第1周 Kali的安装
20165101刘天野 2018-2019-2<网络对抗技术>第1周 Kali的安装 一.实验要求 Kali下载 安装 网络 共享 软件源 二.实验步骤 1.下载 从Kali官网中下载相应 ...
- 分布式链路监控与追踪系统Zipkin
1.分布式链路监控与追踪产生背景2.SpringCloud Sleuth + Zipkin3.分布式服务追踪实现原理4.搭建Zipkin服务追踪系统5.搭建Zipkin集成RabbitMQ异步传输6. ...
- SSD: Single Shot MultiBox Detector 编译方法总结
SSD是一个基于单网络的目标检测框架,它是基于caffe实现的,所以下面的教程是基于已经编译好的caffe进行编译的. caffe的编译可以参考官网 caffe Installation Instal ...
- shell script语法高亮和自动缩进的配置
编辑/etc/profile文件,在文件末尾加一下内容: export TERM=xterm-color 接着让其变为全局变量 source /etc/profile 编辑/etc/vimrc文件,在 ...
- 服务器状态监控之snmp&ipmi
一.ipmi 1.简介 IPMI(Intelligent Platform Management Interface)即智能平台管理接口是使硬件管理具备"智能化"的新一代通用接口标 ...
- PHPAdmin的安装和配置
phpadmin是用于管理mysql数据库的一个产品,,毕竟很多数据库服务器不能够公开连接,所以只能够使用http的方式来进行连接管理. 下载phpadmin( http://xj-http. ...
- scjp考试准备 - 10 - 类型转换
题目为如下代码的执行结果: class Building{} public class Barn extends Building{ public static void main(String[] ...
- antd 表单双向绑定的研究
痛点 在使用antd的表单时,大家觉得不够清爽,总结如下: 大量的模板语法,需要一定的学习成本. 需要手动地进行数据绑定,使用大量的onChange/setFieldsValue去控制数据. 无法通过 ...
- 如何进行数据库,比如ORACLE,SQL SERVER的逆向工程,将数据库导入到PowerDesigner中
Oracle的反向工程就是指将Oracle中的数据库,当然也可以是SQL Server中的数据库导入到PD中,这个需要建立一个数据库的链接,然后进行逆向工程的操作. 第一步:建立数据库的链接: Pow ...
- 网站flash效果遭360急速浏览器拦截
网站flash效果遭遇360急速浏览器拦截,经分析,本地的一个css文件叫做advertisement.css 结果被360急速浏览器给毙了.改成其他名字就ok了.