How to make a circular UIView

Solution 1:

I can at least show you a shortcut for drawing circles of arbitrary size. No OpenGL, no Core Graphics drawing needed.

Import the QuartzCore framework to get access to the .cornerRadius property of your UIView or UIImageView.

#import <QuartzCore/QuartzCore.h>

Also manually add it to your project's Frameworks folder.

Add this method to your view controller or wherever you need it:

-(void)setRoundedView:(UIImageView *)roundedView toDiameter:(float)newSize;
{
    CGPoint saveCenter = roundedView.center;
    CGRect newFrame = CGRectMake(roundedView.frame.origin.x, roundedView.frame.origin.y, newSize, newSize);
    roundedView.frame = newFrame;
    roundedView.layer.cornerRadius = newSize / 2.0;
    roundedView.center = saveCenter;
}

To use it, just pass it a UIImageView and a diameter. This example assumes you have a UIImageView named "circ" added as a subview to your view. It should have a backgroundColor set so you can see it.

circ.clipsToBounds = YES;
[self setRoundedView:circ toDiameter:100.0];

This just handles UIImageViews but you can generalize it to any UIView.

NOTE: Since iOS 7, clipToBounds need to YES.

Solution 2:

// For those looking to round the corners of an image view
imageView.layer.cornerRadius = imageView.bounds.size.width/2;
imageView.layer.masksToBounds = YES;

Solution 3:

If somebody is looking for Swift equivalent than below is the answer (Xcode7.2):

(For this to work height and width must be equal.)

extension UIView {
    func makeCircular() {
        self.layer.cornerRadius = min(self.frame.size.height, self.frame.size.width) / 2.0
        self.clipsToBounds = true
    }
}

Solution 4:

As mentioned in some comments, @IBDesignable makes this much easier now, so you can use Interface Builder to configure your rounded UIImageView.

First create a class named RoundedImageView.swift and paste this code to it:

import UIKit

@IBDesignable public class RoundedImageView: UIImageView {

    override public func layoutSubviews() {
        super.layoutSubviews()

        //hard-coded this since it's always round
        layer.cornerRadius = 0.5 * bounds.size.width
    }
}

Select the UIImageView in InterfaceBuilder and change the class from UIImageView to the custom RoundedImageView:

Set Clip to Bounds to true (or the pic will extend beyond the circle):

It should now round itself right there in InterfaceBuilder, which is pretty nifty. Be sure to set the width and height to the same values or it'll be shaped like a zeppelin!

Solution 5:

No need for graphics calls. Just set the corner radius to the width / 2. This can be done on any visual object ie UI element