How to Set Corner Radius for Collection View Cells of Different Size

Question

I want to have oval shaped collection cells with width based on the label/text length, but I am having trouble making all the cells look oval. I don't know how to resize based on the label's text length.

I am essentially trying to get something like the blank/pink picture below I saw on another post but the solution didn't work. I have also added what my view controller currently looks like.

1) How do I resize to get oval shape correctly and also 2) why are there longer spaces between some cells and how do I fix that?

Ideal Pic

Current Controller

Storyboard cell (width of label is set to 150)

class HobbiesViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate{

    @IBOutlet weak var collectionView: UICollectionView!

    var items = ["karateeeeeeeeeee", "signup", "last", "madur", "open", "somelongword", "nice", "looooooooong", "karate", "karate","karate", "signup", "last", "madur"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "hobbyCell", for: indexPath) as! HobbiesViewCell

        cell.label.text = self.items[indexPath.item]
        cell.backgroundColor=UIColor.blue //try with different values untill u get the rounded corners
        cell.layer.cornerRadius = cell.bounds.size.height / 2
        cell.layer.masksToBounds=true

        return cell
    }
}

extension HobbiesViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "hobbyCell", for: indexPath) as! HobbiesViewCell
        cell.label.text = items[indexPath.row]
        cell.label.sizeToFit()
        return CGSize(width: cell.label.frame.width + 10 , height: 70)
    }
}

Add your cell to be more precise. – SwiftiSwift Jun 08 '19 at 04:15 — SwiftiSwift, Jun 08 '19 at 04:15
Added a pic above of storyboard – Elizabeth Jun 08 '19 at 04:53 — Elizabeth, Jun 08 '19 at 04:53
I mean the code of ` HobbiesViewCell` – SwiftiSwift Jun 08 '19 at 04:57 — SwiftiSwift, Jun 08 '19 at 04:57

score 0 · Accepted Answer · answered Jun 08 '19 at 05:26

Ans 1. While setting the width of the collection view cell you need to have some minimum width for the cell so that the cell does not get so small that it looks like a circle. Your current height is 70 so that you should keep a condition that if the cell.label.frame.width + 10 is less than 160 then keep the size of the cell as 160.

Ans 2. Collection view itself manages the spacing between the cells according to the frame provided to collection view and the sized to the cell. To set the spacing right may be below link will be helpful to you.

Cell spacing in UICollectionView

From screen shot I can see that your font size also differs from the expected output so may be you can check that also.

Hope this helps you in some way.

How to Set Corner Radius for Collection View Cells of Different Size

1 Answers1