使用 Storyboard 遮罩 UIView 并给出圆角？答案

【问题标题】：Use Storyboard to mask UIView and give rounded corners?使用 Storyboard 遮罩 UIView 并给出圆角？
【发布时间】：2016-03-16 21:09:00
【问题描述】：

很多问题like this 解释了如何以编程方式创建遮罩并为 UIView 提供圆角。

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

【问题讨论】：

Set a border for UIButton in Storyboard的可能重复

标签： ios xcode swift storyboard autolayout

【解决方案1】：

是的，我经常使用这个，但是这样的问题已经回答了很多次了。

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

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

并启用

Clips subviews

结果：

【讨论】：

在哪里可以添加用户定义的运行时属性？
正如我在第一个图像选择视图中显示的那样，然后在右侧窗格中选择第三个图标用户定义的运行时属性单击下面的项目以添加关键路径、类型、值
您能否将边框半径设为动态，使其始终为宽度的 50%，还是需要为静态整数？
据我所知，只有固定值。
仅供参考，如果您像我一样来到这里，认为这可以在 LaunchScreen.storyboard 上工作，但事实并非如此。你会得到：Error: Launch screens may not use user defined runtime attributes. 看起来如果你需要在 LaunchScreen 上显示一个圆形图像，你就别无选择了。

【解决方案2】：

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

键路径：layer.cornerRadius，类型：数字，值：（任意半径）
密钥路径：layer.masksToBounds，类型：布尔值，值：选中

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

编辑：动态半径示例

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

}

我证实这在操场上有效。

【讨论】：

您能否将边框半径设为动态，使其始终为宽度的 50%，还是需要为静态整数？
你可以，但只能在代码中。不过，一个有趣的解决方法是向视图的类添加一个 IBInspectable 属性，该属性是一个介于 0 和 100 之间的数值，并指示半径应该是宽度的百分比。例如，值 50 表示半径应为宽度的 50%。因为它是一个计算（未存储）的属性，你甚至可以将它添加到 UIView 的扩展中，以便所有视图都可以拥有该属性。
@NRitH，我很想看到类似的东西。你认为你可以在这里发布代码吗？

【解决方案3】：

使用IBInspectable 将属性添加到情节提要：

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

【讨论】：

为什么使用cornerRadiusV而不是cornerRadius？
通过storyboard设置cornerRadius，保存Project中的书写编码

【解决方案4】：

即使在情节提要中进行了所有更改后，Woraphot's answer 对我也不起作用。

这对我有用：

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

长答案：

UIView/UIButton 等圆角

customUIView.layer.cornerRadius = 10

边框厚度

pcustomUIView.layer.borderWidth = 1

边框颜色

customUIView.layer.borderColor = UIColor.blue.cgColor

【讨论】：

这并不试图回答这个问题，它只是您的other answer here 的副本。