Swift 3中UIView自定义类如何实现特定边角同时显示阴影与圆角

这个问题我之前也踩过坑！核心原因很简单：你用layer.mask实现圆角时，会把view层外的所有内容（包括阴影）一并裁剪掉，所以两者自然没法共存。下面给你两种针对特定边角场景的可行解决方案：

方案一：分离阴影层与圆角遮罩 #

思路是把阴影和圆角拆到两个独立layer上：一个专门负责渲染阴影的背景层，另一个作为当前view的遮罩实现圆角。这样阴影不会被遮罩裁剪，圆角也能正常生效。

修改你的CustomView类，代码示例如下：

class CustomView: UIView {
    // 专门承载阴影的layer
    private let shadowLayer = CAShapeLayer()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupBaseLayers()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupBaseLayers()
    }
    
    private func setupBaseLayers() {
        // 将阴影层插入到最底层，避免遮挡内容
        shadowLayer.fillColor = backgroundColor?.cgColor ?? UIColor.white.cgColor
        shadowLayer.shadowColor = UIColor.black.cgColor
        shadowLayer.shadowOffset = CGSize(width: 0, height: 2)
        shadowLayer.shadowOpacity = 0.3
        shadowLayer.shadowRadius = 4
        layer.insertSublayer(shadowLayer, at: 0)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 自定义你需要的特定边角和圆角半径
        let targetCorners: UIRectCorner = [.topLeft, .bottomRight]
        let cornerRadius: CGFloat = 16
        
        // 创建统一的圆角路径
        let roundedPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: targetCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
        
        // 更新阴影层的路径和尺寸
        shadowLayer.path = roundedPath.cgPath
        shadowLayer.frame = bounds
        
        // 给当前view设置遮罩，实现内容的圆角裁剪
        let maskLayer = CAShapeLayer()
        maskLayer.path = roundedPath.cgPath
        layer.mask = maskLayer
    }
    
    // 同步背景色到阴影层
    override var backgroundColor: UIColor? {
        didSet {
            shadowLayer.fillColor = backgroundColor?.cgColor ?? UIColor.white.cgColor
        }
    }
}

方案二：容器View嵌套实现 #

如果觉得layer操作有点繁琐，可以用更直观的嵌套思路：

• 外层容器View只负责显示阴影（不设置圆角，保持maskToBounds = false）
• 内层子View负责设置特定边角的圆角（用你原有的roundCorners方法，开启clipsToBounds = true）

示例代码：

class CustomContainerView: UIView {
    private let contentView = UIView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupNestedViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupNestedViews()
    }
    
    private func setupNestedViews() {
        // 外层容器配置阴影
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0, height: 2)
        layer.shadowOpacity = 0.3
        layer.shadowRadius = 4
        layer.masksToBounds = false
        
        // 添加并约束内层内容View
        addSubview(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: topAnchor),
            contentView.leadingAnchor.constraint(equalTo: leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: bottomAnchor)
        ])
        contentView.clipsToBounds = true
        
        // 设置特定边角圆角
        contentView.roundCorners([.topLeft, .bottomRight], radius: 16)
        contentView.backgroundColor = .white
    }
    
    // 对外暴露添加子控件的入口
    func addContentSubview(_ view: UIView) {
        contentView.addSubview(view)
    }
}

// 保留你原有的UIView扩展
extension UIView {
    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
        let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        let mask = CAShapeLayer()
        mask.path = path.cgPath
        self.layer.mask = mask
    }
}

关键注意点 #

• 负责阴影的layer/view必须保持masksToBounds = false（默认值），负责圆角裁剪的则需要开启clipsToBounds或masksToBounds = true
• 务必在layoutSubviews方法里更新路径和frame，确保view尺寸变化时（比如自动布局调整），圆角和阴影能同步适配

内容的提问来源于stack exchange，提问作者yazh