如何使用图像视图制作无限分页滚动视图？

Question

我有一个分页的 UIScrollView，它每 5 秒自动向左滚动 4 个 UIImage 视图。当滚动视图到达第 4 个图像视图时，它会一直滚动回第一个图像视图并重新开始。

创建无限滚动视图错觉的最佳方法是什么？换句话说，我只是希望它继续向前滚动而不是滚动视图，当它到达第 4 个图像视图时，它会向前滚动并且图像视图 #1 就在那里。

我想过当滚动视图到达第四张图片时重新添加图像视图并增加滚动视图的内容大小，但这不是很聪明...... 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)
        }
    }

Answer 1

这个想法是：

当图像在左侧超出框架时，将其移除并重新附加到最右侧图像的右侧。此时您重置内容偏移量

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()
    }
}