實現思路
- 依然是用到UIScrollView,不同的是這次運用重用的思想,因為不管我們有多少張圖片要輪播,在UIScrollView上我們可以同時看到的始終只有兩個UIImageView。換言之,只需要兩個UIImageView即可實現。
- 在UIScrollView上的中心位置添加一個UIImageView,UIScrollView的contentOffset也設置成看到中間的UIImageView的位置,每次滾動時判斷滾動的方向,在相應的位置展示另一個UIImageView。
- 在滾動結束時重新將UIScrollView的contentOffset設置為中心位置。
畫圖幫助理解一下:
藍色代表UIScrollView,灰色框內是我們在UIScrollView上所看見的一切。首先我們按圖中的Frame初始化控件。
當前UIImageView向左移動,將另外一個UIImageView的位置設置到當前UIImageView的右邊。
當前UIImageView向右移動,將另外一個UIImageView的位置設置到當前UIImageView的左邊。
代碼
- 先看看需要用到哪些屬性:
//自定義JHCarouseView類,繼承自UIView,遵守UIScrollViewDelegate協議
class JHCarouseView: UIView,UIScrollViewDelegate {
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(scrollView)
scrollView.addSubview(currentImageView)
scrollView.addSubview(otherImageView)
addSubview(pageControl)
startTimer()
}
private var timer:NSTimer? //定時器-定時滾動圖片
private lazy var scrollView:UIScrollView = {
let scrollView = UIScrollView.init(frame: CGRectMake(0, 0, self.bounds.width, self.bounds.height))
//可滑動寬度為自身的3倍
scrollView.contentSize = CGSizeMake(self.bounds.width*3, 0)
//可視位置為中心位置
scrollView.contentOffset = CGPointMake(self.bounds.width, 0)
scrollView.pagingEnabled = true
scrollView.showsHorizontalScrollIndicator = false
scrollView.delegate = self
return scrollView
}()
//當前可見的ImageView
private lazy var currentImageView:UIImageView = {
let currentImageView = UIImageView.init(frame: CGRectMake(self.bounds.width, 0, self.bounds.width, self.bounds.height))
currentImageView.image = self.imageArray[0]
return currentImageView
}()
//另一個ImageView的位置暫時不確定
private lazy var otherImageView = UIImageView()
//pageControl
private lazy var pageControl:UIPageControl = {
let pageControl = UIPageControl.init(frame: CGRectMake(self.bounds.width/2-30, CGRectGetMaxY(self.scrollView.frame), 60, 15))
pageControl.numberOfPages = self.imageArray.count
pageControl.pageIndicatorTintColor = UIColor.grayColor()
pageControl.currentPageIndicatorTintColor = UIColor.whiteColor()
return pageControl
}()
//輪播圖片
private let imageArray = [UIImage.init(named: "helper_1"),UIImage.init(named: "helper_2")]
//定義一個方向枚舉,用來判別ScrollView滑動方向
enum Direction {
case None
case Left
case Right
}
private var currentIndex = 0 //當前圖片下標
private var nextIndex = 0 //滾動時應該顯示的圖片的下標
private var direction:Direction? {
didSet {//監聽方向屬性,在scrollViewDidScroll方法中賦值,請留意。
if direction == .Right {
otherImageView.frame = CGRectMake(0, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height)
self.nextIndex = self.currentIndex - 1
if self.nextIndex < 0 {
//循環顯示,第一張到最后一張
self.nextIndex = imageArray.count - 1
}
} else if direction == .Left {
self.otherImageView.frame = CGRectMake(currentImageView.frame.maxX, 0, self.scrollView.bounds.size.width, self.scrollView.bounds.size.height)
self.nextIndex = (self.currentIndex + 1)%imageArray.count
}
//計算完index,記得給另外一個imageView.image賦值
self.otherImageView.image = self.imageArray[self.nextIndex]
pageControl.currentPage = currentIndex
}
}
}
- delegate方法部分:
//計算imageView移動的方向,給direction變量賦值,會自動調用didSet包含的代碼
func scrollViewDidScroll(scrollView: UIScrollView) {
direction = scrollView.contentOffset.x > SCREEN_WIDTH-30 ? .Left : .Right //imageView移動的方向
}
//滑動快停止的時候,作一些處理
func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
scrollDidStop()
}
private func scrollDidStop() {
self.direction = .None //清空方向
let index = scrollView.contentOffset.x/scrollView.bounds.size.width
if index == 1 { //說明滑動前與滑動后contentOffset并無變化,return
return
}
//將otherImageView設置成currentImageView,回到一開始的狀態:位于UIScrollView中間的是currentImageView
currentImageView.frame = CGRectMake(scrollView.bounds.size.width, 0, scrollView.bounds.size.width, scrollView.bounds.size.height)
self.currentIndex = self.nextIndex
currentImageView.image = self.otherImageView.image
scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0)
}
- 定時滾動部分:
//啟動定時器
func startTimer() {
if imageArray.count == 1 {
return
}
if timer != nil {//重置定時器
timer!.invalidate()
timer = nil
}
timer = NSTimer.init(timeInterval: 2, target: self, selector: #selector(self.nextPage), userInfo: nil, repeats: true)
NSRunLoop.currentRunLoop().addTimer(timer!, forMode: NSRunLoopCommonModes)
}
func nextPage () {
scrollView.setContentOffset(CGPointMake(scrollView.bounds.width*2, 0), animated: true)
//調用完setContentOffset方法系統自動調用 scrollViewDidEndScrollingAnimation方法
}
func scrollViewDidEndScrollingAnimation(scrollView: UIScrollView) {
scrollDidStop() //滑動結束后作處理
}
func scrollViewWillBeginDragging(scrollView: UIScrollView) {
timer?.invalidate() //用戶拖動時停止定時器
}
func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
startTimer()//松開后再次啟動定時器
}
以上。