Ios CollectionViewCell将不显示动态图像
我正在屏幕上创建翻转动画。在查看加载页面时,显示卡片的背面。所有16张图片都显示在卡片的背面。单击按钮翻转后,我需要CollectionViewCell显示不同的图像(card_1.jpg、card_2.jpg等),但只有第一个单元格显示图像Ios CollectionViewCell将不显示动态图像,ios,uicollectionviewcell,swift5,Ios,Uicollectionviewcell,Swift5,我正在屏幕上创建翻转动画。在查看加载页面时,显示卡片的背面。所有16张图片都显示在卡片的背面。单击按钮翻转后,我需要CollectionViewCell显示不同的图像(card_1.jpg、card_2.jpg等),但只有第一个单元格显示图像 class CardsCollectionViewCell: UICollectionViewCell { var deck: [Int] = [] @IBOutlet weak var numberLabel: UILabel! let cardB
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
})
}
}
我按照本文的示例创建动画
在上面的代码中,我有一个标签,它在组数组中的indexPath处显示数字。但不是图像有人能告诉我如何动态显示所有图像吗?或者我做错了什么?所以昨天花了一整天的时间后,我想是时候改变我的方法了。我决定在故事板中创建两个图像。这是我最后的工作代码。这将加载所有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
}
})
}
}
所以在昨天花了一整天的时间之后,我想是时候改变我的方法了。我决定在故事板中创建两个图像。这是我最后的工作代码。这将加载所有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
}
})
}
}