UICollectionViewCell - Round Downloaded Image - ios

Question

I am trying to set a collectionView with round images I get using KingFisher (image caching library).
I am not sure what I should set with round corner, the imageView or the cell itself. Even if the cell is round the image seems to fill the square.
So far I am using this code (If I dont set it after I change the image its square):
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
...
if let path = user.profilePictureURL {
if let url = URL(string: path) {
cell.profilePictureImageView.kf.setImage(with: url)
cell.profilePictureImageView.layer.cornerRadius = cell.profilePictureImageView.frame.width/2.0
}
}
And the ImageView :
class ProfilePicture : UIImageView {
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.commonInit()
}
func commonInit(){
self.layer.masksToBounds = false
self.layer.cornerRadius = self.layer.frame.width/2.0
self.clipsToBounds = true
}
}
But the first time it downloads the images , they are like this (cell background is blue)

Answer 1

You can use like this:
extension UIImageView {
func setRounded() {
let radius = CGRectGetWidth(self.frame) / 2
self.layer.cornerRadius = radius
self.layer.masksToBounds = true
}
}
then call the method as below:
imageView.setRounded()

Answer 2

You can get a circle by adjusting height (in portrait) instead of width:
self.layer.cornerRadius = self.layer.frame.height/2.0
you'll have to adjust your contentMode.scaleAspect if you are unhappy with the results. By adjusting on the long edge you can get a circle but you won't see the entire image.

Answer 3

You can get a circle in the image with a extension of UIView
extension UIImage {
var circleMask: UIImage {
let square = size.width < size.height ? CGSize(width: size.width, height: size.width) : CGSize(width: size.height, height: size.height)
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
imageView.contentMode = UIView.ContentMode.scaleAspectFill
imageView.image = self
imageView.layer.cornerRadius = square.width/2
//imageView.layer.borderColor = UIColor.white.cgColor
//imageView.layer.borderWidth = 5
imageView.layer.masksToBounds = true
UIGraphicsBeginImageContext(imageView.bounds.size)
imageView.layer.render(in: UIGraphicsGetCurrentContext()!)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result!
}}