UIImage gradient

Question

Well, I have an UITableView with an UIImage on each cell. Everything works fine, but now I would like to change the image and make it like the right picture of this link:

http://www.cultofmac.com/wp-content/uploads/2012/06/Screen-Shot-2012-06-07-at-13.06.31.jpg

Every image has a kind of gradient I would really like to implement. Any suggestion to achieve it?

try to mask the layer of `UIImageView`, it will give you the same result if you are using the nice gradient image for masking. — holex, Mar 21 '13 at 15:09
@holex can you give me some code please, I'm quite lost in here — sergiocg90, Mar 21 '13 at 15:15
Make sure you composite a new image when putting a transparent gradient over your image, or your table will scroll like crap. — escrafford, Mar 21 '13 at 15:44
@escrafford what do you mean with composite a new image? It's true, I have implemented it, and it scrolls like crap — sergiocg90, Mar 22 '13 at 00:28
create a new image from the other two images so that there is no transparency. Every time you try scrolling, it's recalculating all the transparent portions for you. This post ought to do it: http://stackoverflow.com/questions/7313023/overlay-an-image-over-another-image-in-ios — escrafford, Mar 22 '13 at 19:02

holex · Accepted Answer · 2013-03-21T15:49:54.770

with ARC:

UIImageView *_imageView = ...; // this will be masked
UIImage *_layerImage = [UIIMage imageNamed:@"maskImage.png"]; // mask image
CALayer *_layer = [CALayer layer];
_layer.frame = CGRectMake(0.f, 0.f, _layerImage.size.width, _layerImage.size.height);
_layer.contents = (__bridge id)([_layerImage CGImage]);
[_imageView.layer setMask:_layer];

do not forget

to include the QuartzCore.framework, and
the #import <QuartzCore/QuartzCore.h> line;

the mask image will work with the alpha channel only, so where the alpha is 1.f on the image, that part of the original view will be full visible, where the alpha is 0.f that part of the original view will be full transparent.

UIImage gradient

1 Answers1