CollectionViewCell 不会显示动态图片

Question

我正在屏幕上创建一个翻转动画。在视图加载页面显示卡的背面很好。所有 16 张图片都显示了卡片的背面。单击按钮翻转后，我需要 CollectionViewCell 显示不同的图像（card_1.jpg、card_2.jpg 等），但只有第一个单元格显示图像。

class CardsCollectionViewCell: UICollectionViewCell {

var deck: [Int] = []

@IBOutlet weak var numberLabel: UILabel!

let cardBackTag: Int = 0
let cardFrontTag: Int = 1

var cardViews: (frontView: UIImageView, backView: UIImageView)?

var imgViewFront: UIImageView!
var imgViewBack: UIImageView!

override func awakeFromNib() {
    self.imgViewFront = self.createCardViewWithImage(imageName: "card_1", tag: self.cardFrontTag)
    self.imgViewBack = self.createCardViewWithImage(imageName: "back-card", tag: self.cardBackTag)
    self.cardViews = (frontView: self.imgViewFront, backView: self.imgViewBack)
    self.contentView.addSubview(self.imgViewFront)
}

private func createCardViewWithImage(imageName: String, tag: Int) -> UIImageView {
    let newCardImageView = UIImageView(frame: self.frame)
    newCardImageView.image = UIImage(named: imageName)
    newCardImageView.tag = tag
    newCardImageView.clipsToBounds = true
    newCardImageView.contentMode = .scaleAspectFill
    return newCardImageView
}

func flipCardAnimation(indexPath: Int) {

    if (self.imgViewBack.superview != nil) {

        // front card
        self.numberLabel.textColor = UIColor.white
        self.numberLabel.backgroundColor = UIColor.orange
        self.numberLabel.clipsToBounds = true
        self.numberLabel.text = "\(self.deck[indexPath])"
        self.numberLabel.isHidden = false

        self.cardViews!.frontView.removeFromSuperview()
        self.imgViewFront = self.createCardViewWithImage(imageName: "card_\(self.deck[indexPath])", tag: self.cardFrontTag)
        self.cardViews = (frontView: self.imgViewFront, backView: self.imgViewBack)


    } else {
        // back card
        self.deck = [Int](repeating: 0, count: 16)
        self.numberLabel.isHidden = true

        self.cardViews = (frontView: self.imgViewBack, backView: self.imgViewFront)
    }

    let transitionOptions = UIView.AnimationOptions.transitionFlipFromLeft
    UIView.transition(with: self.contentView, duration: 0.5, options: transitionOptions, animations: {

        self.cardViews!.backView.removeFromSuperview()
        self.contentView.addSubview(self.cardViews!.frontView)

        }, completion: {finished in

    })
}
}

我按照这篇文章的例子来创建动画。 https://medium.com/@lawrey/creating-a-flip-card-animation-with-uicollectionviewcell-swift-3-0-98bc96317fee

在我上面的代码中，我有一个标签，它显示 deck 数组内 indexPath 处的数字。但不是图像有人能告诉我如何动态显示所有图像吗？还是我做错了什么？

Answer 1

所以昨天花了一整天后，我想是时候改变我的方法了。我决定在情节提要中创建两个图像。这是我的最终工作代码。这将加载所有 16 张卡片背面的卡片照片，当单击按钮时，翻转动画会翻转为随机 16 张卡片。

import UIKit
import Foundation
import ProgressHUD

class CardsCollectionViewCell: UICollectionViewCell {

    var deck: [Int] = []

    @IBOutlet weak var numberLabel: UILabel!
    @IBOutlet weak var imgViewBack: UIImageView!
    @IBOutlet weak var imgViewFront: UIImageView!

    var cardBack: Bool = true

    func flipCardAnimation(indexPath: Int) {

        numberLabel.isHidden = true

        let transitionOptions = UIView.AnimationOptions.transitionFlipFromLeft
        UIView.transition(with: self.contentView, duration: 0.5, options: transitionOptions, animations: {

            if self.cardBack == true {

                self.deck = [Int](repeating: 0, count: NUMBER_OF_CARDS_IN_DECK)
                self.imgViewBack.isHidden = false
                self.imgViewFront.isHidden = true

            } else {

                self.numberLabel.isHidden = false
                self.imgViewBack.isHidden = true
                self.imgViewFront.isHidden = false
            }

            if (self.cardBack != true) {
                // front card
                self.numberLabel.text = "\(self.deck[indexPath])"
                self.numberLabel.textColor = UIColor.white
                self.numberLabel.backgroundColor = .red
                self.numberLabel.layer.cornerRadius = 
                self.numberLabel.layer.frame.width/2
                self.numberLabel.layer.masksToBounds = true

                self.imgViewFront.image = UIImage(named: "card_\(self.deck[indexPath])")
                self.imgViewFront.tag = self.deck[indexPath]
                self.imgViewFront.contentMode = .scaleAspectFill
                self.imgViewFront.clipsToBounds = true
                self.imgViewFront.layer.cornerRadius = 12

            } else {
                // back card
                print(self.deck)
                self.numberLabel.text?.removeAll()
                self.imgViewBack.image = UIImage(named: "back-card-1")
                self.imgViewBack.tag = 1
                self.imgViewBack.contentMode = .scaleAspectFill
                self.imgViewBack.clipsToBounds = true
            }

            }, completion: {finished in

                if self.cardBack == true {
                    self.cardBack = false
                } else {
                    self.cardBack = true
                }
        })
    }
}