Collectionview cell not aligning with collectionview frame

Question

I am trying to create a fullscreen collection view cell. The collection view is pinned to the edges of the parent view. But the collectionview cells are not aligning with the collectionview frame which is required. Can somebody help?

View hierarchy

View

private func setupPageCollectionView() {
        
        let flowLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        flowLayout.scrollDirection = .horizontal
        flowLayout.minimumInteritemSpacing = 0
        flowLayout.minimumLineSpacing = 0
        flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        
        self.view.backgroundColor = .red
    
        pageCollectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
        pageCollectionView.register(MyCell.self, forCellWithReuseIdentifier: MyCell.reuseIdentifier)
        pageCollectionView.delegate = self
        pageCollectionView.dataSource = self
        pageCollectionView.decelerationRate = .fast
        pageCollectionView.translatesAutoresizingMaskIntoConstraints = false
        
        pageCollectionView.backgroundColor = .blue
        self.view.addSubview(pageCollectionView)
        NSLayoutConstraint.activate([
            pageCollectionView.topAnchor.constraint(equalTo: self.view.topAnchor),
            pageCollectionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            pageCollectionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            pageCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
        ])
    }

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

You must be doing something that you have not shown us... using this code: https://pastebin.com/eXUK84Rn ... and scrolling a little bit to show the first two cells, I get this: https://i.stack.imgur.com/dyvPn.png — DonMag, May 30 '23 at 13:08

score -1 · Answer 1 · answered May 30 '23 at 11:32

-1

Check the collectionView's contentInsets, contentInsetAdjustmentBehavior and (most likely) insetsLayoutMarginsFromSafeArea.

answered May 30 '23 at 11:32

kric

114
5

score -1 · Answer 2 · answered May 31 '23 at 13:20

Does collectionView.bounds.size return the right size?

Maybe there is some top padding in the cell subclass?

Try to implement insetForSectionAt from UICollectionViewDelegateFlowLayout

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

score -1 · Answer 3 · answered May 31 '23 at 13:28

It looks like you have set up your collection view correctly, but the cells are not aligned with the collection view frame. To make the cells take up the full screen, you need to ensure that the collection view layout is set up properly.

In your code, you are setting the size of the cells in the collection view to be the same as the size of the collection view itself. This is a good start, but you also need to make sure that the cells are aligned with the edges of the collection view.

To do this, you can modify the UICollectionViewFlowLayout by adding the following line of code:

flowLayout.itemSize = CGSize(width: collectionView.bounds.width, height: collectionView.bounds.height)

This will ensure that the cells are the same size as the collection view, and that they are aligned with the edges of the collection view.

Here's the updated code:

private func setupPageCollectionView() {
        
    let flowLayout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
    flowLayout.scrollDirection = .horizontal
    flowLayout.minimumInteritemSpacing = 0
    flowLayout.minimumLineSpacing = 0
    flowLayout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    
    self.view.backgroundColor = .red

    pageCollectionView = UICollectionView(frame: .zero, collectionViewLayout: flowLayout)
    pageCollectionView.register(MyCell.self, forCellWithReuseIdentifier: MyCell.reuseIdentifier)
    pageCollectionView.delegate = self
    pageCollectionView.dataSource = self
    pageCollectionView.decelerationRate = .fast
    pageCollectionView.translatesAutoresizingMaskIntoConstraints = false
    
    pageCollectionView.backgroundColor = .blue
    self.view.addSubview(pageCollectionView)
    
    flowLayout.itemSize = CGSize(width: pageCollectionView.bounds.width, height: pageCollectionView.bounds.height)
    
    NSLayoutConstraint.activate([
        pageCollectionView.topAnchor.constraint(equalTo: self.view.topAnchor),
        pageCollectionView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
        pageCollectionView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
        pageCollectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
    ])
}

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

By setting the itemSize property of the UICollectionViewFlowLayout, you ensure that the cells are the same size as the collection view, and by setting the constraints of the collection view to match the edges of the parent view, you ensure that the cells are aligned with the edges of the collection view.

Collectionview cell not aligning with collectionview frame

3 Answers3