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

some representation of what you want VS what you are getting would be helpful — ibnetariq, Apr 09 '18 at 09:12
as you can see here the collection view cell is not in the center of the screen @ibnetariq — Saeed Rahmatolahi, Apr 10 '18 at 04:53
your are trying to display vertical collectionView with paging. And you want to display one cell at a time, which should be centred. Is that right? — ibnetariq, Apr 10 '18 at 07:51
@SaeedRahmatolahi I have checked ibnetariq's answer and seem like it works as what you want. Can you tell me what is problem from his answer? Maybe I can help you. — trungduc, Apr 18 '18 at 05:57
I used this method but when I scroll collection view the next cell will again at the wrong place if you have a team viewer and enough time I can show you with that — Saeed Rahmatolahi, Apr 18 '18 at 05:59
@SaeedRahmatolahi It's better if you have skype, give me and i will add you — trungduc, Apr 18 '18 at 06:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169217/discussion-between-saeed-rahmatolahi-and-trungduc). — Saeed Rahmatolahi, Apr 18 '18 at 06:07

score 0 · Answer 1 · answered Apr 10 '18 at 12:46

0

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

answered Apr 10 '18 at 12:46

ibnetariq

718
1
4
20

that's not work as I expected the cells won't equal width to screen and from left and right there is little space and also the problem is that when I want to scroll collection view the problem is that the collection view will scroll But not going to the next cell it will going to the next2 cells(one more) – Saeed Rahmatolahi Apr 11 '18 at 04:09
1 : Make sure that paging is enabled 2 : Very first cell which appears , is correct? I mean centre vertically centre aligned ? 3: After scroll(next 2), cell is in correct position ? Centred vertically ? – ibnetariq Apr 11 '18 at 04:21
and also when I scroll collection view the next cell won't be in the center of the screen @ibnetariq – Saeed Rahmatolahi Apr 11 '18 at 04:29
yes paging is enabled if you have some times I can show you with team viewer or taking photo or video and put the link of that to show you what exactly happen when I used these codes – Saeed Rahmatolahi Apr 11 '18 at 04:30
in office, can't use team viewer. But screen shots are good idea. – ibnetariq Apr 11 '18 at 04:38
I just ran the code and its working prefect.Never shared code on SO, let me figure out how. And you can do the rest. – ibnetariq Apr 11 '18 at 04:46
ok here is the link of the picture that when I run the collection view https://ufile.io/5kpvh and here is the picture that when I scroll collection view https://ufile.io/yqxu6 – Saeed Rahmatolahi Apr 11 '18 at 04:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/168700/discussion-between-saeed-rahmatolahi-and-ibnetariq). – Saeed Rahmatolahi Apr 11 '18 at 04:53
Click on the link at top of your comment here continue this discussion in chat – Saeed Rahmatolahi Apr 12 '18 at 20:45
sorry for delay now I am here in discussion part please help me – Saeed Rahmatolahi Apr 14 '18 at 15:11
did you see my last message ? – Saeed Rahmatolahi Apr 18 '18 at 04:07

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

1 Answers1

Linked