Nowadays CAGradientLayer is built-in to iOS.
It’s this easy:
For years now you simply do this:
class GlowBall: UIView {
private lazy var pulse: CAGradientLayer = {
let l = CAGradientLayer()
l.type = .radial
l.colors = [ UIColor.red.cgColor,
UIColor.yellow.cgColor,
UIColor.green.cgColor,
UIColor.blue.cgColor]
l.locations = [ 0, 0.3, 0.7, 1 ]
l.startPoint = CGPoint(x: 0.5, y: 0.5)
l.endPoint = CGPoint(x: 1, y: 1)
layer.addSublayer(l)
return l
}()
override func layoutSubviews() {
super.layoutSubviews()
pulse.frame = bounds
pulse.cornerRadius = bounds.width / 2.0
}
}
The key lines are:
l.colors = [ UIColor.red.cgColor,
UIColor.yellow.cgColor,
UIColor.green.cgColor,
UIColor.blue.cgColor]
l.locations = [ 0, 0.3, 0.7, 1 ]
Note that you can change the “stretch” as you wish …
l.locations = [ 0, 0.1, 0.2, 1 ]
Use any colors you like
l.colors = [ UIColor.systemBlue.cgColor,
UIColor.systemPink.cgColor,
UIColor.systemBlue.cgColor,
UIColor.systemPink.cgColor,
UIColor.systemBlue.cgColor,
UIColor.systemPink.cgColor,
UIColor.systemBlue.cgColor,
UIColor.systemPink.cgColor]
l.locations = [ 0,0.1,0.2,0.3,0.4,0.5,0.6,1 ]
It’s really that easy now.
Very useful trick:
Say you want yellow, with a blue band at 0.6:
l.colors = [ UIColor.yellow.cgColor,
UIColor.blue.cgColor,
UIColor.yellow.cgColor]
l.locations = [ 0, 0.6, 1 ]
That works fine.
# yellow...
# blue...
# yellow...
But usually you do this:
# yellow...
# yellow...
# blue...
# yellow...
# yellow...
Notice there are TWO of the yellows at each end …
l.colors = [ UIColor.yellow.cgColor,
UIColor.yellow.cgColor,
UIColor.blue.cgColor,
UIColor.yellow.cgColor,
UIColor.yellow.cgColor]
In this way, you can control “how wide” the blue band is:
In this example: the blue band will be narrow and sharp:
l.locations = [ 0, 0.58, 0.6, 0.68, 1 ]
In this example the blue band will be broad and soft:
l.locations = [ 0, 0.5, 0.6, 0.7, 1 ]
That is really the secret to how you control gradients, and get the look you want.
How to use …
Notice this is – very simply – a UIView !!
class GlowBall: UIView { ...
Thus simply
-
In storyboard, place a UIView where you want
-
In storyboard, change the class to “GlowBall” instead of UIView
You’re done!