Member-only story
Add a Gradient Layer Below a UITableView
It is possible!
This one really annoyed me. Placing a CAGradientLayer() in the background of a UITableView should be super super easy, right? Well, not quite. Let us take a look.
Difficulty: Beginner | Easy | Normal | Challenging
This article has been developed using Xcode 12.5, and Swift 5.4
Prerequisites:
- I’d like you to know something about the UITableView created programatically
- This article goes over some aspects of the UIViewController lifecycle
The output
The idea of this project is to create a `UITableView` with a gradient right behind it. The resultant project will run in the simulator with something like the following:
It should be simple but…
The challenge
Essentially here is a simple UITableViewController which, in this case, displays the Strings “a”, “b”, “c”, “d” and “e”.
The issue is putting the CAGradientLayer into place.
If you’d like to get that natty green to yellow transition like in the image above, you might have a gradient layer expressed like the following:
Which is great. But where to put that code?
The options
Put it in viewDidLoad
You might wish to put this code in viewDidLoad as the frame is set at that point. You could do this right before setting the background colour of the table itself (which I’ve done to make sure that the gradient is displayed).
Something like:
