Applying gradient to UIImage - ios

Question

I want to apply color gradient(from top to bottom) to an image named 'newspaperImage'. This is my code using swift language.
#IBOutlet weak var newspaperImage: UIImageView!
func imageGradient(){
let newspaperview = UIView(frame: newspaperImage.frame)
let gradient = CAGradientLayer()
gradient.frame = newspaperview.bounds
let startColor = UIColor(red: 30, green: 113, blue: 79, alpha: 0).cgColor
let endColor = UIColor(red: 0, green: 0, blue: 0, alpha: 1).cgColor
gradient.colors = [startColor, endColor]
newspaperview.layer.insertSublayer(gradient, at: 0)
newspaperImage.addSubview(newspaperview)
newspaperImage.bringSubviewToFront(newspaperview)
}
override func viewDidLoad() {
super.viewDidLoad()
imageGradient()
}
After running, I find it doesn't work at all. Where's the problem?

Answer 1

First lets start with UIColor(red:green:blue:alpha) expects the parameters to be normalised values of 0-1.
So...
let startColor = UIColor(red: 30, green: 113, blue: 79, alpha: 0).cgColor
should be
let startColor = UIColor(red: 30/255, green: 113/255, blue: 79/255, alpha: 0).cgColor
Next, I took your basic code and dumped into 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
And it generated...
Okay, that's not what I was expecting, but it's not entirely unsurprising. The CALayer is been painted over the top of the image, because the image is been painted by the UIView's draw function.
Okay, so how can we fix it? With out going to the extend of making a new images and painting the gradient and image into it, you could make use of a "background" UIView, onto which the layer and UIImageView are applied...
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
which generates...
And, that's probably more along the lines of what you're trying to achieve...at a guess
:(, the two views can not be overlapped
I don't "overlap", so to speak, I add the UIImageView onto the backgroundView, which contains the CALayer. Remember, the view's frame is relative to it's parent's coordinate space.
In almost all cases, I prefer to use auto layout, and I prefer to use story boards, but those are difficult to make int an answer, so I've done it by hand for this example...
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))
}
}
For what it's worth, you can checkout the project I used to test the code from GitHub - TestCALayerGradientAndImageOverlay