How to add an alpha layer over part of UIImage in drawRect? - ios

Question

I am completely new to implementing custom drawRect method (and Core Graphics) but am doing so to improve the scrolling performance for my UITableView. Please do let me know if I am doing anything stupid.
In my cell, I have a UIImage and over the bottom part of it I would like to print the caption of the image. However, in order for the caption text to show up clearly regardless of the image , I would like to have a black rectangle with opacity of ~75% on top of the UIImage and below the caption text.
I tried the following
[self.picture drawAtPoint:point];
[[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.75] setFill];
UIRectFill(CGRectMake(rect));
but that resulting fill actually eat into the UIImage (excuse my poor description sorry) and the part showing below the slightly transparent fill is the background of my UITableView...
I guess I could have made another image for the rectangle and then draw it on top of the self.picture but I am wondering whether this is an easier way to use UIRectFill to achieve this instead...
as mentioned, I am completely new to Core Graphics so any hints would be much appreciated. thanks in advance!
Also, I have a second question... the dimension (in pixel) of the image downloaded is twice that of the rect (in points) that it will fit in, to account for retina display. However, it is now currently going over that rect, even on an iPhone4 device... How can I fix that (including for pre-iPhone4 devices too?)

Answer 1

I don't do much custom drawRect stuff, so I'll defer that portion of the question to someone else, but usually tableview performance issues are solved much more easily by moving the expensive calculations into a background queue and then asynchronously updating cell from the main queue when that background operation is done. Thus, something like:
First, define an operation queue property for the tableview:
#property (nonatomic, strong) NSOperationQueue *queue;
Then in viewDidLoad, initialize this:
self.queue = [[NSOperationQueue alloc] init];
self.queue.maxConcurrentOperationQueue = 4;
And then in cellForRowAtIndexPath, you could then:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"MyCellIdentifier";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
// Do the quick, computationally inexpensive stuff first, stuff here.
// Examples might include setting the labels adding/setting various controls
// using any images that you might already have cached, clearing any of the
// image stuff you might be recalculating in the background queue in case you're
// dealing with a dequeued cell, etc.
// Now send the slower stuff to the background queue.
[self.queue addOperationWithBlock:^{
// Do the slower stuff (like complex image processing) here.
// If you're doing caching, update the cache here, too.
// When done with the slow stuff, send the UI update back
// to the main queue...
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
// see if the cell is still visible, and if so ...
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
if (cell)
{
// now update the UI back in the main queue
}
}];
}];
return cell;
}
You can optimize this further by making sure that you cache the results of your computationally-expensive stuff into something like a NSCache, and perhaps to Documents or elsewhere as well, thus as you can optimize how often that complex stuff has to be done and really optimize the UI.
And, by the way, when you do that, you can now just have your UILabel (with backgroundColor using that UIColor for black with 0.75 alpha) on top of the the UIImageView, and iOS takes care of it for you. As easy as it gets.
On the final question about image resolution, you can either:
use the view's contentScaleFactor to figure out whether you're dealing with retina or not and resize the thumbnail image accordingly; or
just use the imageview's contentMode of UIViewContentModeScaleAspectFill which will make sure that your thumbnail images are rendered correctly regardless ... if you're using small thumbnail images (even 2x images), the performance is generally fine.

Answer 2

this is the right way to do it, using the kCGBlendModeNormal option, per another stackoverflow question
[[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.75] setFill];
UIRectFillUsingBlendMode(rect, kCGBlendModeNormal);