Swift-圖片輪播器(無限循環)

實現思路

  • 依然是用到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()//松開后再次啟動定時器
    }

以上。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容