Применение градиента к UIImage

Сначала давайте начнем с того, что UIColor(red:green:blue:alpha) ожидает, что параметры будут нормализованными значениями 0-1.

Так...

let startColor = UIColor(red: 30, green: 113, blue: 79, alpha: 0).cgColor

должно быть

let startColor = UIColor(red: 30/255, green: 113/255, blue: 79/255, alpha: 0).cgColor

Затем я взял ваш базовый код и скопировал его в Playground.

let image = UIImage(named: "Miho_Small.png")

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
imageView.contentMode = .scaleAspectFit
imageView.image = image

let gradient = CAGradientLayer()
gradient.frame = imageView.bounds
let startColor = UIColor(red: 30/255, green: 113/255, blue: 79/255, alpha: 0).cgColor
let endColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
gradient.colors = [startColor, endColor]
imageView.layer.insertSublayer(gradient, at: 0)

imageView

И это породило ...

Ладно, это не то, чего я ожидал, но это не совсем неудивительно. CALayer нарисован поверх изображения, потому что изображение нарисовано функцией UIViewdraw.

Итак, как мы можем это исправить? Не вдаваясь в подробности создания новых изображений и закрашивания в них градиента и изображения, вы можете использовать "фон" UIView, на который накладываются слой и UIImageView ...

let image = UIImage(named: "Miho_Small.png")

let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))
imageView.contentMode = .scaleAspectFit
imageView.image = image
imageView.backgroundColor = nil

let backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))

let gradient = CAGradientLayer()
gradient.frame = backgroundView.bounds
let startColor = UIColor(red: 30/255, green: 113/255, blue: 79/255, alpha: 0).cgColor
let endColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
gradient.colors = [startColor, endColor]
backgroundView.layer.insertSublayer(gradient, at: 0)

backgroundView.addSubview(imageView)

backgroundView

который порождает ...

И это, вероятно, больше похоже на то, чего вы пытаетесь достичь ...

:(, the two views can not be overlapped

Я не «перекрываю», так сказать, я добавляю UIImageView к backgroundView, который содержит CALayer. Помните, что представление frame относительно координатного пространства своего родителя.

Почти во всех случаях я предпочитаю использовать автоматический макет, и я предпочитаю использовать раскадровки, но на них сложно сделать int ответ, поэтому я сделал это вручную для этого примера ...

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()
    let image = UIImage(named: "Miho_Small.png")

    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
    imageView.contentMode = .scaleAspectFit
    imageView.image = image
    imageView.backgroundColor = nil

    let backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
    backgroundView.translatesAutoresizingMaskIntoConstraints = false

    let gradient = CAGradientLayer()
    gradient.frame = backgroundView.bounds
    let startColor = UIColor(red: 30/255, green: 113/255, blue: 79/255, alpha: 0).cgColor
    let endColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
    gradient.colors = [startColor, endColor]
    backgroundView.layer.insertSublayer(gradient, at: 0)

    backgroundView.addSubview(imageView)

    view.addSubview(backgroundView)

    imageView.leadingAnchor.constraint(equalTo: backgroundView.leadingAnchor).isActive = true
    imageView.trailingAnchor.constraint(equalTo: backgroundView.trailingAnchor).isActive = true
    imageView.topAnchor.constraint(equalTo: backgroundView.topAnchor).isActive = true
    imageView.bottomAnchor.constraint(equalTo: backgroundView.bottomAnchor).isActive = true

    backgroundView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    backgroundView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

    backgroundView.addConstraint(NSLayoutConstraint(item: backgroundView,
                                                    attribute: .width,
                                                    relatedBy: .equal,
                                                    toItem: nil,
                                                    attribute: .notAnAttribute,
                                                    multiplier: 1.0,
                                                    constant: 250))
    backgroundView.addConstraint(NSLayoutConstraint(item: backgroundView,
                                                    attribute: .width,
                                                    relatedBy: .equal,
                                                    toItem: backgroundView,
                                                    attribute: .height,
                                                    multiplier: 1.0,
                                                    constant: 0))


  }


}

Для чего это стоит, вы можете проверить проект, который я использовал для тестирования кода из GitHub - TestCALayerGradientAndImageOverlay