设备旋转时如何在UICollectionView中显示正确的单元格？

提问背景 #

我正在开发一款类似照片应用的图库，采用UICollectionView展示横竖屏两种格式的图片。通过以下代码设置单元格大小：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
    return collectionView.frame.size 
}

同时设置collectionView.isPagingEnabled = true，目前在竖屏和横屏模式下均能获得预期表现，但切换横竖屏后出现了图片拉伸错位、分页位置不准确的问题，该怎么解决？

解决方案 #

• 横竖屏切换时强制刷新布局
  设备旋转时，UICollectionView的尺寸会变化，但旧的布局参数不会自动更新。你可以在视图控制器的旋转回调里主动触发布局刷新，同时保持当前显示的图片居中：

  override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
      super.viewWillTransition(to: size, with: coordinator)
      // 让布局重新计算单元格大小
      collectionView.collectionViewLayout.invalidateLayout()
      
      // 旋转后保持当前图片居中显示
      coordinator.animate(alongsideTransition: { _ in
          guard let currentIndex = self.collectionView.indexPathsForVisibleItems.first else { return }
          self.collectionView.scrollToItem(at: currentIndex, at: .centeredHorizontally, animated: false)
      })
  }
  

• 优化图片视图的内容模式
  图片拉伸变形大多是因为UIImageView的contentMode设置不合理。在配置单元格时，给图片视图设置合适的内容模式：

  // 保持图片比例，不拉伸，留白显示
  imageView.contentMode = .scaleAspectFit
  // 或者如果需要填满单元格并裁切多余部分，用这个组合：
  // imageView.contentMode = .scaleAspectFill
  // imageView.clipsToBounds = true
  

• 改用更可靠的尺寸获取方式
  直接使用collectionView.frame可能在布局未完成时拿到旧尺寸，建议换成bounds.size，它代表视图自身的内部尺寸，更准确：

  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
      return collectionView.bounds.size 
  }
  

• 修正分页的布局参数
  如果分页出现偏移，检查这两个关键参数：

  // 确保没有额外内边距
  collectionView.contentInset = .zero
  
  // 如果是FlowLayout，设置间距为0避免单元格空隙
  if let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
      flowLayout.minimumLineSpacing = 0
      flowLayout.minimumInteritemSpacing = 0
  }
  

这些调整基本上能解决你遇到的横竖屏切换后的布局和显示问题，如果还有更具体的场景问题，可以补充细节再探讨~

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