ios - 如何在swift 4的分页模式下使用 Collection View 中的垂直居中单元格？

Question

我读了 How to vertically center UICollectionView content 但是当我在这里使用代码时

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

let navBarHeight       = self.navigationController?.navigationBar.frame.height
let collectionViewHeight = (self.collectionView?.frame.height)! - navBarHeight!
let itemsHeight        = self.collectionView?.contentSize.height

let topInset = ( collectionViewHeight - itemsHeight! ) / 4

return UIEdgeInsetsMake(topInset ,0, 0 , 0)
}

但是当滚动 Collection View 时，这将显示不正确的形式 所以这是我的代码，因为我的 Collection View 单元格是方形的并且等于屏幕宽度

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()

    showImagesCV.contentInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
    if let flowLayout = showImagesCV.collectionViewLayout as? UICollectionViewFlowLayout{
        cellWidth = UIScreen.main.bounds.width
        cellHeight = cellWidth //yourCellHeight = cellWidth if u want square cell
        flowLayout.minimumLineSpacing = spacing
        flowLayout.minimumInteritemSpacing = spacing
        UIView.performWithoutAnimation {
        }
    }
  }
}

extension showImagesViewController : UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: cellWidth, height: cellHeight)
  }
}

我希望单元格之间的间距为 0，并且显示的每个单元格(当前页面(因为 Collection View 处于分页模式))是屏幕的中心

Answer 1

关于 SO Question您提到并使用了，即使整个部分而不是单个单元格居中。您的某些代码可能无效(需要重做)。

首先也是最重要的一点，为全屏设置 collectionView 的约束。请记住将 safeAre/TopGuide 考虑在内，这将确保 Collection View 位于导航栏下方(如果有的话)。

这将确保您的 collectionView 是最新的

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        myCollectionView.collectionViewLayout.invalidateLayout()
    }

在代码下方转储/注释，并在 Storyboard的 collectionView 检查器中将 insets 设置为 (0,0,0,0)。在同一个检查器中，将单元格和线条的最小间距都更改为 0。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {

     let navBarHeight       = self.navigationController?.navigationBar.frame.height
     let collectionViewHeight = (self.collectionView?.frame.height)! - navBarHeight!
     let itemsHeight        = self.collectionView?.contentSize.height

     let topInset = ( collectionViewHeight - itemsHeight! ) / 4

     return UIEdgeInsetsMake(topInset ,0, 0 , 0)
}

同时删除/评论下面的代码

 showImagesCV.contentInset = UIEdgeInsets(top: spacing, left: spacing, bottom: spacing, right: spacing)
    if let flowLayout = showImagesCV.collectionViewLayout as? UICollectionViewFlowLayout{
        cellWidth = UIScreen.main.bounds.width
        cellHeight = cellWidth //yourCellHeight = cellWidth if u want square cell
        flowLayout.minimumLineSpacing = spacing
        flowLayout.minimumInteritemSpacing = spacing
        UIView.performWithoutAnimation {
        }
    }

现在像这样更改您的 sizeForItemAt。

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

UICollectionViewCell 现在在你的 collectionView 单元格中，确保你的 ImageView 是 1:1 并且在中心。还可以处理其他 UI 组件的约束。

PS:这是简单的方法，其他方法是编写自定义 flowLayout