最近开始学习Swift，想将公司从OC转移到这上面来，毕竟Swift发展势头迅猛。于是想将公司原有经常用的UI及工具控件重新写一遍，有利于自己对Swift的了解！
效果图如下
demo.gif
使用代码
let imgArray = [
"http://www.netbian.com/d/file/20150519/f2897426d8747f2704f3d1e4c2e33fc2.jpg",
"http://www.netbian.com/d/file/20130502/701d50ab1c8ca5b5a7515b0098b7c3f3.jpg",
NSURL(string: "http://www.netbian.com/d/file/20110418/48d30d13ae088fd80fde8b4f6f4e73f9.jpg")!,
UIImage(named: "carouse_1")!,
UIImage(named: "carouse_2")!,
UIImage(named: "carouse_3")!
]
self.silenceCarouselView = SilenceCarouselView(
frame: CGRectMake(0, 0, UIScreen.mainScreen().bounds.size.width, 200),
imageArray: imgArray,
silenceCarouselViewTapBlock: { (carouselView, index) in
print(index)
});
结构
此轮播效果实现的结构如下：
轮播结构.png
UIView两个子View：UIScrollView、UIPageControl
UIScrollView两个子UIImageView
原理
UIScrollView的宽度：width
UIScrollView的高度：height
两个UIImageView： currentImgView、otherImgView，并且他们的宽高与UIScrollView的宽高相等
UIScrollview：
scrollview的ContentSzie.png
// 设置内容宽度为3倍的尺寸
self.scrollView?.contentSize = CGSizeMake(self.bounds.size.width * 3, self.bounds.size.height)
两个UIImageView的位置：
两个UIImageView的位置.png
// 设置显示的位置
self.scrollView?.contentOffset = CGPointMake(self.bounds.size.width, 0)
左右滑动时改变otherImgView的frame属性让其分别移至currentImgView的左或右两端,并设置图片,滑动结束后交换两张图片的内容并设置重置UIScrollview的滚动位置
/**
定义手指滑动方向枚举
- DirecNone: 没有动
- DirecLeft: 向左
- DirecRight: 向右
*/
enum CarouselViewDirec {
case DirecNone
case DirecLeft
case DirecRight
}
// 监听scrollView滚动事件
public func scrollViewDidScroll(scrollView: UIScrollView) {
// 设置手指滑动方向
self.currentDirec = scrollView.contentOffset.x > scrollView.bounds.size.width ? .DirecLeft : .DirecRight;
// 向右滑
if self.currentDirec == .DirecRight {
// 将其他图片显示到左边
self.otherImgView!.frame = CGRectMake(0, 0, scrollView.bounds.size.width, scrollView.bounds.size.height);
// 下一索引-1
self.nextIndex = self.currIndex - 1
// 当索引 < 0 时, 显示最后一张图片
if self.nextIndex < 0 {
self.nextIndex = self.imageArray!.count - 1
}
}
// 向左滑动
else if self.currentDirec == .DirecLeft {
// 将其他图片显示到右边
self.otherImgView!.frame = CGRectMake(CGRectGetMaxX(self.currentImgView!.frame), 0, scrollView.bounds.size.width, scrollView.bounds.size.height);
// 设置下一索引
self.nextIndex = (self.currIndex + 1) % self.imageArray!.count
}
// 去加载图片
self.loadImg(self.otherImgView!, index: self.nextIndex)
}
/**
设置整个轮播图片的显示逻辑
*/
private func reloadImg() -> (){
self.currentDirec = .DirecNone;//清空滚动方向
//判断最终是滚到了右边还是左边
let index = self.scrollView!.contentOffset.x / self.scrollView!.bounds.size.width;
//等于1表示最后没有滚动，返回不做任何操作
if index == 1 {return}
//当前图片索引改变
self.currIndex = self.nextIndex;
self.pageControl!.currentPage = self.currIndex
// 将当前图片的位置放到中间
self.currentImgView!.frame = CGRectMake(self.scrollView!.bounds.size.width, 0, self.scrollView!.bounds.size.width, self.scrollView!.bounds.size.height)
// 将其他图片对象的图片给当前显示的图片
self.currentImgView!.image = self.otherImgView!.image
// 设置视图滚到中间位置
self.scrollView!.contentOffset = CGPointMake(self.scrollView!.bounds.size.width, 0)
}
/**
加载图片
- parameter imgView: 需要加载图片的 UIImageView
- parameter index: 加载图片的索引
*/
private func loadImg(imgView:UIImageView,index:Int){
let imgData = self.imageArray![index]
// 如果是字符串类型，就去拼接URL
if imgData is String {
// MARK: - 此处可以换成别的网络图片加载逻辑
imgView.kf_setImageWithURL(NSURL(string: imgData as! String)!, placeholderImage: nil)
}
// 如果是NSURL类型则直接去加载
else if imgData is NSURL {
// MARK: - 此处可以换成别的网络图片加载逻辑
imgView.kf_setImageWithURL(imgData as! NSURL, placeholderImage: nil)
}
// 图片类型
else if imgData is UIImage {
imgView.image = imgData as? UIImage
}
// 其他未找到为空
else{
imgView.image = nil
}
}
至此已经实现图片无限滚动，接下来实现自动轮播
/**
初始化计时器
*/
private func initTimer() -> (){
//如果只有一张图片，则直接返回，不开启定时器
if self.imageArray!.count <= 1 {
return
}
//如果定时器已开启，先停止再重新开启
if timer != nil {
timer?.invalidate()
}
timer = NSTimer.scheduledTimerWithTimeInterval(self.time, target: self, selector: #selector(SilenceCarouselView.timerFunction), userInfo: nil, repeats: true)
// timer?.fire()
NSRunLoop.currentRunLoop().addTimer(self.timer!, forMode: NSDefaultRunLoopMode)
}
/**
定时调用的方法
*/
func timerFunction() -> (){
//动画改变scrollview的偏移量就可以实现自动滚动
self.scrollView?.setContentOffset(CGPointMake(self.scrollView!.bounds.size.width * 2, 0), animated: true)
}
//MARK: - UIScrollView代理方法
public func scrollViewWillBeginDragging(scrollView: UIScrollView) {
// 开始拖动时停止自动轮播
self.timer?.invalidate()
}
public func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
// 结束拖动时开启自动轮播
self.initTimer()
}
public func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
// 带动画的设置scrollview位置后会调用此方法
self.reloadImg() // 设置图片
}
public func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
// 结束滚动时重置方向
self.currentDirec = .DirecNone
// 设置图片
self.reloadImg()
}
以上就是大概的原理逻辑代码，如需要源码请查看Demo-github
我只想实现最简单的功能，因为这样方便日后的扩展修改，当封装的东西越多，你想改的难度和时间成本就越高，所有我就从简了！ （如果你想实现更多的功能，把代码拿走，你的代码你做主！）
1、参考资料：高效图片轮播，两个ImageView实现（来自:推酷）
2、轮播控件中用到的第三方框架：onevcat 的 Kingfisher 网路图片加载框架
