使用Storyboard掩盖UIView并给出圆角?

时间:2015-12-11 02:47:12

标签: ios xcode swift storyboard autolayout

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

有没有办法在Storyboard中完成所有操作?只是因为看起来像在Storyboard中创建圆角似乎在表示和逻辑之间保持更清晰的界限。

4 个答案:

答案 0 :(得分:228)

是的,我经常使用它,但这样的问题已经多次回答了。

但无论如何在Interface Builder中。 您需要添加如下所示的用户定义的运行时属性:

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

enter image description here

并启用

Clips subviews

enter image description here

结果:

enter image description here

答案 1 :(得分:19)

您可以使用用户定义的属性在故事板中执行此操作。选择要舍入的视图并打开其Identity Inspector。在用户定义的运行时属性部分中,添加以下两个条目:

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

}

我确认这可以在游乐场中使用。

答案 2 :(得分:5)

选择查看you changed Corner Rediuse , Border Widthe and Border Color  also Using StoryBord

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

答案 3 :(得分:0)

  

即使在情节提要中进行了所有更改,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