Чтобы получить тени разного цвета - одну вверх-влево и одну вниз-вправо - на UIImageView
, один подход будет следующим:
- Подкласс
UIView
- Дайте ему 3
CALayer
подслоев - Тень 1 слоя
- Тень 2 слоя
- Слой изображения
Это также позволяет легко добавлять закругленные углы.
Вот пример класса. Он имеет @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)
}
}
Возможно, вы захотите изменить некоторые значения по умолчанию и, возможно, захотите добавить некоторые дополнительные свойства (например, непрозрачность тени).
Пример результатов:
