一個簡單的圖片輪播,用了<strong>UIScrollView</strong>和<strong>UIPageControl</strong>的巧妙搭配. 能夠?qū)崿F(xiàn)圖片的輪播,用定時器<strong>(Timer)</strong>控制.當(dāng)按住圖片的不動的時候,計時器停止,當(dāng)松開圖片的時候計時器又開始.
主要實現(xiàn)思路是:根據(jù)圖片總數(shù)及寬高設(shè)置好ScrollView的大小,每切換一張圖片相當(dāng)于在ScrollView上進(jìn)行一個圖片寬度的移動行為,并加入定時器,實現(xiàn)自動輪播。
1.實現(xiàn)UIScrollView
設(shè)置好UIScrollView,ScrollView的contentSize根據(jù)圖片數(shù)量確定,注意pagingEnabled這個屬性,確保整頁移動.加載圖片并將準(zhǔn)備好的圖片在ScrollView里設(shè)置好位置,即將這些圖片一張緊挨著一張排列在ScrollView中。通過ScrollView的代理方法,在ScrollView滾動結(jié)束的時候根據(jù)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
//設(shè)置代理
scr.delegate = self
imageView.image = image
scr.addSubview(imageView)
}
//開始拖拽
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.timer.invalidate()
self.timer = nil
}
//結(jié)束拖拽
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
self.timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
//一秒之后執(zhí)行
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()
}
//滑動會執(zhí)行的方法
func scrollViewDidScroll(_ scrollView: UIScrollView) {
//獲取到偏移量 根據(jù)偏移量定位到第幾個點(diǎn)
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.實現(xiàn)UIPageControl
設(shè)置好UIPageControl,同樣pageControl也是根據(jù)圖片數(shù)量來確定,每一頁代表一張圖片。
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.實現(xiàn)Timer
定時器設(shè)置,這里設(shè)置為每隔1秒滾動更新一次,實際上就是每隔1秒更新一次頁碼,根據(jù)頁碼的變化,讓ScrollView跟著移動,每次移動一張圖片的距離.這里還需要注意的是,由于加入定時器有自動輪播的效果了,會與手動拖拽ScrollView沖突,即手動拖拽ScrollView過程時ScrollView可能自動移動更新圖片了,顯然這種效果是不符合用戶習(xí)慣的,這時需要在ScrollView的代理事件中進(jìn)行處理,即開始拖拽ScrollView時停止定時器,拖拽結(jié)束后再開啟定時器。
//timer
self.timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(timerAction), userInfo: nil, repeats: true)
self.timer.fire()
func timerAction(){
//獲取當(dāng)前的offset
//offset.x + width
let offset = self.scrollerview.contentOffset
let width = self.view.frame.size.width
//讓scrollview進(jìn)行滑動
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">