Блог

Мне интересно, как создать тень с двумя разными цветами для просмотра изображений. Например, верхняя и левая стороны имеют другой цвет, чем правая и нижняя стороны изображения.

Чтобы получить различные цветные тени — одну вверх-влево , а другую вниз-вправо — при UIImageView одном подходе было бы:

• Подкласс UIView
• Дайте ему 3 CALayer подслоя
  • Тень 1 слой
  • Тень 2 слоя
  • Слой изображения

Это также облегчает добавление закругленных углов.

Вот примерный класс. Он имеет @IBInspectable свойства для настройки изображения, радиуса закругления, цветов теней и смещений теней. Он также помечен @IBDesignable , чтобы вы могли видеть, как он выглядит при проектировании в раскадровке / построителе интерфейсов:

 @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)

    }
}
 

Вероятно, вам захочется изменить некоторые значения по умолчанию, и вы, возможно, захотите добавить некоторые дополнительные свойства (например, непрозрачность тени).

Примеры результатов: