ChatGPT解决这个技术问题 Extra ChatGPT

Use Storyboard to mask UIView and give rounded corners?

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.


W
Woraphot Chokratanasombat

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


where can i add User Defined Runtime Attributes?
As I show in first image select view then on the right pane select third icon User Defined Runtime Attributes Click item below to add key path, type, value
Can you make the border radius dynamic so it's always 50% of the width or does it need to be a static integer?
As far as I know, fixed value only.
Just FYI, if like me you came here thinking this would work on the LaunchScreen.storyboard, it does not. You will get: 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.
N
NRitH

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.


Can you make the border radius dynamic so it's always 50% of the width or does it need to be a static integer?
You can, but only in code. An interesting workaround, though, is to add an IBInspectable property to your view's class that's a numeric value between 0 and 100 and indicates the percentage of the width that the radius should be. For example, a value of 50 means that the radius should be 50% of the width. Because it's a computed (not stored) property, you can even add it to an extension of UIView so that all views can have the property.
@NRitH, I would be interested to see something like that. Do you think you can post the code here?
p
pkamb

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

why use cornerRadiusV instead of cornerRadius?
it is set cornerRadius using the storyboard through, save the writing coding in Project
s
swiftBoy

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

This does not attempt to answer the question and is just a duplicate of your other answer here.