一個(gè)簡單的圖片輪播,用了<strong>UIScrollView</strong>和<strong>UIPageControl</strong>的巧妙搭配. 能夠?qū)崿F(xiàn)圖片的輪播,用定時(shí)器<strong>(Timer)</strong>控制.當(dāng)按住圖片的不動(dòng)的時(shí)候,計(jì)時(shí)器停止,當(dāng)松開圖片的時(shí)候計(jì)時(shí)器又開始.
主要實(shí)現(xiàn)思路是：根據(jù)圖片總數(shù)及寬高設(shè)置好ScrollView的大小泽裳，每切換一張圖片相當(dāng)于在ScrollView上進(jìn)行一個(gè)圖片寬度的移動(dòng)行為，并加入定時(shí)器，實(shí)現(xiàn)自動(dòng)輪播山橄。
1.實(shí)現(xiàn)UIScrollView
設(shè)置好UIScrollView番官，ScrollView的contentSize根據(jù)圖片數(shù)量確定,注意pagingEnabled這個(gè)屬性为障，確保整頁移動(dòng).加載圖片并將準(zhǔn)備好的圖片在ScrollView里設(shè)置好位置肴捉，即將這些圖片一張緊挨著一張排列在ScrollView中鬓长。通過ScrollView的代理方法核蘸，在ScrollView滾動(dòng)結(jié)束的時(shí)候根據(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)
//是否整頁翻動(dòng)
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()
}
//滑動(dòng)會(huì)執(zhí)行的方法
func scrollViewDidScroll(_ scrollView: UIScrollView) {
//獲取到偏移量 根據(jù)偏移量定位到第幾個(gè)點(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.實(shí)現(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.實(shí)現(xiàn)Timer
定時(shí)器設(shè)置祟峦，這里設(shè)置為每隔1秒滾動(dòng)更新一次，實(shí)際上就是每隔1秒更新一次頁碼徙鱼，根據(jù)頁碼的變化宅楞，讓ScrollView跟著移動(dòng)，每次移動(dòng)一張圖片的距離.這里還需要注意的是袱吆，由于加入定時(shí)器有自動(dòng)輪播的效果了厌衙，會(huì)與手動(dòng)拖拽ScrollView沖突，即手動(dòng)拖拽ScrollView過程時(shí)ScrollView可能自動(dòng)移動(dòng)更新圖片了绞绒，顯然這種效果是不符合用戶習(xí)慣的婶希，這時(shí)需要在ScrollView的代理事件中進(jìn)行處理，即開始拖拽ScrollView時(shí)停止定時(shí)器蓬衡，拖拽結(jié)束后再開啟定時(shí)器喻杈。
//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)行滑動(dòng)
scrollerview.setContentOffset(CGPoint(x : offset.x + width,y : offset.y), animated: true)
//if 到 第四個(gè) ,跳動(dòng)到第一個(gè)
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">
