Lots of questions like this explain how to programmatically create a mask and provide rounded corners to a UIView.
Is there a way to do it all within Storyboard? Just asking because it seems like creating rounded corners in Storyboard keeps a clearer demarcation between presentation and logic.
Yes, I use that a lot but question like this was already answered many times.
But anyway in Interface Builder. You need to add User Defined Runtime Attributes like this:
layer.masksToBounds Boolean YES
layer.cornerRadius Number {View's Width/2}
https://i.imgur.com/N7gNLwe.png
and enable
Clips subviews
https://i.imgur.com/6DA6qjb.png
Results:
https://i.stack.imgur.com/7zbNW.png
You can do it in a storyboard by using user-defined properties. Select the view that you want to round and open its Identity Inspector. In the User Defined Runtime Attributes section, add the following two entries:
Key Path: layer.cornerRadius, Type: Number, Value: (whatever radius you want)
Key Path: layer.masksToBounds, Type: Boolean, Value: checked
You may have to import QuartzKit
in your view's corresponding class file (if any), but I swear that I've gotten it to work without doing that. Your results may vary.
EDIT: Example of a dynamic radius
extension UIView {
/// The ratio (from 0.0 to 1.0, inclusive) of the view's corner radius
/// to its width. For example, a 50% radius would be specified with
/// `cornerRadiusRatio = 0.5`.
@IBDesignable public var cornerRadiusRatio: CGFloat {
get {
return layer.cornerRadius / frame.width
}
set {
// Make sure that it's between 0.0 and 1.0. If not, restrict it
// to that range.
let normalizedRatio = max(0.0, min(1.0, newValue))
layer.cornerRadius = frame.width * normalizedRatio
}
}
}
I verified that this works in a playground.
Use IBInspectable
to add the properties to the Storyboard:
https://i.stack.imgur.com/dml4F.png
extension UIView {
@IBInspectable var cornerRadiusV: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.masksToBounds = newValue > 0
}
}
@IBInspectable var borderWidthV: CGFloat {
get {
return layer.borderWidth
}
set {
layer.borderWidth = newValue
}
}
@IBInspectable var borderColorV: UIColor? {
get {
return UIColor(cgColor: layer.borderColor!)
}
set {
layer.borderColor = newValue?.cgColor
}
}
}
Even after making all changes in storyboard, Woraphot's answer doesn't work for me.
This worked for me :
layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor
Long answer :
Rounded Corners of UIView/UIButton etc
customUIView.layer.cornerRadius = 10
Border Thickness
pcustomUIView.layer.borderWidth = 1
Border Color
customUIView.layer.borderColor = UIColor.blue.cgColor
Success story sharing
Error: Launch screens may not use user defined runtime attributes.
Looks like if you need a round image on the LaunchScreen, you are out of options.