2015-05-29 70 views
0

我有一個分頁的UIScrollView,它自動向左滾動,每隔5秒按順序放置4個UIImage視圖。當滾動視圖到達第4個圖像視圖時,它會一直滾動回第一個圖像視圖並重新開始。如何製作帶有圖像視圖的無限分頁滾動視圖?

什麼是創建無限滾動視圖幻覺的最佳方法?換句話說,而不是滾動視圖可以返回,我只是希望它繼續向前滾動,當它到達第4個圖像視圖時,它向前滾動並且圖像視圖#1在那裏。

我以爲只是重新添加圖像意見和增大滾動視圖的內容大小時滾動視圖達到4圖像但不會很聰明...... IDK的

這裏是到目前爲止我的代碼:

我聲明:

var pageImages = [UIImage]() 
var pageViews: [UIImageView?] = [] 
var scrollTimer = NSTimer() 
@IBOutlet weak var carousel: UIScrollView! 

在viewDidLoad中():

pageImages = [UIImage(named: "featured_1.png")!, 
     UIImage(named: "featured_2.png")!, 
     UIImage(named: "featured_3.png")!, 
     UIImage(named: "featured_4.png")!] 
    for _ in 0..<pageImages.count 
     pageViews.append(nil) 
} 
var pagesScrollViewSize = carousel.frame.size 

     carousel.contentSize = CGSize(width: pagesScrollViewSize.width * CGFloat(pageImages.count), 
      height: pagesScrollViewSize.height) 

loadVisiblePages() 

而由定時器調用的函數每5秒:

func scrollToImage() { 
     let x = carousel.contentOffset.x 
     if (x <= (carousel.frame.width * CGFloat(pageImages.count))/2) { 
     UIView.animateWithDuration(1, animations: { 
      self.carousel.contentOffset = CGPointMake(x+self.carousel.frame.width, 0) 
     }) 
     } else { 
     UIView.animateWithDuration(1, animations: { 
      self.carousel.contentOffset = CGPointMake(self.pageViews[0]!.frame.origin.x, 0) 
     }) 
     } 
    } 

最後的助手函數來做大量的工作:

func loadPage(page: Int) { 
     if page < 0 || page >= pageImages.count { 
      return 
     } 

     if let pageView = pageViews[page] { 

     } else { 
      var frame = carousel.bounds 
      frame.origin.x = frame.size.width * CGFloat(page) 
      frame.origin.y = 0.0 

      let newPageView = UIImageView(image: pageImages[page]) 
      newPageView.contentMode = UIViewContentMode.ScaleToFill 
      newPageView.frame = frame 
      carousel.addSubview(newPageView) 
      pageViews[page] = newPageView 
     } 
    } 

    func loadVisiblePages() { 
     let pageWidth = carousel.frame.size.width 
     let page = Int(floor((carousel.contentOffset.x * 2.0 + pageWidth)/(pageWidth * 2.0))) 

     let firstPage = page 
     let lastPage = page + 3 

     for index in firstPage...lastPage { 
      loadPage(index) 
     } 
    } 

回答

2

的想法是:

當圖像在左側從框架中移出,將其移除並重新粘貼在最右側圖像的右側。在這一點你重置內容偏移

import UIKit 

class ViewController: UIViewController { 

    var pageViews: [UIImageView] = [] 
    var scrollTimer = NSTimer() 

    @IBOutlet weak var carousel: UIScrollView! 

    override func viewDidLoad() { 
     super.viewDidLoad() 
     // Do any additional setup after loading the view, typically from a nib. 
     pageViews = [ 
      UIImageView(image:UIImage(named: "featured_1.png")!), 
      UIImageView(image:UIImage(named: "featured_2.png")!), 
      UIImageView(image:UIImage(named: "featured_3.png")!), 
      UIImageView(image:UIImage(named: "featured_4.png")!) 
     ] 
     var pagesScrollViewSize = carousel.frame.size 
     carousel.contentSize = CGSize(width: pagesScrollViewSize.width * CGFloat(pageViews.count),height: pagesScrollViewSize.height) 
     println(carousel.contentSize) 

     scrollTimer = NSTimer.scheduledTimerWithTimeInterval(2.0, target: self, selector: "moveLeft", userInfo: nil, repeats: true) 
    } 

    override func viewDidAppear(animated: Bool) { 
     showPage() 
    } 

    func showPage(){ 
     carousel.setContentOffset(CGPointZero, animated: false) 
     for (index, page) in enumerate(pageViews) { 
      var frame = page.frame 
      frame.origin.x = carousel.frame.size.width * CGFloat(index) 
      frame.origin.y = 0.0 
      println(frame) 
      page.contentMode = UIViewContentMode.ScaleToFill 
      page.frame = frame 
      carousel.addSubview(page) 
     } 

    } 

    func moveLeft(){ 
     UIView.animateWithDuration(
      1.0, 
      animations: { 
       let x = self.carousel.contentOffset.x 
       self.carousel.contentOffset = CGPointMake(x + self.carousel.frame.width, 0) 
       println(self.carousel.contentOffset) 
      }, completion: {complete in 
       self.moveLeftEnd() 
      } 
     ); 
    } 

    func moveLeftEnd(){ 
     let first = pageViews.removeAtIndex(0) 
     pageViews.append(first) 
     showPage() 
    } 
} 
+0

這個,我建議你看這個[WWDC視頻](https://developer.apple.com/videos/wwdc/2011/?id=104),它演示瞭如何達到這個效果。 – sikhapol

+0

這實際上並不奏效,但感謝您的幫助和時間!第一個圖像視圖滾動到下一個圖像,然後滾動查看閃爍類型,然後我們回到第一個圖像視圖。這是第一個和第二個圖像視圖之間的一個不穩定的循環 – cyril

+0

我很抱歉,其中一個功能有錯誤,我沒有看到它,因爲我的所有圖像看起來都一樣。這現在工作100%,檢查我所做的編輯,它取代了moveLeftEnd()函數。 –