creating circular pics for tableview cell images

Question

I'm trying to make images circular in a tableview cell, I've the various ways I've seen on stackoverflow but this is the closest I've gotten:

As you can see they look more like elipses than circles. In storyboard I have the constraints set to keeping the aspect ratio 1:1 and the view mode "aspect fill". I'm using this UIImage extension for the circular shape:

extension UIImage {
  var circleMask: UIImage {
    let square = CGSize(width: min(size.width, size.height), height: min(size.width, size.height))
    let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
    imageView.contentMode = UIViewContentMode.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!
  }
}

This is how my cellForRowAt IndexPath looks:

  let cell = detailTableView.dequeueReusableCell(withIdentifier: castResuseIdentifier)
    as! CastCell

  let cast = castArray[indexPath.row]

  cell.actorName.text = cast.name
  cell.characterName.text = cast.character
  cell.actorProfileImage.image = castImageArray[indexPath.row].circleMask

  self.detailTableView.rowHeight = 100
  detailTableView.allowsSelection = true

  return cell

Not sure why they aren't perfect circles, any idea?

Tried that, it just makes it look like squares with rounded edges — SwiftyJD, Feb 28 '17 at 00:02
Sorry, I realised my prev comment wasn't right so I have deleted it. BTW, have you tried this: http://stackoverflow.com/a/39515254/58129 ? — Anthony Kong, Feb 28 '17 at 00:03
Are you sure `circleMask` is only being called after layout is complete? — Ssswift, Feb 28 '17 at 00:30

score 1 · Accepted Answer · answered Feb 28 '17 at 00:39

That is a really non-performant way of achieving that effect, since you're creating a UIImageView and rendering it to a separate image context every time.

For a quick and easy way to do it, just set the cornerRadius property for the layer of the actorProfileImage view inside your CastCell.

score 0 · Answer 2 · answered Feb 28 '17 at 00:47

By not using the extension and instead adding this to the cellForRowAtIndexPath the images came out circular

 cell.actorProfileImage.layer.cornerRadius = cell.actorProfileImage.frame.size.height/2
  cell.actorProfileImage.clipsToBounds = true
  cell.actorProfileImage.layer.masksToBounds = true

creating circular pics for tableview cell images

2 Answers2