如何在swift 4的分页模式下在集合视图中使用垂直居中的单元格？

Question

我读了 如何垂直居中 UICollectionView 内容 但是当我在这里使用代码时

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)
}

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

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，并且显示的每个单元格（当前页面（因为集合视图处于分页模式））是屏幕的中心

Answer 1

关于您提到和使用的SO问题，即将整个部分而不是单个单元格居中。您的某些代码可能无效（需要重做）。

collectionView首先也是最重要的是，设置全屏的限制。请记住考虑 safeAre/TopGuide，这将确保集合视图位于导航栏下方（如果有）。

这将确保您的 collectionView 是最新的

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

转储/注释下面的代码，并在故事板的 collectionView 的检查器中将插图设置为 (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 单元格中，确保您的图像视图为 1:1 且位于中心。还要处理其他 UI 组件的约束。

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