在具有与视图相同的角半径的 UIView 上应用阴影

Question

您好，我有一些带圆角的视图，我想为这些视图应用阴影。

所以首先我要环视一下：

view.layer.cornerRadius = 15
view.clipsToBounds = true

然后我应用阴影：

    func dropShadow(scale: Bool = true) {
        self.layer.masksToBounds = false
        self.layer.cornerRadius = 15
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: self.layer.cornerRadius).cgPath
        self.layer.shadowOffset = CGSize(width: 3, height: 3)
        self.layer.shadowOpacity = 0.5
        self.layer.shadowRadius = 5
    }

view.dropShadow()

我得到了带有阴影的圆形视图，但阴影不像我的视图那样是圆形的。阴影根本不圆

Answer 1

您不能从clipsToBounds 为true 的视图投射阴影。如果一个视图的masksToBounds 是true，那么它的clipsToBounds 是true；它们是一样的。

如果您希望阴影看起来来自剪辑视图，您需要使用 两个 视图：一个用户可以看到的视图，带有圆角，clipsToBounds 设置为 @ 987654332@，以及另一个用户无法看到的，因为它在第一个后面，也是圆角，但clipsToBounds 设置为false，到投下阴影。

class ShadowView : UIView {
    override init(frame: CGRect) {
        super.init(frame:frame)
        self.isOpaque = true
        self.backgroundColor = .black
        self.dropShadow()
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    func dropShadow() {
        self.layer.masksToBounds = false
        self.layer.cornerRadius = 15
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 3, height: 3)
        self.layer.shadowOpacity = 0.5
        self.layer.shadowRadius = 5
    }
}

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let r = CGRect(x: 100, y: 100, width: 100, height: 100)
        let v = UIImageView(frame:r)
        v.image = UIImage(named:"marsSurface.jpg")
        v.clipsToBounds = true
        v.backgroundColor = .red
        v.layer.cornerRadius = 15
        self.view.addSubview(ShadowView(frame:r))
        self.view.addSubview(v)
    }
}

请注意，这两个视图都不是另一个视图的子视图，也没有剪辑的父视图，因为 会剪辑阴影。

Answer 2

不建议尝试让单个视图同时处理圆角和阴影逻辑。创建您正在寻找的效果的最佳方法是将圆形视图与另一个拥有阴影的父视图包裹起来。

最好用游乐场来说明这一点。在操场上试用此代码。

import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
  override func loadView() {
    let view = UIView()
    view.backgroundColor = .white

    let shadowView = UIView()
    shadowView.frame = CGRect(x: 50, y: 200, width: 200, height: 100)
    shadowView.backgroundColor = nil
    shadowView.layer.shadowColor = UIColor.black.cgColor
    shadowView.layer.shadowOffset = CGSize(width: 0, height: 4.0)
    shadowView.layer.shadowRadius = 8.0
    shadowView.layer.shadowOpacity = 1

    let roundedView = UIView()
    roundedView.frame = shadowView.bounds
    roundedView.backgroundColor = .gray
    roundedView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner,.layerMaxXMinYCorner]
    roundedView.layer.cornerRadius = 10
    roundedView.layer.masksToBounds = true

    shadowView.addSubview(roundedView)
    view.addSubview(shadowView)

    view.backgroundColor = UIColor.white
    self.view = view
  }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

不要忘记在viewWillLayoutSubviews 或layoutSubviews 的阴影视图层上设置shadowPath 属性。如果此属性设置为nil，UIKit 必须执行离屏渲染来确定如何绘制阴影矩形。