Swift 3 - 带有填充的 UICollectionView 中心单元格

Question

我有一个水平滚动的 UICollectionView，我希望一次在屏幕上显示一个单元格。

我在以下方法中以编程方式设置单元格宽度和高度：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath) as! Cell

    let width = collectionView.bounds.size.width - 40
    let height = collectionView.bounds.size.height - 40

    cell.bounds.size = CGSize(width: CGFloat(width), height: CGFloat(height))

    return cell
}

在努力弄清楚如何使用插图、间距、部分插图（以编程方式和在 XCode 中的检查器中）之后，我似乎无法弄清楚我需要设置什么以及我需要在哪里设置它。

这是我想要的间距的图表：

Answer 1

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: IndexPath) -> CGSize {
  return CGSize(width: UIScreen.main.bounds.width - 40, height: yourCollectionViewHeight - 40)
}

left 20 - 在故事板中添加Footer Size和Header Size ， width = 20

单元格之间的Minimum Spacing在故事板中添加Minimum Spacing = 40

我可能犯了一些错误，你不会得到你的布局，但我希望你能明白这个想法。

Answer 2

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: collectionView.frame.width * 0.7, height: 300)
}

func collectionView(_ collectionView: UICollectionView, layoucollectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let margin = collectionView.frame.width * 0.3
    return UIEdgeInsets(top: 10, left: margin / 2, bottom: 10, right: margin / 2)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
   return collectionView.frame.width * 0.3 / 2
}

Answer 3

1. 如果您希望一次在屏幕上显示单个单元格，那么重要的是您应该为CollectionView启用分页。 您可以按如下方式快速完成：

collectionView.isPagingEnabled = true

2. 现在使您的 ViewController 类符合UICollectionViewDelegateFlowLayout并实现它的方法sizeForItemAt indexPath ，该方法为您的 collectionview 单元格返回 CGSize 。 例如：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {    
    return CGSize(width: 200, height: 200)
}