How to change color of UITableViewCell when selecting?

Question

I have a menu like this:

The normal (unselected) state for each cell is the image, the selected state is also an image (it looks like blue by default). However, I would like to add an additional third image, so when the user selects a cell, he briefly changes to this third color before going blue (selected).

This is my code:

(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { [tableView setBackgroundColor:[UIColor clearColor]]; NSString *cellIdentifier = @"MenuItemCell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier]; } UIImage *cellBackgroundNormal = [UIImage imageNamed:@"cell_menu_normal"]; UIImage *cellBackgroundSelected = [UIImage imageNamed:@"cell_menu_selected"]; UIImageView *cellBackgroundView = [[UIImageView alloc] initWithImage:cellBackgroundNormal]; UIImageView *cellBackgroundSelectedView = [[UIImageView alloc] initWithImage:cellBackgroundSelected]; cell.backgroundView = cellBackgroundView; cell.selectedBackgroundView = cellBackgroundSelectedView; [cell.textLabel setBackgroundColor:[UIColor clearColor]]; [cell.textLabel setTextColor:[UIColor whiteColor]]; [cell.textLabel setFont:[UIFont boldSystemFontOfSize:17.0]]; cell.textLabel.text = [self.menuItems objectAtIndex:indexPath.row]; return cell; } 

As you can see, at the moment I have only two states. I do not see how I can imagine some kind of cell.hoveredBackgroundView for the third image. If anyone can help me realize this, I would really appreciate it.

Answer 1

iOS 6.0 and later

 - (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath { return YES; } - (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath { // Add your Colour. CustomCell *cell = (CustomCell *)[tableView cellForRowAtIndexPath:indexPath]; [self setCellColor:[UIColor whiteColor] ForCell:cell]; //highlight colour } - (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath { // Reset Colour. CustomCell *cell = (CustomCell *)[tableView cellForRowAtIndexPath:indexPath]; [self setCellColor:[UIColor colorWithWhite:0.961 alpha:1.000] ForCell:cell]; //normal color } - (void)setCellColor:(UIColor *)color ForCell:(UITableViewCell *)cell { cell.contentView.backgroundColor = color; cell.backgroundColor = color; } 

Custom UITableViewCell

 - (void)setSelected:(BOOL)selected animated:(BOOL)animated { [super setSelected:selected animated:animated]; UIView * selectedBackgroundView = [[UIView alloc] init]; [selectedBackgroundView setBackgroundColor:[UIColor colorFromHexString:@"5E6073"]]; // set color here [self setSelectedBackgroundView:selectedBackgroundView]; } 

Answer 2

You can also use UIAppearance as follows:

 UIView *selectionView = [UIView new]; selectionView.backgroundColor = [UIColor redColor]; [[UITableViewCell appearance] setSelectedBackgroundView:selectionView]; 

This applies to all instances of UITableViewCell or any of its subclasses you may have. Just make sure the selectionStyle property of your cell is not set to UITableViewCellSelectionStyleNone .

Answer 3

iOS 8.0 (and later) using Swift

Swift 2

 override func tableView(tableView: UITableView, shouldHighlightRowAtIndexPath indexPath: NSIndexPath) -> Bool { return true } override func tableView(tableView: UITableView, didHighlightRowAtIndexPath indexPath: NSIndexPath) { var cell = tableView.cellForRowAtIndexPath(indexPath) cell?.contentView.backgroundColor = UIColor.orangeColor() cell?.backgroundColor = UIColor.orangeColor() } override func tableView(tableView: UITableView, didUnhighlightRowAtIndexPath indexPath: NSIndexPath) { var cell = tableView.cellForRowAtIndexPath(indexPath) cell?.contentView.backgroundColor = UIColor.blackColor() cell?.backgroundColor = UIColor.blackColor() } 

Swift 3

 override func tableView(_ tableView: UITableView, shouldHighlightRowAt indexPath: IndexPath) -> Bool { return true } override func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) { let cell = tableView.cellForRow(at: indexPath) cell?.contentView.backgroundColor = UIColor.orange cell?.backgroundColor = UIColor.orange } override func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) { let cell = tableView.cellForRow(at: indexPath) cell?.contentView.backgroundColor = UIColor.black cell?.backgroundColor = UIColor.black } 

Answer 4

Easier than accepted answer:

In a subclass of UITableViewCell:

In awakeFromNib or init :

self.selectionStyle = UITableViewCellSelectionStyleNone;

Then:

 - (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated { [super setHighlighted:highlighted animated:animated]; if (highlighted) { self.backgroundColor = [UIColor yourHighlightColor]; } else { self.backgroundColor = [UIColor yourNormalColor]; } } 

Answer 5

Try this in a custom cell -

 - (void)awakeFromNib { UIView *selectedBackgroundView = [[UIView alloc] initWithFrame:self.bounds]; selectedBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; selectedBackgroundView.backgroundColor = [UIColor colorWithRed:246.0/255.0 green:95.0/255.0 blue:22.0/255.0 alpha:1.0]; self.selectedBackgroundView = selectedBackgroundView; } 

Answer 6

Swift:

 override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { tableView.deselectRowAtIndexPath(indexPath, animated: true) } override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { let selectionColor = UIView() as UIView selectionColor.layer.borderWidth = 1 selectionColor.layer.borderColor = UIColor.blueColor().CGColor selectionColor.backgroundColor = UIColor.blueColor() cell.selectedBackgroundView = selectionColor } 

Swift 4:

 override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { tableView.deselectRow(at: indexPath, animated: true) } override func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) { let selectionColor = UIView() as UIView selectionColor.layer.borderWidth = 1 selectionColor.layer.borderColor = UIColor.blue.cgColor selectionColor.backgroundColor = UIColor.blue cell.selectedBackgroundView = selectionColor } 

Answer 7

Based on Milan Chermak's answer, you can use UIAppearance .

In Swift 1.1 / 2.0 :

 let selectionView = UIView() selectionView.backgroundColor = UIColor.redColor() UITableViewCell.appearance().selectedBackgroundView = selectionView 

Answer 8

Using Objective-C, change the selected cell background color to a default value. No need to create custom cells.

If you want to change only the selected cell color, you can do it. Remember that for this in the Storyboard (or XIB file) you must select the selected background color other than None. Just add the following code to the UITableView Delegate method: tableView cellForRowAtIndexPath:

 UIView *bgColor = [[UIView alloc] init]; bgColor.backgroundColor = [UIColor yellowColor]; [cell setSelectedBackgroundView:bgColor]; 

Answer 9

Custom UITableViewCell Swift 3.0

 override func awakeFromNib() { super.awakeFromNib() let selectedBackgroundView = UIView(); selectedBackgroundView.backgroundColor = UIColor.lightGray; self.selectedBackgroundView = selectedBackgroundView; } 

Answer 10

Add the following code to the cellForRowAtIndexPath method

 var cell=tableView.dequeueReusableCellWithIdentifier("cell")! var viewBG=UIView(frame: CGRectMake(0,0,self.view.frame.size.width,50)) viewBG.backgroundColor=UIColor(colorLiteralRed: 71.0/255.0, green: 121.0/255.0, blue: 172.0/255.0, alpha: 1) cell.selectedBackgroundView=viewBG 

Answer 11

For quick 3

 self.tableView.reloadData() let selectedCell = tableView.cellForRow(at: indexPath) selectedCell?.contentView.backgroundColor = UIColor.red 

Answer 12

I end up with the following code.

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { // UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:[cellIdArray objectAtIndex:indexPath.row] forIndexPath:indexPath]; // Configure the cell... cell.backgroundView = [[UIImageView alloc] init] ; cell.selectedBackgroundView =[[UIImageView alloc] init]; UIImage *rowBackground; UIImage *selectionBackground; rowBackground = [UIImage imageNamed:@"cellBackgroundDarkGrey.png"]; selectionBackground = [UIImage imageNamed:@"selectedMenu.png"]; ((UIImageView *)cell.backgroundView).image = rowBackground; ((UIImageView *)cell.selectedBackgroundView).image = selectionBackground; return cell; } 

Answer 13

You can create a custom UITableViewCell into which you add a UIButton with a cell size. Then you can easily create custom methods for the TouchDown (hover) and TouchUpInside events for UIButton and set the background.

 - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self) { cellButton = [[UIButton alloc] initWithFrame:self.contentView.frame]; UIImage *cellBackgroundNormal = [UIImage imageNamed:@"cell_menu_normal"]; UIImageView *cellBackgroundView = [[UIImageView alloc] initWithImage:cellBackgroundNormal]; self.backgroundView = cellBackgroundView; [cellButton addTarget:self action:@selector(hoverCell) forControlEvents:UIControlEventTouchDown]; [cellButton addTarget:self action:@selector(tapCell) forControlEvents:UIControlEventTouchUpInside]; } return self; } - (void)hoverCell { UIImage *cellBackgroundHover = [UIImage imageNamed:@"cell_menu_third_image"]; UIImageView *cellBackgroundHoverView = [[UIImageView alloc] initWithImage:cellBackgroundHover]; self.backgroundView = cellBackgroundHoverView; } - (void)tapCell { UIImage *cellBackgroundSelected = [UIImage imageNamed:@"cell_menu_selected"]; UIImageView *cellBackgroundSelectedView = [[UIImageView alloc] initWithImage:cellBackgroundSelected]; self.backgroundView = cellBackgroundSelectedView; } 

Answer 14

Can you enter a timer to set the desired time (for example, 1/2 s, if I understand) between two different background colors? But you could already think about it: /