Make dynamically loaded UITableViewCell ImageView change color when selected

Question

I am hoping this is an easy question and I am just missing something obvious. My table cells - ScheduleCell are created dynamically. All the content comes from a parsed JSON payload. The cell's images - cellImage are dynamic as well and implemented using the SDWebImage framework. When a cell is selected the cell turns to gray just fine but the images don't. I would like to make it so when the cell is selected the images change color as well. If I could change the tint of the images that would be great? Is there an easy way to do this?

My cells are created pretty straight forward:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{    
    ScheduleCell *cell = (ScheduleCell *)[tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath];
    if (cell == nil)
    {
        cell = [[ScheduleCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }

    NSDictionary *event = self.schedule[self.sections[[indexPath section]]][indexPath.row];
    cell.dayLabel.text          = [event objectForKey:@"start_date"];
    cell.nameLabel.text         = [event objectForKey:@"name"];
    cell.dayOfWeekLabel.text    = [event objectForKey:@"start_day"];
    cell.monthLabel.text        = [event objectForKey:@"monthShort"];

    [cell.cellImage setFrame:CGRectMake(91, 24, 230, 85)];
    [cell.cellImage setImageWithURL:[NSURL URLWithString:[[event objectForKey:@"pic_cover"] objectForKey:@"source"]] placeholderImage:[UIImage imageNamed:@"placeholder230x85.png"] usingActivityIndicatorStyle:(UIActivityIndicatorViewStyle)UIActivityIndicatorViewStyleGray];
    cell.backgroundColor = [UIColor colorWithRed:0.85 green:0.85 blue:0.85 alpha:1.0];

    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 110;
}

This is how my cells look now when they are selected:

enter image description here

Here is a screen shot of my IB settings:

enter image description here

That's would be the easiest fix but I don't always have control over what types images are uploaded to the server. Some are always going to be JPEGs with white backgrounds around the logos. — denvdancsk, Dec 05 '13 at 18:25
yes, PNG images needed since jpg don't have alpha channel. or if jps is the only option then you can try `imageView.opaque = NO;` or `setAlpha` to it or something (_not sure_) — staticVoidMan, Dec 05 '13 at 18:25

score 1 · Answer 1 · answered Dec 05 '13 at 18:27

1

A simple way to do this would be to add a UIView as a subview of the image view, and give it an alpha value less than one, so your image shows through. You can make that any color you want to add some tint to your image.

answered Dec 05 '13 at 18:27

rdelmar

103,982
12
207
218

That's kind of what I was thinking but I was unsure about how to implement it properly because I would have to disable user interactions on the UIView, yet still have it's color change when the cell is selected. – denvdancsk Dec 05 '13 at 18:30
1

You'd have to update the color change in your UITableViewCell subclass's `setSelected:` and `setHighlighted:` methods. – Aaron Brager Dec 05 '13 at 18:35
1

The problem with this approach is that it will dim the image on selection, while none of the other labels / text views are dimmed on selection. – Aaron Brager Dec 05 '13 at 18:36
@DJSK : or simply overlay a `UIView` with alpha set to 0 and `setBackgroundColor` to `lightGray` and when you select the cell, setAlpha to `0.5` or something. you should disable userInteraction on the `UIView` and `UIImageView` so that the `touchEvent` goes to the cell directly – staticVoidMan Dec 05 '13 at 18:45
Yeah I was hoping to keep the image from dimming if at all possible. That's why I was hoping to just be able to add a tint to it. Is there a way to use a blend mode on the UIView overlay solution? – denvdancsk Dec 05 '13 at 18:54
@DJSK, I don't think so. You have to do that on the image itself. If the large white areas around your Jaguars image are transparent, then you can just add a background color to your image view instead of using an overlay. – rdelmar Dec 05 '13 at 18:57

score 0 · Answer 2 · edited May 23 '17 at 10:25

The simplest answer is to render PNGs with transparent backgrounds and get those from your API.

If that doesn't work, you can use Quartz 2D image masks to make the white part transparent, but this will also make the inside of the Jacksonville Jaguar transparent (if it's exactly the same white color; I haven't checked).

Here's a Stack Overflow question and answer that should help with this. (It's not hard to try out and see if it works for your application.)

Make dynamically loaded UITableViewCell ImageView change color when selected

2 Answers2