How to set rounded corner for Uiimageview in Collectionview cell

Question

I am trying to make a UICollectionviewCell as per the following design

I have set corner radius for the cell, but when data is loaded on the collectonview the imageview is not getting rounded corners. The output that i am getting is as follows

Rounded corners are getting applied to the cells but not to the images. Here is the code that i am applying. The code is applied on collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell

cell.layoutIfNeeded()

cell.layer.cornerRadius      = 15

cell.imageView.clipsToBounds = true

cell.layer.masksToBounds     = true

Can someone help me to solve this issue.

Thanks in advance....

Questions seeking debugging help must include relevant code to be considered on-topic on SO. See [How to create a minimal, complete and verifiable example](https://stackoverflow.com/help/mcve) and include the relevant code in your question. Are you sure you set up both corner radius and `clipsToBounds = true` for the `UIImageView` as well and not just for the collection view cell? — Dávid Pásztor, Jul 30 '17 at 12:15

score 2 · Answer 1 · answered Jul 30 '17 at 13:20

2

You need to set imageView layer corner radius:-

cell.imageView.layer.cornerRadius = 15
cell.imageView.layer.masksToBounds = true

answered Jul 30 '17 at 13:20

Hussain Shabbir

14,801
5
40
56

I dont want to set corner radius to the imageView. The corner radius is to be set to the cell only. – Jobins John Jul 31 '17 at 06:33

score 2 · Answer 2 · answered Dec 16 '17 at 01:24

Just do this:

cell.contentView.layer.cornerRadius = 2.0
cell.contentView.layer.borderWidth = 1.0
cell.contentView.layer.borderColor = UIColor.clear.cgColor
cell.contentView.layer.masksToBounds = true;

This is if you want to add a nice shadow to the background:

cell.layer.shadowColor = UIColor.lightGray.cgColor
cell.layer.shadowOffset = CGSize(width:0,height: 2.0)
cell.layer.shadowRadius = 2.0
cell.layer.shadowOpacity = 1.0
cell.layer.masksToBounds = false;
cell.layer.shadowPath = UIBezierPath(roundedRect:cell.bounds, cornerRadius:cell.contentView.layer.cornerRadius).cgPath

score 1 · Answer 3 · answered Jul 30 '17 at 17:54

1

You could say: cell.clipsToBounds = true

answered Jul 30 '17 at 17:54

the_kaseys

274
1
2
17

score 0 · Answer 4 · answered Jul 30 '17 at 17:36

0

You can also use "user defined run time attribute" to set the corner radius to your imageview Keypath - layer.cornerRadius Type - number Value - your corner radius value

answered Jul 30 '17 at 17:36

Lenin S

5
6

I dont want to set corner radius to the imageView. The corner radius is to be set to the cell only. – Jobins John Jul 31 '17 at 06:32

How to set rounded corner for Uiimageview in Collectionview cell

4 Answers4