带有角半径和阴影视图的UIView不会裁剪角中的子视图

时间:2018-08-01 10:26:12

标签: swift uiview dropshadow

以下是自定义卡片视图的代码。问题是,当我在“界面”构建器中将子视图添加到此视图时,它不会将拐角半径应用于子视图。在大多数情况下,我可以通过使子视图具有清晰的背景颜色来避免这种情况,但是我在UIImageView方面苦苦挣扎。当我将其添加到卡中时,它的尖端会变成尖角,而我却无法修复它。

这里的各种解决方案建议添加第二层以显示阴影。我已经尝试过了,但是仍然无法正常工作。我想要实现的是具有圆角,阴影和添加任何子视图(例如UIImageView)的视图,也应保持角半径并且不指出。

我尝试使用layer.masksToBoundsself.clipsToBounds进行各种设置,但我似乎总是得到具有圆角半径但没有阴影或可见阴影且视图没有剪切的子视图。

@IBDesignable class CardView: UIView {

    @IBInspectable dynamic var cornerRadius: CGFloat = 6
    @IBInspectable dynamic var shadowOffsetWidth: Int = 2
    @IBInspectable dynamic var shadowOffsetHeight: Int = 2
    @IBInspectable dynamic var shadowColor: UIColor? = UIColor(netHex: 0x333333)
    @IBInspectable dynamic var shadowOpacity: Float = 0.5

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    override func layoutSubviews() {
        commonInit()
    }

    override func prepareForInterfaceBuilder() {
        commonInit()
    }

    func commonInit() {

        layer.cornerRadius = cornerRadius
        let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
        layer.masksToBounds = false

        layer.shadowColor = shadowColor?.cgColor
        layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)
        layer.shadowOpacity = shadowOpacity
        layer.shadowPath = shadowPath.cgPath

        // This was how I tried to add a seperate shadow layer
//        let shadowView = UIView(frame: self.frame)
//        shadowView.layer.shadowColor = shadowColor?.cgColor
//        shadowView.layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)
//        shadowView.layer.shadowOpacity = shadowOpacity
//        shadowView.layer.shadowPath = shadowPath.cgPath
//        shadowView.layer.masksToBounds = false
//
//        self.addSubview(shadowView)

    }

}

2 个答案:

答案 0 :(得分:1)

此外,您可以指定特定的角落。

std::unique_ptr

答案 1 :(得分:0)

您试图实现第二个视图以处理阴影的方法几乎是正确的,只是您没有保持正确的顺序。

您的CardView类已经可以处理阴影。保持该视图不变,而是添加一个名为“ ContentView”的UIView作为子视图。该内容视图的边框和角半径与CardView相同。

在“ ContentView”上,您不需要对阴影进行任何处理。而是将其图层的masksToBounds属性设置为true。现在,将您要显示在卡片中的所有内容添加到“ ContentView”中,它应该可以正确裁剪。

func commonInit() {

    layer.cornerRadius = cornerRadius
    let shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
    layer.masksToBounds = false

    layer.shadowColor = shadowColor?.cgColor
    layer.shadowOffset = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)
    layer.shadowOpacity = shadowOpacity
    layer.shadowPath = shadowPath.cgPath

    let contentView = UIView()
    contentView.frame = self.frame
    contentView.layer.cornerRadius = cornerRadius
    contentView.layer.masksToBounds = true

    // any content you add should now be added to the contentView:
    // contentView.addSubview(aView)
}