UIImage in a circle

Question

Can somebody help me here?. New as iPhone Developer. I am trying to display a .png picture in a circle instead of a rectangle which is the standard for iPhone

Answer 1

try this code

yourImageView.layer.cornerRadius = yourImageView.frame.size.height /2;
yourImageView.layer.masksToBounds = YES;
yourImageView.layer.borderWidth = 0;

this show image like ios 7 circle image thanks

Answer 2

Changing the cornerRadius of the image view works well if you have only a couple of images in your view. However if the image view is in a tableview performance will be affected.

Some of the other options:

1. Make the image assets circle on the server or manually if they are bundled into the app, with transparent parts for the outer region of the circle.
2. If the background of the image view doesn't change, create an overlay image that has the inner circle part transparent, and the rest to be the same as the background. Also set the backgroundColor of the image view to clearColor.
3. When receiving the images, edit them in code to be a circle, in a background thread.

Answer 3

I'll add a slightly more universal extension to UIImageView that will work with non-square images. To be noted that it will work slower than the cornerRadius method.

extension UIImageView {
    @IBInspectable public var asEllipse:Bool {
        get {
            if let mask = self.layer.mask {
                return mask.name == kMaskLayerName
            }
            return false;
        }

        set {
            if (newValue) {
                let ellipseMask = CAShapeLayer()
                ellipseMask.name = kMaskLayerName
                ellipseMask.path = CGPathCreateWithEllipseInRect(self.bounds, nil)
                ellipseMask.strokeColor = UIColor.clearColor().CGColor
                ellipseMask.fillColor = UIColor.whiteColor().CGColor
                self.layer.mask = ellipseMask
            } else if self.asEllipse {
                self.layer.mask = nil
            }
        }
    }

}

private let kMaskLayerName="EllipseMaskLayer"

Answer 4

Use a UIImageView and set the cornerRadius to be half height and width. view.layer.cornerRadius = cornerRadius;

UIImage rounded corners

Answer 5

Swift 4: This should display your .png in a circle.

1. Drag (ctrl + click) an IBOutlet of an image toward your code.

cornerRadius The radius to use when drawing rounded corners for the layer’s background. Animatable. https://developer.apple.com/documentation/quartzcore/calayer/1410818-cornerradius

clipsToBounds property A Boolean value that determines whether subviews are confined to the bounds of the view. https://developer.apple.com/documentation/uikit/uiview/1622415-clipstobounds

2.Inside viewDidLoad(), Use the instance property layer.cornerRadius and clipsToBounds.

profileImage.layer.cornerRadius = 50
profileImage.clipsToBounds = true

Answer 6

My contribution with a swift extension used to set an UIImageView as circle

extension UIImageView{

    func asCircle(){
        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }

}

Just call MyImageView.asCircle()