Gradient tint over a background image

How to apply a gradient tint over a background image?

Set the background image

The first step is to set the background image.  I wanted the image to cover the entire device, so scale aspect fill will be required.

self.backgroundImage = UIImageView(image: UIImage(named: "bgkMain"))
self.backgroundImage.contentMode = .scaleAspectFill
self.view.insertSubview(self.backgroundImage, at: 0)

Set the tint layer

With the background in place, next construct the tint layer.  To make the tint in you can use Cocoapods - UIGradient or by-pass that pod and go to the source and use CAGradientLayer().  In this example I'll use UIGradient, taking it that you already know how to add a pod to your app.

let bkgTint : UIView = UIView(frame: self.backgroundImage.frame)
bkgTint.backgroundColor = UIColor.fromGradientWithDirection(.topToBottom, frame: backgroundImage.frame, colors: [GRADIENT_BLACK_TOP, GRADIENT_ALPHA_NONE, GRADIENT_ALPHA_NONE])
bkgTint.layer.opacity = 1.0
self.backgroundImage.image?.withRenderingMode(UIImage.RenderingMode.automatic)
self.backgroundImage.addSubview(bkgTint)

You will see in the above code that the colours are defined as GRADIENT_BLACK_TOP and the like.  I use a separate file titled constants where common colours, fonts and images are defined.  In relation to the GRADIENT_BLACK_TOP, I defined it as

let GRADIENT_BLACK_TOP = UIColor.init(red: 37.0 / 255.0, green: 39.0 / 255.0, blue: 43.0 / 255.0, alpha: 1.0)

The aim here was to create a rich black rather than using the values 0.0 / 255.0 for red, green and blue.  The remaining two have been set to a alpha channel of zero (0.0).

Pulling it together as a function

There are several ways to set up your background as a function.  I'm going to focus on adding the new background function to a NSObject.  My set-up has a directory named Global.  In this directory there are several files, of which one is GlobalFunctions.

class GlobalFunctions: NSObject {

I have taken the code noted above as created the following function

var backgroundImage: UIImageView!

func setupBackground(vc: UIViewController, imageName: String)
{
  // set the background image
  self.backgroundImage = UIImageView(image: UIImage(named: imageName))
  self.backgroundImage.contentMode = .scaleAspectFill
  vc.view.insertSubview(self.backgroundImage, at: 0)
}

// manage the tint overlay
func setupTint(color1: UIColor, color2: UIColor, color3: UIColor)
{
  let bkgTint : UIView = UIView(frame: self.backgroundImage.frame)
  bkgTint.backgroundColor = UIColor.fromGradientWithDirection(.topToBottom, frame: backgroundImage.frame, colors: [color1, color2, color3])
  bkgTint.layer.opacity = 1.0
  self.backgroundImage.image?.withRenderingMode(UIImage.RenderingMode.automatic)
  self.backgroundImage.addSubview(bkgTint)
}

Finally calling the two functions is as the following:

// manage the background image

globalFunctions.setupBackground(vc: self, imageName: "bgkMain")
globalFunctions.setupTint(color1: GRADIENT_BLACK_TOP, color2: GRADIENT_ALPHA_NONE, color3: GRADIENT_ALPHA_NONE)
self.backgroundImage = globalFunctions.backgroundImage