如何为UIView同时添加阴影与指定圆角？附现有圆角扩展代码

你遇到的问题其实很常见：当用mask实现指定圆角时，视图的阴影会被mask一并裁剪掉，导致阴影无法显示。这是因为mask会把layer所有超出路径的内容都切掉，包括阴影。

这里给你一个简单且可靠的解决方案——用容器视图分离阴影和圆角的职责：让容器视图专门负责渲染阴影，而你的目标视图（就是你要加指定圆角的innerView）只负责实现圆角，两者配合就能完美共存。

具体实现步骤 #

1. 创建阴影容器视图：这个视图不需要设置任何圆角，只需要配置阴影相关的属性，它的作用就是承载阴影效果。
2. 将目标视图加入容器：把你的innerView作为子视图添加到容器里，确保布局对齐。
3. 给目标视图设置指定圆角：继续使用你现有的roundCorners扩展即可。

完整代码示例 #

// 1. 初始化阴影容器
let shadowContainer = UIView()
shadowContainer.translatesAutoresizingMaskIntoConstraints = false

// 配置阴影属性（根据你的需求调整参数）
shadowContainer.layer.shadowColor = UIColor.darkGray.cgColor
shadowContainer.layer.shadowOpacity = 0.4
shadowContainer.layer.shadowOffset = CGSize(width: 0, height: 3)
shadowContainer.layer.shadowRadius = 6
// 可选：如果需要阴影更柔和，可以添加shadowPath优化性能
shadowContainer.layer.shadowPath = UIBezierPath(rect: shadowContainer.bounds).cgPath

// 2. 将你的innerView添加到容器中
shadowContainer.addSubview(innerView)
innerView.translatesAutoresizingMaskIntoConstraints = false

// 3. 绑定innerView和容器的布局约束（让innerView完全填充容器）
NSLayoutConstraint.activate([
    innerView.topAnchor.constraint(equalTo: shadowContainer.topAnchor),
    innerView.leadingAnchor.constraint(equalTo: shadowContainer.leadingAnchor),
    innerView.trailingAnchor.constraint(equalTo: shadowContainer.trailingAnchor),
    innerView.bottomAnchor.constraint(equalTo: shadowContainer.bottomAnchor)
])

// 4. 使用你的扩展设置指定圆角
// 注意：最好在view的layoutSubviews里调用，避免bounds变化导致圆角错位
innerView.layer.roundCorners(corners: [.bottomLeft, .bottomRight], radius: 20, viewBounds: innerView.bounds)

// 5. 把容器视图添加到父视图并设置布局
yourParentView.addSubview(shadowContainer)
// 这里根据你的需求设置shadowContainer的约束，比如：
NSLayoutConstraint.activate([
    shadowContainer.centerXAnchor.constraint(equalTo: yourParentView.centerXAnchor),
    shadowContainer.centerYAnchor.constraint(equalTo: yourParentView.centerYAnchor),
    shadowContainer.widthAnchor.constraint(equalToConstant: 200),
    shadowContainer.heightAnchor.constraint(equalToConstant: 150)
])

额外优化建议 #

为了避免视图bounds变化（比如屏幕旋转、布局更新）导致圆角错位，建议在你的innerView的layoutSubviews方法里调用圆角设置：

extension UIView {
    func setupSpecifiedCorners() {
        layer.roundCorners(corners: [.bottomLeft, .bottomRight], radius: 20, viewBounds: bounds)
    }
}

// 然后在innerView的子类里（或者用扩展）：
override func layoutSubviews() {
    super.layoutSubviews()
    setupSpecifiedCorners()
}

这样每次视图大小变化时，圆角都会自动更新到正确的位置。

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