How to make a circle UIView in Swift

Question

The following code works on an iPhone but on an iPad the circle is not evenly rounded.

How can I make the view look like a circle on both devices?

let width:CGFloat = UIScreen.main.bounds.width*0.0533      
label.layer.masksToBounds = true
label.layer.cornerRadius = width/2

Solution 1

If you want your UIView to appear as a circle there are couple of ways doing this.

• Set it's corner radius to half of the width/height (most common way)

If you don't know the height/width of your view in advance. You can simply override layoutSubviews() function in it's superview class or func viewDidLayoutSubviews() function in view controller and set the corner radius directly there.

override func layoutSubviews() {
  super.layoutSubviews()
  label.layer.cornerRadius = label.frame.size.width/2
}

Don't forget to set the UIView's layer's masksToBounds property to true.

• Set mask layer

Specify bezier path for the mask layer. Layer's frame must be updated every time the view changes its size.

• Rounding images

If you're dealing with images, you can also consider rounding the image itself before displaying it in UIImageView - performance wise it could be a way faster than the previous options.

Solution 2

For making complete circle, you should keep height and width same for your label. Use this code.

let width:CGFloat = UIScreen.main.bounds.width*0.0533  
label.frame = CGRect(0,0,width,width)    
label.layer.masksToBounds = true
label.layer.cornerRadius = width/2

Solution 3

One reason this can happen is if auto layout is changing the size of the label because of a constraint conflict.

Check the debug console to see if thats happening, or just use the "Debug View Hierarchy" to see the actual dimensions of the view.