一个简单的图片轮播,用了<strong>UIScrollView</strong>和<strong>UIPageControl</strong>的巧妙搭配. 能够实现图片的轮播,用定时器<strong>(Timer)</strong>控制.当按住图片的不动的时候,计时器停止,当松开图片的时候计时器又开始.
主要实现思路是：根据图片总数及宽高设置好ScrollView的大小，每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为，并加入定时器，实现自动轮播。
1.实现UIScrollView
设置好UIScrollView，ScrollView的contentSize根据图片数量确定,注意pagingEnabled这个属性，确保整页移动.加载图片并将准备好的图片在ScrollView里设置好位置，即将这些图片一张紧挨着一张排列在ScrollView中。通过ScrollView的代理方法，在ScrollView滚动结束的时候根据contentOffset更新页码。
import UIKit
class ViewController: UIViewController,UIScrollViewDelegate {
var scrollerview:UIScrollView! = nil
var pagecontrol:UIPageControl! = nil
var timer:Timer! = nil
override func viewDidLoad() {
super.viewDidLoad()
//轮播图
let scr = UIScrollView(frame: CGRect(x: 0, y: 100, width: self.view.frame.size.width, height: 300))
self.view.addSubview(scr)
scr.contentSize = CGSize(width: self.view.frame.size.width*5, height: 300)
//是否整页翻动
scr.isPagingEnabled = true
//触壁反弹
scr.bounces = false
//遍历图片
for index in 1...5{
let name = "\(index).jpg"
let image = UIImage(named: name)
let x = CGFloat(index - 1) * self.view.frame.size.width
let imageView = UIImageView(frame: CGRect(x: x, y: 0, width: self.view.frame.size.width, height: 300))
scrollerview = scr
//设置代理
scr.delegate = self
imageView.image = image
scr.addSubview(imageView)
}
//开始拖拽
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.timer.invalidate()
self.timer = nil
}
//结束拖拽
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
self.timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
//一秒之后执行
let time = DispatchTime.now() + Double(Int64(1*NSEC_PER_SEC))/Double(NSEC_PER_SEC)
DispatchQueue.main.asyncAfter(deadline: time){
if let _ = self.timer{
self.timer.fire()
}
}
//self.timer.fire()
}
//滑动会执行的方法
func scrollViewDidScroll(_ scrollView: UIScrollView) {
//获取到偏移量 根据偏移量定位到第几个点
let x = scrollerview.contentOffset.x
let width1 = self.view.frame.size.width
if (x >= width1 * 4) {
self.pagecontrol.currentPage = 0
}else{
self.pagecontrol.currentPage = Int(x / width1)
}
self.pagecontrol.currentPage = Int(x / width1)
// switch x {
// case 0:
// self.pagecontrol.currentPage = 0
// case 1 * width1:
// self.pagecontrol.currentPage = 1
// case 2 * width1:
// self.pagecontrol.currentPage = 2
// case 3 * width1:
// self.pagecontrol.currentPage = 3
// default:
// print("other")
// }
}
2.实现UIPageControl
设置好UIPageControl,同样pageControl也是根据图片数量来确定，每一页代表一张图片。
let page = UIPageControl(frame: CGRect(x: 100, y: 350, width: self.view.frame.size.width - 200, height: 30))
self.pagecontrol = page
page.numberOfPages = 4
page.currentPage = 0
page.addTarget(self, action: #selector(pageAction), for: .valueChanged)
self.view.addSubview(page)
func pageAction(page:UIPageControl){
let index = page.currentPage
let point = CGPoint(x:CGFloat(index)*self.view.frame.size.width, y: 0)
//修改偏移量
self.scrollerview.setContentOffset(point, animated: true)
}
3.实现Timer
定时器设置，这里设置为每隔1秒滚动更新一次，实际上就是每隔1秒更新一次页码，根据页码的变化，让ScrollView跟着移动，每次移动一张图片的距离.这里还需要注意的是，由于加入定时器有自动轮播的效果了，会与手动拖拽ScrollView冲突，即手动拖拽ScrollView过程时ScrollView可能自动移动更新图片了，显然这种效果是不符合用户习惯的，这时需要在ScrollView的代理事件中进行处理，即开始拖拽ScrollView时停止定时器，拖拽结束后再开启定时器。
//timer
self.timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
self.timer.fire()
func timerAction(){
//获取当前的offset
//offset.x + width
let offset = self.scrollerview.contentOffset
let width = self.view.frame.size.width
//让scrollview进行滑动
scrollerview.setContentOffset(CGPoint(x : offset.x + width,y : offset.y), animated: true)
//if 到 第四个 ,跳动到第一个
if scrollerview.contentOffset.x >= width * 4 {
let point = CGPoint(x: 0, y: 0)
scrollerview.contentOffset = point
}
}
效果图展示:
<iframe height=498 width=510 src="https://v.qq.com/x/page/k0349zrc421.html">
