iOS fade to black at top of UIImageView

Question

I have a UITableView where my cell backgroundView is a UIImageView. I would like top of each image to fade to black so I can overlay some white text.

I have looked at some answers like this, but none seem to be working.

In tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) I have tried:

var imageView = UIImageView(image: image)

var gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = imageView.frame
gradient.colors = [UIColor.blackColor(), UIColor.clearColor()]
gradient.locations = [0.0, 0.1]
imageView.layer.insertSublayer(gradient, atIndex: 0)

cell!.backgroundView = imageView

But I see no gradient and no difference from when I remove the gradient code. Is my gradient sitting under the image?

If I replace the line imageView.layer.insertSublayer(gradient, atIndex: 0) with imageView.layer.mask = gradient then my cells are just blank and white (no image anymore).

I'm the poster of the answer you linked to. Please note that `gradient.colors` should contain `CGColor`s and not `UIColor`s. — duci9y, Aug 06 '15 at 15:37

score 9 · Accepted Answer · edited Aug 06 '15 at 17:51

9

In your gradient.colors you need to have array of CGColor, so:

gradient.colors = [UIColor.blackColor().CGColor, UIColor.clearColor().CGColor]

edited Aug 06 '15 at 17:51

Imran

12,950
8
64
79

answered Aug 06 '15 at 15:50

libec

1,555
1
10
19

Oh, he was using UIColors, wasn't he? Good catch. I missed that. – Duncan C Aug 06 '15 at 17:59

score 3 · Answer 2 · answered Aug 06 '15 at 15:47

3

I forget how the layers array is ordered. However, you should just add your gradient layer on top of your image view's layer using addSubLayer, not insertSublayer:atIndex: You want the gradient layer on top of the other layer so that it's non-opaque parts cover the image view.

answered Aug 06 '15 at 15:47

Duncan C

128,072
22
173
272

Both work for me with the CGColor fix from the accepted answer, but yes, addSubLayer is definitely more straightforward. – Imran Aug 06 '15 at 17:04

score 3 · Answer 3 · answered Nov 22 '16 at 17:15

For Swift 3.0, some slight tweaks required:

    let gradient: CAGradientLayer = CAGradientLayer()
    gradient.frame = imageView.frame
    gradient.colors = [UIColor.black.cgColor, UIColor.clear.cgColor]
    gradient.locations = [0.0, 0.1]
    imageView.layer.insertSublayer(gradient, at: 0)

iOS fade to black at top of UIImageView

3 Answers3