使用Storyboard来为UIView创建蒙版并设置圆角？

Question

很多像这样的问题解释了如何编程创建蒙版并将其提供给UIView以实现圆角。

有没有一种方法可以在Storyboard中完成所有操作？只是问一下，因为在Storyboard中创建圆角似乎可以更清晰地划分呈现和逻辑之间的界限。

- Crashalot

---

可能是在Storyboard中为UIButton设置边框的重复问题。 - bummi

Answer 1

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

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

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

和启用

Clips subviews

结果：

- Woraphot Chokratanasombat

---

如第一张图片所示，选择视图，然后在右侧窗格中选择第三个图标“用户定义的运行时属性”。点击下面的项目以添加关键路径、类型和值。 - Woraphot Chokratanasombat

你能否使边框半径动态化，以便它始终是宽度的50％，还是必须是静态整数？ - Crashalot

据我所知，仅限固定值。 - Woraphot Chokratanasombat

我们如何启用“剪辑子视图”？我在图像中没有看到这个选项。 - mfaani

只是提醒一下，如果像我一样你来到这里以为这个方法可以在LaunchScreen.storyboard上使用，那就错了。你会得到以下错误信息：“错误：启动屏幕可能不使用用户定义的运行时属性。”看起来如果你需要在启动屏幕上使用圆形图片，那么你没有其他选择了。 - Code Knox

Answer 2

你可以在故事板中使用用户定义的属性来完成。选择要圆角化的视图并打开其“标识检查器”。在用户定义的运行时属性部分中，添加以下两个条目：

• 键路径：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
        }
    }

}

我验证过这在游乐场中可行。

- NRitH

---

你能否使边框半径动态化，以便它始终是宽度的50％，还是必须是静态整数？ - Crashalot

你可以这样做，但只能在代码中实现。一个有趣的解决方法是在你的视图类中添加一个IBInspectable属性，它是0到100之间的数值，表示半径应该是宽度的百分比。例如，50的值意味着半径应该是宽度的50%。因为它是一个计算属性（而不是存储属性），所以你甚至可以将它添加到UIView的扩展中，以便所有视图都可以拥有此属性。 - NRitH

@NRitH，我很想看到这样的东西。你觉得你能在这里发布代码吗？ - Cobie Fisher

Answer 3

使用 IBInspectable 将属性添加到 Storyboard 中：

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

- Ananda Aiwale

---

为什么要使用cornerRadiusV而不是cornerRadius？ - luhuiya

可以通过Storyboard来设置cornerRadius，这样就可避免在项目中编写代码。 - Ananda Aiwale

Answer 4

您需要将视图连接到您的代码文件，然后

yourView.layer.cornerRadius = yourView.frame.width / 2
yourView.layer.masksToBounds = true

- Abdul Samad

Answer 5

即使在Storyboard中进行了所有更改，Woraphot的答案对我仍然无效。

这个方法适用于我：

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

- swiftBoy

---

这并不是试图回答问题，而只是你的其他答案的重复。 - shim