How to make a circular UIView

Question

I want to make a UIView or UIImageView, which is a circle. Or a circle in which I can change the slider size and color using pickerview.

Answer 1

I can at least show you a shortcut for drawing circles of any size. No OpenGL, no graphic drawing of Core required.

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

#import <QuartzCore/QuartzCore.h> 

Also manually add it to your project file folder.

Add this method to your view controller or where 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 diameter. This example assumes that a UIImageView named "circ" is added as a subview to your view. It must 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 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 someone is looking for the Swift equivalent, the lower the answer (Xcode7.2):

(for this, the 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

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

Answer 5

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

Answer 6

As mentioned in some comments, @IBDesignable makes this a lot easier, so you can use Interface Builder to customize the rounded UIImageView.

First create a class called RoundedImageView.swift and paste this code into it:

 import UIKit @IBDesignable public class RoundedImageView: UIImageView { override public func layoutSubviews() { super.layoutSubviews() //hard-coded this since it always round layer.cornerRadius = 0.5 * bounds.size.width } } 

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

Set Clip to Bounds to true (or the image will go beyond the circle):

Now he has to round himself in the InterfaceBuilder interface, which is pretty elegant. Do not forget to set the width and height of the same values, otherwise it will look like zeppelin!