how to use center vertically cells in collection view in paging mode in swift 4?

Question

I read How to vertically center UICollectionView content But when I used the codes here

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

But when scrolling collection view this will show incorrect form so here is my codes because my collection view cells are square and equal to screen width

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

I want the spacing between cells be 0 and each cell that is showing (current page (because the collection view is in paging mode)) be the center of the screen

Answer 1

Regarding the SO Question you mentioned and using, that is to centre the whole section not individual cells. Some of your code might be invalid(needs to be redone).

First and most important, set the constraints of your collectionView for full screen. Remember to take safeAre/TopGuide into account, this will make sure that collection view is below the navigation bar if there is one.

This will make sure that your collectionView is up to date

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

Dump/comment below code and set insets to (0,0,0,0) in inspector of collectionView in story board. In same inspector change Min Spacing to 0 for cells and for line, both.

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

Also remove/comment below code

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

Now change your sizeForItemAt like this.

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

UICollectionViewCell Now in your collectionView cell, make sure that your image view is 1:1 and in centre. Also handle constraints of your other UI components.

PS : This is easy approach, other would be to write custom flowLayout