Swift 4中如何翻转UICollectionViewCell内的UIImageView？

嘿，我来帮你排查这个卡片翻转后显示蓝色的问题～ 这种蓝色通常是UICollectionViewCell的默认背景色，说明翻转时你的UIImageView没有正确显示第二张图片，大概率是图片加载、翻转逻辑或者Cell复用的问题，咱们一步步来解决：

1. 先确认图片资源是否正常加载 #

首先排查最基础的问题：

• 检查项目里的图片文件名是否和你写的"image1"、"image2"完全一致（iOS是区分大小写的，比如Image1和image1会被当成不同文件）
• 右键图片文件，查看Target Membership，确保勾选了你当前的项目target，不然图片不会被打包进APP
• 可以在Cell初始化的地方打印一下图片对象，看是否为nil：

  override init(frame: CGRect) {
      super.init(frame: frame)
      print("frontImage是否加载成功：\(frontImage != nil)")
      print("backImage是否加载成功：\(backImage != nil)")
  }
  

  如果打印出false，那就是图片资源的问题，先把这个搞定。

2. 检查卡片翻转的逻辑代码 #

你没贴翻转的具体实现，我猜你可能用了UIView的过渡动画，但没在动画闭包里正确设置图片？正确的翻转逻辑应该是这样的：

// 给Cell加一个翻转方法
func flipCard() {
    cardFlipped.toggle()
    // 确定要显示的目标图片
    let targetImage = cardFlipped ? backImage : frontImage
    
    // 用UIView过渡动画实现翻转，必须在animations闭包里设置image
    UIView.transition(with: cardImage, duration: 0.6, options: .transitionFlipFromRight, animations: {
        self.cardImage.image = targetImage
    }, completion: nil)
}

如果在动画闭包外设置图片，可能会导致动画过程中imageView短暂空白，显示Cell的背景蓝色。

3. 处理UICollectionView的Cell复用问题 #

UICollectionView会复用Cell，如果不重置状态，滚动的时候会出现状态错乱（比如某个Cell本来应该显示正面，却显示了反面），所以一定要重写prepareForReuse方法：

override func prepareForReuse() {
    super.prepareForReuse()
    // 重置卡片状态为未翻转
    cardFlipped = false
    // 重置显示正面图片
    cardImage.image = frontImage
}

4. 检查UIImageView的配置 #

确保你的cardImage的contentMode设置合适，比如.scaleAspectFit或者.scaleAspectFill，不然图片可能显示不全或者拉伸异常；另外也要确认imageView的背景色不是蓝色（不过你说翻转前能看到图片，这个概率不大）。

按照上面的步骤排查，应该就能解决翻转后显示蓝色的问题啦～

内容的提问来源于stack exchange，提问作者Sil