swift - 向CALayer添加多个 mask (1用于添加角点)

Question

我想做这样的用户界面

我希望这个 View 有圆角和阴影。

这是我在 Xib 中的 View 层次结构:

-Content View 
    - Shadow View
    - Container View
        - Left View
        - Concave View
        - Action View

这是我实现当前 UI 的代码片段:

对于凹路径:

        let couponPath = UIBezierPath()
        let zeroPoint = CGPoint.zero
        couponPath.move(to: zeroPoint)
        couponPath.addLine(to: CGPoint(x: leftView.frame.width, y: zeroPoint.y))
        let radius = concaveView.frame.width / 2
        let centerX = zeroPoint.x + leftView.frame.width + radius
        couponPath.addArc(withCenter: CGPoint(x: centerX, y: zeroPoint.y), radius: radius, startAngle: CGFloat.pi, endAngle: 0, clockwise: false)
        couponPath.addLine(to: CGPoint(x: containerView.frame.width, y: zeroPoint.y))

        couponPath.addLine(to: CGPoint(x: containerView.frame.width, y: containerView.frame.height))

        couponPath.addArc(withCenter: CGPoint(x: leftView.frame.width + radius, y: containerView.frame.height), radius: radius, startAngle: CGFloat.pi * 0, endAngle: CGFloat.pi, clockwise: false)

        couponPath.addLine(to: CGPoint(x: zeroPoint.x, y: containerView.frame.height))
        couponPath.close()

然后我创建CALayer，路径为couponPath。

let shapeLayer = CAShapeLayer()
shapeLayer.path = couponPath.cgPath

我将它屏蔽到我的containerView: self.containerView.layer.mask = shapeLayer

我尝试使用此代码添加阴影。

let shadowLayer = CAShapeLayer()
shadowLayer.frame = containerView.frame
shadowLayer.path = shapeLayer.path
shadowLayer.shadowOpacity = 0.5
shadowLayer.shadowRadius = 5
shadowLayer.masksToBounds = false
shadowLayer.shadowOffset = CGSize(width: 0, height: 20)
self.shadowView.layer.addSublayer(shadowLayer)

如何添加另一个 mask 来将容器 View 的半径转角？ 有没有更好的方法来添加阴影而不是使用新 View (ShadowView)并在其上应用阴影？

这是我的 xib 和 View Gist

谢谢。

Answer 1

这应该可以帮助您处理阴影和圆角。您设置 ShadowView 图层而不是添加子图层。

class RoundedCornerView: UIView {

    var shadowView: UIView?

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
    }

    func setup() {

        // Set the layer of the main view to have rounded corners
        layer.cornerRadius = 12.0
        layer.masksToBounds = true

        // Create a shadow view and its mask
        shadowView = UIView(frame: bounds)
        addSubview(shadowView!)
        sendSubviewToBack(shadowView!)

        shadowView?.layer.shadowColor = UIColor.black.cgColor
        shadowView?.layer.shadowOffset = 4.0
        shadowView?.layer.shadowOpacity = 0.4
        shadowView?.layer.shadowRadius = 12.0
        shadowView?.layer.shadowPath = UIBezierPath(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath

        shadowView?.layer.masksToBounds = false
        shadowView?.clipsToBounds = false

    }

}