CODEWITHSUNDEEP
iosswiftuicollectionviewcell
Zin Win Htet
Zin Win Htet

Reputation: 2565

Cells inside UICollectionView do not render properly

I'm new to iOS and Swift, I'm trying to create a UICollectionView for the first time. Something is not quite right when running what I made. Here's what it looks like in my storyboard:

Storyboard Cell

But when I run:

Simulator

Top grey area became longer than before and bottoms of the cells seem clipped. I just wrote few lines of code to make the cells' height equal to the collection view's.

let height = collectionView.frame.height
cell.frame.size.height = height
return cell

Any suggestions?

Upvotes: 0

Views: 956

Answers (4)

Alpesh Desai
Alpesh Desai

Reputation: 313

To change height in a collection view, do not change the cell frame height. There is another delegate for the collection view to set cell height and width.

extension ViewControll : UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        return CGSize(width: anyWidth, height: collectionView.frame.size.height)
    }
}

Here, anyWidth means whatever width you put. It's up to you

Upvotes: 1

Jithin K
Jithin K

Reputation: 21

Swift 4 code is here

1) Uncheck the Automatic field of the Row Height in the attribute inspector.

2) Then set the delegate funcitons

extension ViewController : UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    var width = CGFloat(80)  //change "80" with your cell width

    return CGSize(width: width ,height : self.collectionView.frame.height)
 }
}

Upvotes: 2

Khushbu
Khushbu

Reputation: 2430

You can make changes from storyboard or from code. I have done from storyboard as shown in image.

enter image description here

And also write this method in your view controller to give a size to your item. For that inherit UICollectionViewDelegateFlowLayout method in your view controller.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

      let size = collectionView.frame.width / 3
      return CGSize(width: size - 20, height: size - 20 )
 }

Note: This is just an example. You can set your collection view cell frame.

Upvotes: 1

Rakesh Patel
Rakesh Patel

Reputation: 1701

Please use collectionViewLayout to give a size for an item,

class YourController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

and 

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let height = collectionView.frame.height
    let width = UIScreen.main.bounds.width / 3
    let size = CGSize(width: width, height: height)
    return size
}

Upvotes: 1

Related Questions