CollectionViewCell will not display dynamic images - ios

Question

I am creating a flip animation on the screen. On view load the page shows the back of the card fine. all 16 images are showing the back of the card. After clicking the button to flip, I need the CollectionViewCell to show different images (card_1.jpg, card_2.jpg, etc..) but only the first cell displays the image.
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
})
}
}
I followed this articles example to create the animation. https://medium.com/#lawrey/creating-a-flip-card-animation-with-uicollectionviewcell-swift-3-0-98bc96317fee
In my code above I have a label which displays the number at the indexPath inside the deck array. but not the image can someone tell me how to display all image dynamically? or what am I doing wrong?

Answer 1

So after spending a whole day yesterday I figured it's time to change my approach. I decided to create two images in the storyboard instead. Here is my final working code. This load all 16 cards with the back of the card photo and when a button is clicked the flip animation flips to random 16 card.
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
}
})
}
}