Circular ImageView Swift

Question

I have tried every answer variation I have found and all give me the same result. A weird almost diamond shaped image view. I was using this:

imageView.layer.cornerRadius = imageView.frame.width/2 
imageView.clipsToBounds = true

This worked with a previous project I was working on but now when I try it I get the weird diamond.

Answer 1

Here is the solution how to create UIImageView Circular. This Approach is new

1. Create a new Designable.swift file in your project.

2. Copy the following code in your Designable.swift file.

   import UIKit
   
   @IBDesignable class DesignableImageView: UIImageView { }
   @IBDesignable class DesignableButton:UIButton { }
   @IBDesignable class DesignableTextField:UITextField { }
   
   extension UIView {
      @IBInspectable
      var borderWidth :CGFloat {
      get {
          return layer.borderWidth
      }
   
      set(newBorderWidth){
         layer.borderWidth = newBorderWidth
      }
   }
   
   @IBInspectable
   var borderColor: UIColor? {
      get{
          return layer.borderColor != nil ? UIColor(CGColor: layer.borderColor!) :nil
      }
      set {
          layer.borderColor = newValue?.CGColor
      }
   }
   
   @IBInspectable
   var cornerRadius :CGFloat {
       get {
           return layer.cornerRadius
       }
   
       set{
          layer.cornerRadius = newValue
          layer.masksToBounds = newValue != 0
       }
   }
   
   @IBInspectable
   var makeCircular:Bool? {
       get{
           return nil
       }
   
       set {
           if let makeCircular = newValue where makeCircular {
               cornerRadius = min(bounds.width, bounds.height) / 2.0
           }
       }
     }
   }
   

3. Now after this select your ImageView on StoryBoard and Select Identity Inspector from Utilities Panel.

4. In Custom Class section select the custom class from the drop-down menu naming DesignableImageView and hit return. You will see the designable update after hitting return.

5. Now go to attribute inspector in utility panel and you can add the desired Corner Radius for the image to be circular.

P.S. If your image is rectangle this will try to make it square and then best possible circle.

Attached images for reference.

Answer 2

Try changing the view mode for the uiimageview. It might have been set to Aspect fit making it to look like a diamond.

Or you can create a circular uiimage using the code below,

imageLayer.contents = yourImage.CGImage
let mask = CAShapeLayer()
let dx = lineWidth + 1.0
let path = UIBezierPath(ovalInRect: CGRectInset(self.bounds, dx, dx))
mask.fillColor = UIColor.blackColor().CGColor
mask.path = path.CGPath
mask.frame = self.bounds
layer.addSublayer(mask)

imageLayer = CAShapeLayer()
imageLayer.frame = self.bounds
imageLayer.mask = mask
imageLayer.contentsGravity = kCAGravityResizeAspectFill
layer.addSublayer(imageLayer)