Swift - 为 imageView 创建具有 2 种不同颜色的阴影

Swift - Creating shadow with 2 different colours for imageView

我想知道如何为 imageView 创建具有两种不同颜色的阴影。例如,顶部和左侧的颜色与 imageView 的右侧和底部的颜色不同。

要获得不同颜色的阴影 - 一个 up-left 和一个 down-right - 在 UIImageView 上,一种方法是:

  • 亚class UIView
  • 给它 3 CALayer 个子层
    • 阴影1层
    • 阴影2层
    • 图像层

这也使得添加圆角变得容易。

这是一个示例 class。它具有 @IBInspectable 属性来设置图像、角半径、阴影颜色和阴影偏移。它还被标记为 @IBDesignable,因此您可以在 Storyboard / Interface Builder 中设计时查看它的外观:

@IBDesignable
class DoubleShadowRoundedImageView: UIView {
    @IBInspectable var image: UIImage? = nil {
        didSet {
            imageLayer.contents = image?.cgImage
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0

    @IBInspectable var shad1X: CGFloat = 0.0
    @IBInspectable var shad1Y: CGFloat = 0.0

    @IBInspectable var shad2X: CGFloat = 0.0
    @IBInspectable var shad2Y: CGFloat = 0.0

    @IBInspectable var shad1Color: UIColor = UIColor.blue
    @IBInspectable var shad2Color: UIColor = UIColor.red

    var imageLayer: CALayer = CALayer()
    var shadowLayer1: CALayer = CALayer()
    var shadowLayer2: CALayer = CALayer()

    var shape: UIBezierPath {
        return UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius)
    }

    var shapeAsPath: CGPath {
        return shape.cgPath
    }

    var shapeAsMask: CAShapeLayer {
        let s = CAShapeLayer()
        s.path = shapeAsPath
        return s
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        clipsToBounds = false
        backgroundColor = .clear

        self.layer.addSublayer(shadowLayer1)
        self.layer.addSublayer(shadowLayer2)
        self.layer.addSublayer(imageLayer)

        imageLayer.frame = bounds

        imageLayer.mask = shapeAsMask

        shadowLayer1.frame = bounds
        shadowLayer2.frame = bounds

        shadowLayer1.shadowPath = (image == nil) ? nil : shapeAsPath
        shadowLayer1.shadowOpacity = 0.80

        shadowLayer2.shadowPath = (image == nil) ? nil : shapeAsPath
        shadowLayer2.shadowOpacity = 0.80

        shadowLayer1.shadowColor = shad1Color.cgColor
        shadowLayer2.shadowColor = shad2Color.cgColor

        shadowLayer1.shadowOffset = CGSize(width: shad1X, height: shad1Y)
        shadowLayer2.shadowOffset = CGSize(width: shad2X, height: shad2Y)

    }
}

您可能想要更改一些默认值,并且您可能想要添加一些额外的属性(例如阴影不透明度)。

示例结果: