How to make a circular UIView

Question

I want to make a UIView or UIImageView that is a circle. Or a circle that i can change the size of using a slider, and the color of with a pickerview.

Answer 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.

Answer 2

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

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

Answer 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!

Answer 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

Answer 6

A neat, clean and elegant solution is to make a class called RoundedUIView and select it as your UIView element's custom class in Xcode's Identity Inspector like shown in the attached screenshot.

import UIKit

@IBDesignable public class RoundedUIView: UIView {

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

        self.layer.cornerRadius = self.frame.width / 2;
        self.layer.masksToBounds = true
    }
}

I needed to display multiple coloured icons on various screens on white background since the app itself has green theme. So I put my UIImgeView on top of RoundedUIView to make them look like this:

Answer 7

You need to make a transparent UIView (background color alpha of 0), and then, in its drawRect:, draw your circle using CoreGraphics calls. You could also edit the view's layer, and give it a cornerRadius.