ios 使用 Storyboard 屏蔽 UIView 并赋予圆角？

Use Storyboard to mask UIView and give rounded corners?

提问by Crashalot

Lots of questions like thisexplain how to programmatically create a mask and provide rounded corners to a UIView.

问题很多这样解释了如何以编程方式创建一个面具，以一个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.

有没有办法在 Storyboard 中做到这一切？只是问一下，因为在 Storyboard 中创建圆角似乎可以在演示和逻辑之间保持更清晰的界限。

回答by 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:

但无论如何在 Interface Builder 中。您需要像这样添加用户定义的运行时属性：

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

and enable

并启用

Clips subviews

Results:

结果：

回答by 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 Attributessection, add the following two entries:

您可以使用用户定义的属性在情节提要中执行此操作。选择要舍入的视图并打开其身份检查器。在User Defined Runtime Attributes部分，添加以下两个条目：

• Key Path: layer.cornerRadius, Type: Number, Value: (whatever radius you want)
• Key Path: layer.masksToBounds, Type: Boolean, Value: checked

• 键路径：layer.cornerRadius，类型：数字，值：（任何你想要的半径）
• 键路径：layer.masksToBounds，类型：布尔值，值：选中

You may have to import QuartzKitin 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.

您可能必须QuartzKit在视图的相应类文件（如果有）中导入，但我发誓我没有这样做就让它工作了。您的结果可能会有所不同。

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.

我证实这在操场上有效。

回答by Ananda Aiwale

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

回答by swiftBoy

Even after making all changes in storyboard, Woraphot's answerdoesn't work for me.

即使在故事板中进行了所有更改之后，Woraphot 的回答对我也不起作用。

This worked for me :

这对我有用：

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

---

---

Long answer :

长答案：

Rounded Corners of UIView/UIButton etc

UIView/UIButton 等的圆角

customUIView.layer.cornerRadius = 10

Border Thickness

边框厚度

pcustomUIView.layer.borderWidth = 1

Border Color

边框颜色

customUIView.layer.borderColor = UIColor.blue.cgColor