如何圆化 UIView 的顶部两个角并在上方添加阴影？

Question

我正在尝试使 UIView 的顶部两个角变圆，并使用 UIView 扩展在此视图上方添加阴影。但是我想出的解决方案不起作用。当我使用以下解决方案时，阴影仅出现在圆角中，而不出现在我想要的视图上方。

extension UIView {
    
    func roundCornersWithShadow(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        layer.mask = mask
        mask.path = path.cgPath
        mask.shadowColor = UIColor.black.cgColor
        mask.shadowPath = mask.path
        mask.shadowOffset = CGSize(width: 0.0, height: -2.0)
        mask.shadowOpacity = 0.9
        mask.shadowRadius = 3
        layer.masksToBounds = false
    }
}

Answer 1

//must be used layoutSubviews inside . 
override func layoutSubviews() {
    super.layoutSubviews()
    backView.round(corners: [.topLeft,.topRight], radius: 40)
}

Answer 2

[SWIFT-5] iOS 11 引入了 maskedCorners，可产生更平滑、质量更好的结果。您仍然可以在函数调用中使用 UIRectCorner 并将其转换为 CACornerMask：

extension UIView {

func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
    if #available(iOS 11.0, *) {
        clipsToBounds = true
        layer.cornerRadius = radius
        layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
    } else {
        let path = UIBezierPath(
            roundedRect: bounds, 
            byRoundingCorners: corners, 
            cornerRadii: CGSize(width: radius, height: radius)
        )
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        layer.mask = mask
    }
}

}

Answer 3

您可以使用此扩展程序：

extension UIView {

    /// Rounds ``UIView`` corners.
    /// - Parameters:
    ///   - maskedCorners: Corners to be rounded.
    ///   - cornerRadius: Value to be set as corner radius.
    func roundCorners(maskedCorners: CACornerMask = [.layerMinXMinYCorner, .layerMaxXMinYCorner],
                      cornerRadius: CGFloat = roundedCornersRadius) {
        layer.cornerRadius = cornerRadius
        layer.maskedCorners = maskedCorners
        layer.masksToBounds = true
    }
}

Answer 4

SWIFT 5: iOS 11 引入了 maskedCorners ，结果更流畅更好质量结果。您仍然可以在函数调用中使用 UIRectCorner 并将其转换为 CACornerMask:

extension UIView {

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        if #available(iOS 11.0, *) {
            clipsToBounds = true
            layer.cornerRadius = radius
            layer.maskedCorners = CACornerMask(rawValue: corners.rawValue)
        } else {
            let path = UIBezierPath(
                roundedRect: bounds, 
                byRoundingCorners: corners, 
                cornerRadii: CGSize(width: radius, height: radius)
            )
            let mask = CAShapeLayer()
            mask.path = path.cgPath
            layer.mask = mask
        }
    }

    func addShadow(shadowColor: CGColor = UIColor.label.cgColor,
                   shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
                   shadowOpacity: Float = 0.4,
                   shadowRadius: CGFloat = 3.0) {
        self.layer.shadowColor = shadowColor
        self.layer.shadowOffset = shadowOffset
        self.layer.shadowOpacity = shadowOpacity
        self.layer.shadowRadius = shadowRadius
        self.layer.masksToBounds = false
    }
}

这些函数需要在您的父视图的 layoutSubviews() 中应用。

override func layoutSubviews() {
     roundCorners([.topLeft, .topRight], radius: 15)
     addShadow(shadowColor: UIColor.text1.cgColor, shadowOffset: CGSize(width: 0, height: -3), shadowOpacity: 0.2, shadowRadius: 5)
}

如何圆化 UIView 的顶部两个角并在上方添加阴影？

How to round top two corners of UIView and add shadow above?

xcode

uiview

ios

swift