Swift中CameraView同时设置圆角与阴影不生效问题排查

我有一个包含takePictureButton和recordVideoButton两个按钮的CameraView，希望为其添加圆角与阴影效果。添加了innerView作为CameraView的子视图并放入按钮，但目前仅圆角效果正常显示，阴影未生效。尝试的代码如下：

class CameraView: UIView, UIImagePickerControllerDelegate & UINavigationControllerDelegate {
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.translatesAutoresizingMaskIntoConstraints = false
        self.backgroundColor = .clear
        self.layer.cornerRadius = 0.08 * self.bounds.size.width
        self.layer.masksToBounds = true

        let innerView = UIView(frame: self.bounds)
        innerView.translatesAutoresizingMaskIntoConstraints = false
        innerView.backgroundColor = .clear

        self.addSubview(innerView)

        let shadowPath = UIBezierPath(rect: innerView.frame)
        innerView.layer.shadowColor = UIColor.black.cgColor
        innerView.layer.shadowOpacity = 0.5
        innerView.layer.shadowOffset = CGSize(width: 0, height: 0)
        innerView.layer.shadowRadius = 5
        innerView.layer.shadowPath = shadowPath.cgPath
        innerView.clipsToBounds = true

        let takePictureButton = UIButton(frame: CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height/2))
        takePictureButton.backgroundColor = .white
        takePictureButton.setTitle("Take Picture", for: .normal)
        takePictureButton.setTitleColor(.black, for: .normal)
        takePictureButton.addTarget(self, action: #selector(takePictureButtonTapped), for: .touchUpInside)

        innerView.addSubview(takePictureButton)

        let recordVideoButton = UIButton(frame: CGRect(x: 0, y: frame.size.height/2 + 1, width: frame.size.width, height: frame.size.height/2 - 1))
        recordVideoButton.backgroundColor = .white
        recordVideoButton.setTitle("Record Video", for: .normal)
        recordVideoButton.addTarget(self, action: #selector(recordVideoButtonTapped), for: .touchUpInside)
        innerView.addSubview(recordVideoButton)
    }

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

问题原因分析 #

• innerView设置了clipsToBounds = true，会直接裁剪掉视图边界外的内容，包括阴影，导致阴影无法显示；
• 父视图CameraView设置了masksToBounds = true，同样会限制子视图的阴影超出父视图范围；
• 用frame初始化视图且未配置AutoLayout约束，视图布局更新时shadowPath不会自动适配新尺寸，容易出现显示异常。

修正后的代码 #

class CameraView: UIView, UIImagePickerControllerDelegate & UINavigationControllerDelegate {
    
    private let innerView = UIView()
    private let takePictureButton = UIButton(type: .system)
    private let recordVideoButton = UIButton(type: .system)
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupView()
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 布局更新时重新设置阴影路径，适配当前尺寸
        layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: layer.cornerRadius).cgPath
    }
    
    private func setupView() {
        translatesAutoresizingMaskIntoConstraints = false
        backgroundColor = .clear
        
        // 外层视图负责阴影：不设置masksToBounds，让阴影可以显示在视图外
        layer.cornerRadius = 0.08 * bounds.size.width
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.5
        layer.shadowOffset = CGSize(width: 0, height: 0)
        layer.shadowRadius = 5
        
        // 内层视图负责圆角和内容裁剪
        innerView.translatesAutoresizingMaskIntoConstraints = false
        innerView.backgroundColor = .clear
        innerView.layer.cornerRadius = layer.cornerRadius
        innerView.clipsToBounds = true
        
        addSubview(innerView)
        
        // 配置拍照按钮
        takePictureButton.backgroundColor = .white
        takePictureButton.setTitle("拍照", for: .normal)
        takePictureButton.setTitleColor(.black, for: .normal)
        takePictureButton.addTarget(self, action: #selector(takePictureButtonTapped), for: .touchUpInside)
        innerView.addSubview(takePictureButton)
        
        // 配置录视频按钮
        recordVideoButton.backgroundColor = .white
        recordVideoButton.setTitle("录制视频", for: .normal)
        recordVideoButton.setTitleColor(.black, for: .normal)
        recordVideoButton.addTarget(self, action: #selector(recordVideoButtonTapped), for: .touchUpInside)
        innerView.addSubview(recordVideoButton)
        
        // 添加AutoLayout约束
        NSLayoutConstraint.activate([
            innerView.topAnchor.constraint(equalTo: topAnchor),
            innerView.leadingAnchor.constraint(equalTo: leadingAnchor),
            innerView.trailingAnchor.constraint(equalTo: trailingAnchor),
            innerView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            takePictureButton.topAnchor.constraint(equalTo: innerView.topAnchor),
            takePictureButton.leadingAnchor.constraint(equalTo: innerView.leadingAnchor),
            takePictureButton.trailingAnchor.constraint(equalTo: innerView.trailingAnchor),
            takePictureButton.heightAnchor.constraint(equalTo: innerView.heightAnchor, multiplier: 0.5),
            
            recordVideoButton.topAnchor.constraint(equalTo: takePictureButton.bottomAnchor, constant: 1),
            recordVideoButton.leadingAnchor.constraint(equalTo: innerView.leadingAnchor),
            recordVideoButton.trailingAnchor.constraint(equalTo: innerView.trailingAnchor),
            recordVideoButton.bottomAnchor.constraint(equalTo: innerView.bottomAnchor)
        ])
    }
    
    @objc private func takePictureButtonTapped() {
        // 拍照逻辑
    }
    
    @objc private func recordVideoButtonTapped() {
        // 录制视频逻辑
    }
}

关键修改点 #

1. 拆分职责：外层CameraView负责阴影（不设置masksToBounds），内层innerView负责圆角和内容裁剪（设置clipsToBounds = true），避免两者冲突；
2. AutoLayout替代frame：使用约束确保视图在各种尺寸下都能正确布局；
3. 动态更新阴影路径：在layoutSubviews中重新生成阴影路径，适配视图尺寸变化；
4. 代码结构优化：将视图初始化和配置拆分到单独方法，提高可读性。

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