Set rounded corners on UIimage in UICollectionViewCell in swift

Question

I have a simple problem that I cannot find a solution to on google, the docs or here.

I have a Collectionview in my view controller. I have created a custom cell, DescriptionCell, that contains a UIImage. I want this image to have rounded corners. However, I don't know where to set the cornerradius on the UIImage layer. I have tried in the cells' awakeFromNib method, in the delegate method CellForRowAtIndexPath and overriden LayoutSubview in the cell but it does not work. Where should I put the code to set the radius for the UIImage?

To specify, I know how to create rounded corners of a UIImage. But if it is a subview of a Collectionview cell, I do not know where to set the cornerradius.

Here is code for my descriptionCell

class DescriptionCell: UICollectionViewCell {
    @IBOutlet weak var mImage: UIImageView!

    override func awakeFromNib() {
    //mImage.layer.cornerradius = 5 
    //Does not work, the image is still square in the cell
    }

And in the cellforRowAtIndePath

 func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell = collectionView.dequeueReusableCellWithReuseIdentifier("descriptioncell", forIndexPath: indexPath) as! DescriptionCell
    //cell.mImage.layer.cornerradius = 5 
    //Does not work, the image is still square in the cell
return cell    
}

Thanks in advance!

Quinacrine

Possible duplicate of Making round corners for a UIImage – Russel

Nope this is different. I am already using the code from that answer. MY question is where to put UIImage.layer.cornerradius = xxx? – Quinacrine

Update your question with relevant code. – Dissimilate

There is no specific code that would make sense to add. My question is really simple: how do I create a UIImage with rounded corners that lies in a UICollectionViewCell. – Quinacrine

@Quinacrine It would make sense to at least add the code for your DescriptionCell and CellForRowAtIndexPath. – Headless

I have just added the code:) – Quinacrine

Answer 1

Well you're using part of the code from the answer you said you were using. the other part is imageView.clipsToBounds = true

Update your awakeFromNib like this:

override func awakeFromNib() {
    mImage.layer.cornerRadius = 5 
    mimage.clipsToBounds = true
}

---

To make it a circle you need to set cornerRadius to half of the square height. In your cellForItemAtIndexPath add these lines:

cell.layoutIfNeeded()
cell.mImage.layer.cornerRadius = cell.mImage.frame.height/2

Update

To avoid layoutSubviews from being called twice, override layoutSubviews in your DescriptionCell class and put the code there:

override func layoutSubviews() {
    super.layoutSubviews()
    layoutIfNeeded()
    mImage.layer.cornerRadius = mImage.frame.height/2
}

Headless

I think that did the trick! Now however comes another problem, I want it to be circle shaped. I know that the code is something like: mImage.layer.cornerRadius = mImage.frame.width/2 But when I use this it does not work. The image dissapears! – Quinacrine

Setting the corner radius to be based on the frame needs to be done much after the call to awakeFromNib. It needs to be done after the cell has been sized and the image has been set. – Dissimilate

Thanks for that answer! And when is that exactly? In what method can I set it then? – Quinacrine

you can call some configure function on cell in cellForItemAtIndexPath or even better at willDisplayCell – Exhibitioner

Thanks for all the help Sam, that was exactly the answer I was looking for! So the LayoutifNeeded forces the view to setup its subviews immediately? – Quinacrine

@Quinacrine You're welcome:) Yes that is exactly what it does. But this way it'll end up laying out the subviews again after willDisplayCell has finished. you can override the layoutSubviews method of the Cell to avoid that. i'll update my answer. – Headless

Hm ok, but if LayoutIfNeeded() calls our implementation of LayoutSubviews wouldn't that just be recursion - since LayoutSubviews would call itself? – Quinacrine

Answer 2

Have you tried placing it inside the custom UICollectionViewCell's init function?

override init(frame: CGRect) {
    super.init(frame: frame)

    image.layer.masksToBounds = true
    image.layer.cornerRadius = 10
}

Russel

Answer 3

You can also create an extension like:

extension UIView {
    func addBorder(color: UIColor, cornerRadius: CGFloat = 10, borderWidth: CGFloat = 1.0) {
        layer.borderWidth = borderWidth;
        layer.borderColor = color.cgColor
        layer.cornerRadius = cornerRadius
        layer.masksToBounds = true
    }
}

Laveralavergne