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.

Your image view's frame is probably changing after you set the `cornerRadius`. This is actually the wrong way to create a circular image. You should actually create a new `UIImage` from the original cropped to be round. It's much better than setting the `cornerRadius` of the image view. — rmaddy, Apr 10 '16 at 04:39
That does sound like a much better solution. Can you explain to me how to do this? Thanks! — 01Riv, Apr 10 '16 at 04:42

score 7 · Answer 1 · edited May 02 '18 at 04:17

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

Create a new Designable.swift file in your project.

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
        }
    }
  }
}

Now after this select your ImageView on StoryBoard and Select Identity Inspector from Utilities Panel.
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.
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.

score 1 · Answer 2 · answered Apr 10 '16 at 04:52

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)

score 1 · Answer 3 · edited May 23 '17 at 12:08

If you want to create with new image it may be like this

let img = UIImage(named: "logo.png")

UIGraphicsBeginImageContextWithOptions(imgView.bounds.size, false, 0.0);
// Add a clip before drawing anything, in the shape of an rounded rect

UIBezierPath(roundedRect: imgView.bounds, cornerRadius:imgView.bounds.size.width/2).addClip()
img!.drawInRect(imgView.bounds)
imgView.image = UIGraphicsGetImageFromCurrentImageContext()

UIGraphicsEndImageContext();

Ref & If you want to make extension for it : https://stackoverflow.com/a/25459500/4557505
You can find more information in the above link for other alternative solutions

score 0 · Answer 4 · answered Apr 10 '16 at 04:28

0

Your image view should be a square in order for this to work.

answered Apr 10 '16 at 04:28

rounak

9,217
3
42
59

1

I've been sure to make it a square – 01Riv Apr 10 '16 at 04:29

score 0 · Answer 5 · answered Apr 10 '16 at 06:53

if you are trying this code in viewDidLoad(), please try it in viewDidLayoutSubviews()

viewDidLayoutSubviews() {

imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.layer.masksToBounds = true
}

score 0 · Answer 6 · answered Nov 01 '17 at 18:05

extension UIImageView {
  public func maskCircle(inputImage: UIImage) {
    self.contentMode = UIViewContentMode.scaleAspectFill
    self.layer.cornerRadius = self.frame.height / 2
    self.layer.masksToBounds = false
    self.clipsToBounds = true

   self.image = inputImage
  }
}

Usage example of the above extension:

let yourImage:UIImage = UIImage(named: "avatar")!
yourImageView.maskCircle(yourImage)

Circular ImageView Swift

6 Answers6