图像幻灯片 Swift ios

Question

我是ios开发的新手。 我正在尝试制作一个简单的全屏图像幻灯片。 向左滑动幻灯片应显示下一张图像，向右滑动幻灯片应显示上一张图像。

我让它工作了，但是，如果我快速连续滑动，我会得到一个空白屏幕，几乎就像动画没有跟上一样，然后当我等待片刻并再次滑动时，图像视图会加速到位并起作用又正常了。 知道我做错了什么吗？ 在使用动态数量的图像（这里它们是硬编码的）实现像这样的图像轮播时，最佳实践是什么？

import UIKit

var imageArr = ["imageOne.jpg", "imageTwo.jpg", "imageThree.jpg", "imageFour.jpg", "imageFive.jpg"]
var imageIndex = 0;

class ViewController: UIViewController {

    var currImage = UIImageView()
    var rightImage = UIImageView()
    var leftImage = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        var bounds:CGRect = UIScreen.mainScreen().bounds
        var width:CGFloat = bounds.size.width
        var height:CGFloat = bounds.size.height


        currImage.frame = CGRect(x: 0.0, y: 0.0, width: width, height: height)
        currImage.image = UIImage(named: imageArr[imageIndex])

        rightImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)
        rightImage.image = UIImage(named: imageArr[imageIndex + 1])

        leftImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)
        leftImage.image = UIImage(named: imageArr[imageArr.count - 1])

        self.view.addSubview(currImage)
        self.view.addSubview(rightImage)
        self.view.addSubview(leftImage)

        var swipeLeft = UISwipeGestureRecognizer(target: self, action: "handleSwipe:")
        swipeLeft.direction = UISwipeGestureRecognizerDirection.Left
        self.view.addGestureRecognizer(swipeLeft)

        var swipeRight = UISwipeGestureRecognizer(target: self, action: "handleSwipe:")
        swipeRight.direction = UISwipeGestureRecognizerDirection.Right
        self.view.addGestureRecognizer(swipeRight)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.

    }

    let transitionManager = TransitionManager()


    func handleSwipe(gesture: UIGestureRecognizer) {

        var bounds:CGRect = UIScreen.mainScreen().bounds
        var width:CGFloat = bounds.size.width
        var height:CGFloat = bounds.size.height

        if let swipeGesture = gesture as? UISwipeGestureRecognizer {

            if (swipeGesture.direction == UISwipeGestureRecognizerDirection.Left ) {

                UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.2, options: UIViewAnimationOptions.CurveEaseIn, animations: {


                    self.currImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)
                    self.rightImage.frame = CGRect(x: 0.0, y:0.0, width: width, height: height)

                    }, completion: { finished in

                        if (!finished) { return }

                        imageIndex++
                        imageIndex = imageIndex <= imageArr.count-1 ? imageIndex : 0

                        var leftIndex = imageIndex - 1 < 0 ? imageArr.count - 1 : imageIndex - 1

                        self.leftImage.image = UIImage(named: imageArr[leftIndex])
                        self.leftImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)

                        var tempImg = self.currImage

                        self.currImage = self.rightImage

                        self.rightImage = tempImg

                        self.rightImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)

                        var rightIndex = imageIndex + 1 > imageArr.count - 1 ? 0 : imageIndex + 1
                        self.rightImage.image = UIImage(named: imageArr[rightIndex])

                })
            }

            if (swipeGesture.direction == UISwipeGestureRecognizerDirection.Right) {


                UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.2, options: UIViewAnimationOptions.CurveEaseIn, animations: {

                    self.currImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)
                    self.leftImage.frame = CGRect(x: 0.0, y: 0.0, width: width, height: height)

                    }, completion: { finished in


                        imageIndex--
                        imageIndex = imageIndex < 0 ? imageArr.count - 1 : imageIndex

                        var rightIndex = imageIndex + 1 > imageArr.count - 1 ? 0 : imageIndex + 1

                        self.rightImage.image = UIImage(named: imageArr[rightIndex])
                        self.rightImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)

                        var tempImg = self.currImage

                        self.currImage = self.tempImg
                        self.leftImage = tempCurr

                        self.leftImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)
                        var leftIndex = imageIndex - 1 < 0 ? imageArr.count - 1 : imageIndex - 1
                        self.leftImage.image = UIImage(named: imageArr[leftIndex])

                })
            }

        }
    }

} 

任何帮助深表感谢！

Answer 1

@IBOutlet weak var imageView:UIImageView!

var i=Int()

override func viewDidLoad() {
    super.viewDidLoad()
    Timer.scheduledTimer(timeInterval: 3.0, target: self, selector: #selector(imageChange), userInfo: nil, repeats: true)
    // Do any additional setup after loading the view.
}

@objc func imageChange(){
    self.imageView.image=images[i]
    if i<images.count-1{
        i+=1
    }
    else{
        i=0
    }
}

Answer 2

我已经尝试过 CollectionView 的轮播幻灯片，但对我来说没有用。 我不喜欢为了让它在一行中显示图像而必须采取的骇人听闻的方式，而且我也不喜欢它无法返回活动图像的事实（这里也有一些解决方法，但他们没有看起来很可靠）。 因此，很自然地，我最终为我的目的构建了一个自定义幻灯片轮播。 我将在这里分享代码，所以希望它可以帮助（或至少指导某人）解决类似的问题。

注意：我的轮播是全宽、singleImagePerScreen 轮播，带有一个滑动识别器来滑动图像和在图像处于活动状态时触发的委托功能（我用它来显示活动图像 - “1 of 5”）。

测试：SWIFT 5、XCode 12.2、iOS 14.2

// ImageCarouselView class

import UIKit

class ImageCarouselView: UIView {
    private let images: [UIImage?]
    private var index = 0
    private let screenWidth = UIScreen.main.bounds.width

    var delegate: ImageCarouselViewDelegate?

    lazy var previousImageView = imageView(image: nil, contentMode: .scaleAspectFit)
    lazy var currentImageView = imageView(image: nil, contentMode: .scaleAspectFit)
    lazy var nextImageView = imageView(image: nil, contentMode: .scaleAspectFit)

    lazy var previousImageLeadingConstraint: NSLayoutConstraint = {
        return previousImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: -screenWidth)
    }()

    lazy var currentImageLeadingConstraint: NSLayoutConstraint = {
        return currentImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0)
    }()

    lazy var nextImageLeadingConstraint: NSLayoutConstraint = {
        return nextImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: screenWidth)
    }()

    init(_ images: [UIImage?]) {
        self.images = images

        super.init(frame: .zero)

        self.translatesAutoresizingMaskIntoConstraints = false

        setupLayout()
        setupImages()
        setupSwipeRecognizer()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    private func setupLayout() {
        self.subviews.forEach({ $0.removeFromSuperview() })

        addSubview(previousImageView)
        addSubview(currentImageView)
        addSubview(nextImageView)

        previousImageLeadingConstraint = previousImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: -screenWidth)
        currentImageLeadingConstraint = currentImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0)
        nextImageLeadingConstraint = nextImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: screenWidth)

        NSLayoutConstraint.activate([
            previousImageLeadingConstraint,
            previousImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            previousImageView.widthAnchor.constraint(equalToConstant: screenWidth),

            currentImageLeadingConstraint,
            currentImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            currentImageView.widthAnchor.constraint(equalToConstant: screenWidth),

            nextImageLeadingConstraint,
            nextImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            nextImageView.widthAnchor.constraint(equalToConstant: screenWidth),
        ])
    }

    private func setupImages() {
        currentImageView.image = images[self.index]

        guard images.count > 1 else { return }

        if (index == 0) {
            previousImageView.image = images[images.count - 1]
            nextImageView.image = images[index + 1]
        }

        if (index == (images.count - 1)) {
            previousImageView.image = images[index - 1]
            nextImageView.image = images[0]
        }
    }

    private func setupSwipeRecognizer() {
        guard images.count > 1 else { return }

        let leftSwipe = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipes))
        let rightSwipe = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipes))

        leftSwipe.direction = .left
        rightSwipe.direction = .right

        self.addGestureRecognizer(leftSwipe)
        self.addGestureRecognizer(rightSwipe)
    }

    @objc private func handleSwipes(_ sender: UISwipeGestureRecognizer) {
        if (sender.direction == .left) {
            showNextImage()
        }

        if (sender.direction == .right) {
            showPreviousImage()
        }
    }

    private func showPreviousImage() {
        previousImageLeadingConstraint.constant = 0
        currentImageLeadingConstraint.constant = screenWidth

        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations: {
            self.layoutIfNeeded()
        }, completion: { _ in
            self.nextImageView = self.currentImageView
            self.currentImageView = self.previousImageView
            self.previousImageView = self.imageView(image: nil, contentMode: .scaleAspectFit)

            self.index = self.index == 0 ? self.images.count - 1 : self.index - 1
            self.delegate?.imageCarouselView(self, didShowImageAt: self.index)
            self.previousImageView.image = self.index == 0 ? self.images[self.images.count - 1] : self.images[self.index - 1]

            self.setupLayout()
        })
    }

    private func showNextImage() {
        nextImageLeadingConstraint.constant = 0
        currentImageLeadingConstraint.constant = -screenWidth

        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations: {
            self.layoutIfNeeded()
        }, completion: { _ in
            self.previousImageView = self.currentImageView
            self.currentImageView = self.nextImageView
            self.nextImageView = self.imageView(image: nil, contentMode: .scaleAspectFit)

            self.index = self.index == (self.images.count - 1) ? 0 : self.index + 1
            self.delegate?.imageCarouselView(self, didShowImageAt: self.index)
            self.nextImageView.image = self.index == (self.images.count - 1) ? self.images[0] : self.images[self.index + 1]

            self.setupLayout()
        })
    }

    func imageView(image: UIImage? = nil, contentMode: UIImageView.ContentMode) -> UIImageView {
        let view = UIImageView()

        view.image = image
        view.contentMode = contentMode
        view.translatesAutoresizingMaskIntoConstraints = false

        return view
    }
}

// ImageCarouselViewDelegate

import UIKit

protocol ImageCarouselViewDelegate: NSObjectProtocol {
    func imageCarouselView(_ imageCarouselView: ImageCarouselView, didShowImageAt index: Int)
}

// Usage

let slideshowView = ImageCarouselView(images) // initialize

self.slideshowView.delegate = self // set delegate in viewDidLoad()

extension YourViewController: ImageCarouselViewDelegate {
    func imageCarouselView(_ imageCarouselView: ImageCarouselView, didShowImageAt index: Int) {
        // do something with index
    }
}

Answer 3

您可以添加集合视图，在自定义集合视图单元格中添加图像，然后在集合视图的道具面板上选中Paging Enabled 。 使用定时器进行自动滑动

Answer 4

我是ios开发的新手。 我正在尝试制作一个简单的全屏图像幻灯片放映。 向左滑动，幻灯片显示应显示下一张图像，向右滑动，幻灯片显示应显示上一张图像。

我可以使用它，但是，如果快速连续滑动，则会出现空白屏幕，几乎就像动画没有跟上一样，然后等一会儿再滑动一次，图像视图就会加速到位并可以正常工作再次正常。 知道我在做什么错吗？ 在实现具有动态数量图像（在此为硬编码）的这种图像轮播时，最佳实践是什么？

import UIKit

var imageArr = ["imageOne.jpg", "imageTwo.jpg", "imageThree.jpg", "imageFour.jpg", "imageFive.jpg"]
var imageIndex = 0;

class ViewController: UIViewController {

    var currImage = UIImageView()
    var rightImage = UIImageView()
    var leftImage = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        var bounds:CGRect = UIScreen.mainScreen().bounds
        var width:CGFloat = bounds.size.width
        var height:CGFloat = bounds.size.height


        currImage.frame = CGRect(x: 0.0, y: 0.0, width: width, height: height)
        currImage.image = UIImage(named: imageArr[imageIndex])

        rightImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)
        rightImage.image = UIImage(named: imageArr[imageIndex + 1])

        leftImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)
        leftImage.image = UIImage(named: imageArr[imageArr.count - 1])

        self.view.addSubview(currImage)
        self.view.addSubview(rightImage)
        self.view.addSubview(leftImage)

        var swipeLeft = UISwipeGestureRecognizer(target: self, action: "handleSwipe:")
        swipeLeft.direction = UISwipeGestureRecognizerDirection.Left
        self.view.addGestureRecognizer(swipeLeft)

        var swipeRight = UISwipeGestureRecognizer(target: self, action: "handleSwipe:")
        swipeRight.direction = UISwipeGestureRecognizerDirection.Right
        self.view.addGestureRecognizer(swipeRight)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.

    }

    let transitionManager = TransitionManager()


    func handleSwipe(gesture: UIGestureRecognizer) {

        var bounds:CGRect = UIScreen.mainScreen().bounds
        var width:CGFloat = bounds.size.width
        var height:CGFloat = bounds.size.height

        if let swipeGesture = gesture as? UISwipeGestureRecognizer {

            if (swipeGesture.direction == UISwipeGestureRecognizerDirection.Left ) {

                UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.2, options: UIViewAnimationOptions.CurveEaseIn, animations: {


                    self.currImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)
                    self.rightImage.frame = CGRect(x: 0.0, y:0.0, width: width, height: height)

                    }, completion: { finished in

                        if (!finished) { return }

                        imageIndex++
                        imageIndex = imageIndex <= imageArr.count-1 ? imageIndex : 0

                        var leftIndex = imageIndex - 1 < 0 ? imageArr.count - 1 : imageIndex - 1

                        self.leftImage.image = UIImage(named: imageArr[leftIndex])
                        self.leftImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)

                        var tempImg = self.currImage

                        self.currImage = self.rightImage

                        self.rightImage = tempImg

                        self.rightImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)

                        var rightIndex = imageIndex + 1 > imageArr.count - 1 ? 0 : imageIndex + 1
                        self.rightImage.image = UIImage(named: imageArr[rightIndex])

                })
            }

            if (swipeGesture.direction == UISwipeGestureRecognizerDirection.Right) {


                UIView.animateWithDuration(0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.2, options: UIViewAnimationOptions.CurveEaseIn, animations: {

                    self.currImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)
                    self.leftImage.frame = CGRect(x: 0.0, y: 0.0, width: width, height: height)

                    }, completion: { finished in


                        imageIndex--
                        imageIndex = imageIndex < 0 ? imageArr.count - 1 : imageIndex

                        var rightIndex = imageIndex + 1 > imageArr.count - 1 ? 0 : imageIndex + 1

                        self.rightImage.image = UIImage(named: imageArr[rightIndex])
                        self.rightImage.frame = CGRect(x: width, y: 0.0, width: width, height: height)

                        var tempImg = self.currImage

                        self.currImage = self.tempImg
                        self.leftImage = tempCurr

                        self.leftImage.frame = CGRect(x: -width, y: 0.0, width: width, height: height)
                        var leftIndex = imageIndex - 1 < 0 ? imageArr.count - 1 : imageIndex - 1
                        self.leftImage.image = UIImage(named: imageArr[leftIndex])

                })
            }

        }
    }

} 

任何帮助深表感谢！