CODEWITHSUNDEEP
iphoneuiviewuiimageviewgeometryquartz-core
Jab
Jab

Reputation: 27515

How to make a circular UIView

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.

Upvotes: 66

Views: 67461

Answers (7)

zeeshan
zeeshan

Reputation: 5053

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

enter image description here

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:

enter image description here

Upvotes: 10

James Toomey
James Toomey

Reputation: 6092

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:

enter image description here

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

enter image description here

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!

enter image description here

Upvotes: 13

Pawan Sharma
Pawan Sharma

Reputation: 3354

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

enter image description here

Upvotes: 25

infiniteLoop
infiniteLoop

Reputation: 2179

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

Upvotes: 12

John Erck
John Erck

Reputation: 9538

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

Upvotes: 35

willc2
willc2

Reputation: 39701

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.

Upvotes: 106

Ben Gottlieb
Ben Gottlieb

Reputation: 85542

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.

Upvotes: 3

Related Questions