CODEWITHSUNDEEP
iosswiftuser-interface
01Riv
01Riv

Reputation: 1454

Circular ImageView Swift

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.

Upvotes: 4

Views: 4395

Answers (6)

niks290192
niks290192

Reputation: 704

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.

Select Custom class

Set Attributes

Upvotes: 7

JipZipJib
JipZipJib

Reputation: 81

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)

Upvotes: 0

user4886069
user4886069

Reputation:

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
}

Upvotes: 0

HardikDG
HardikDG

Reputation: 6122

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

Upvotes: 1

Rjk
Rjk

Reputation: 1474

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)

Upvotes: 1

rounak
rounak

Reputation: 9397

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

Upvotes: 0

Related Questions