Use a storyboard to hide a UIView and give rounded corners?

Question

Many questions like this explain how to programmatically create a mask and provide rounded corners in a UIView.

Is there a way to do all this in the storyboard? Just ask, because it seems that creating rounded corners in the Storyboard provides a clearer demarcation between presentation and logic.

Answer 1

Yes, I use it a lot, but a question like this has already been answered many times.

But anyway in Interface Builder. You need to add User Defined Runtime attributes as follows:

layer.masksToBounds Boolean YES layer.cornerRadius Number {View Width/2} 

and turn on

 Clips subviews 

Results:

Answer 2

You can do this in a storyboard using custom properties. Select the view 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: (any desired radius)
• Key path: layer.masksToBounds , Type: Boolean, value: checked

You may need to import QuartzKit into your corresponding class file (if any), but I swear I got it to work without doing this. Your results may vary.

EDIT: dynamic radius example

 extension UIView { /// The ratio (from 0.0 to 1.0, inclusive) of the view 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 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 checked that this works in the playground.

Answer 3

Choose view

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

Answer 4

Even after making all the changes to the storyboard, Woraphot's answer does n'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