59

Does anyone know how to change the background color of a cell using UITableViewCell, for each selected cell? I created this UITableViewCell inside the code for TableView.

jww
  • 97,681
  • 90
  • 411
  • 885
sg.
  • 637
  • 1
  • 6
  • 5

30 Answers30

96

Changing the property selectedBackgroundView is correct and the simplest way. I use the following code to change the selection color:

// set selection color
UIView *myBackView = [[UIView alloc] initWithFrame:cell.frame];
myBackView.backgroundColor = [UIColor colorWithRed:1 green:1 blue:0.75 alpha:1];
cell.selectedBackgroundView = myBackView;
[myBackView release];
Chilly Zhong
  • 16,763
  • 23
  • 77
  • 103
  • 19
    Yeah, but this does not look good in UITableViewStyleGrouped when selecting first or last cell in the section. – manicaesar May 30 '11 at 08:06
  • 1
    @manicaesar but it still works on iOS7+ :) There are no more rounded corners in `UITableViewStyleGrouped` mode – k06a Aug 28 '14 at 19:15
40

I finally managed to get this to work in a table view with style set to Grouped.

First set the selectionStyle property of all cells to UITableViewCellSelectionStyleNone.

cell.selectionStyle = UITableViewCellSelectionStyleNone;

Then implement the following in your table view delegate:

static NSColor *SelectedCellBGColor = ...;
static NSColor *NotSelectedCellBGColor = ...;

- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSIndexPath *currentSelectedIndexPath = [tableView indexPathForSelectedRow];
    if (currentSelectedIndexPath != nil)
    {
        [[tableView cellForRowAtIndexPath:currentSelectedIndexPath] setBackgroundColor:NotSelectedCellBGColor];
    }

    return indexPath;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [[tableView cellForRowAtIndexPath:indexPath] setBackgroundColor:SelectedCellBGColor];
}

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (cell.isSelected == YES)
    {
        [cell setBackgroundColor:SelectedCellBGColor];
    }
    else
    {
        [cell setBackgroundColor:NotSelectedCellBGColor];
    }
}
Sam
  • 6,240
  • 4
  • 42
  • 53
loomer
  • 2,017
  • 1
  • 17
  • 11
  • 1
    this is the best answer! – Duck Nov 13 '13 at 23:50
  • 1
    I am sorry to inform you, but your solution does not work, xcode 5, iOS7 – SAFAD Mar 11 '14 at 22:24
  • @SAFAD Just implemented this under iOS7/Xcode 5 for a Plain UITableView. I had to employ additional logic in `cellForRowAtIndexPath:` to handle displaying the selected cell properly after the cell had been scrolled back into view, so that may be your problem. – Evan R Mar 17 '14 at 22:46
  • 1
    Don't you also need to override didDeselectRowAtIndexPath? – Sam Jun 13 '14 at 17:21
  • @EvanR What kind of additional logic did you add? – Keeano Nov 04 '14 at 22:16
  • @Keeano It was a while ago, but I believe in `tableView:cellForRowAtIndexPath:` I added something along the lines of `if ([indexPath isEqual:[tableView indexPathForSelectedRow]]) { cell.selected = YES; } else { cell.selected = NO; } – Evan R Nov 05 '14 at 02:22
  • willDisplayCell is helped for my default selected cell of tableview for changing text color when default selected cell is selected. – user3182143 Jul 15 '15 at 07:53
  • This answer should be accepted, I just used it today and it worked for me – samouray Dec 16 '17 at 18:47
21

SWIFT 4, XCODE 9, IOS 11

After some testing this WILL remove the background color when deselected or cell is tapped a second time when table view Selection is set to "Multiple Selection". Also works when table view Style is set to "Grouped".

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if let cell = tableView.cellForRow(at: indexPath) {
            cell.contentView.backgroundColor = UIColor.darkGray
        }
    }
}

Note: In order for this to work as you see below, your cell's Selection property can be set to anything BUT None.

How it looks with different options

Style: Plain, Selection: Single Selection

Single Selection

Style: Plain, Selection: Multiple Selection

Multiple Selection

Style: Grouped, Selection: Multiple Selection

Grouped Multiple Selection

Bonus - Animation

For a smoother color transition, try some animation:

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        if let cell = tableView.cellForRow(at: indexPath) {
            UIView.animate(withDuration: 0.3, animations: {
                cell.contentView.backgroundColor = UIColor.darkGray
            })
        }
    }
}

Animated color transition

Bonus - Text and Image Changing

You may notice the icon and text color also changing when cell is selected. This happens automatically when you set the UIImage and UILabel Highlighted properties

UIImage

  1. Supply two colored images:

Two colored images

  1. Set the Highlighted image property:

Highlighted property

UILabel

Just supply a color for the Highlighted property:

Highlighted Color

Community
  • 1
  • 1
Mark Moeykens
  • 15,915
  • 6
  • 63
  • 62
  • thanks for the Bonus - Text and Image Changing. First time to know about label highlighted usage – Musa almatri Mar 28 '19 at 14:35
  • 1
    I have plain style, and I have Single selection but I have custom cell and the behavior is like when I click on item, it gets colored background but when I click another cell, the background of first item never goes back. Why it is so?? – A.s.ALI May 16 '19 at 08:11
  • @MarkMoeykens when I implemented the above with each one of the storyboard settings, the cell did not "unselect" after I press on it a second time ... even though I have a block of code explicity setting its color to white – xiaolingxiao Apr 29 '20 at 22:00
  • I am looking for OSX solution. I am able to change cell colour but not able to hide/unhide button inside cells. Any help? – Lakshmi Yadav Jan 12 '21 at 08:37
19
// animate between regular and selected state
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {

    [super setSelected:selected animated:animated];

    if (selected) {
        self.backgroundColor = [UIColor colorWithRed:234.0f/255 green:202.0f/255 blue:255.0f/255 alpha:1.0f];
    }
    else {
        self.backgroundColor = [UIColor clearColor];
    }
}
Navnath Godse
  • 2,233
  • 2
  • 23
  • 32
PK86
  • 1,218
  • 2
  • 14
  • 25
  • I tried doing this but setting `self.backgroundView` to alternating images for either scenario—was not able to get it to work. I even tried putting `self.selectedBackgroundView` in `if (selected)` and `nil`ing each view out first. Trying to figure out what I'm missing here! Ultimately had to do it by changing `self.backgroundView` in the `if` statement and calling `self.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:]]` in the `else` statement. – Evan R Mar 19 '14 at 18:47
12
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

     UITableViewCell *cell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
     cell.contentView.backgroundColor = [UIColor yellowColor];

}
Morwenn
  • 21,684
  • 12
  • 93
  • 152
MD SHAHIDUL ISLAM
  • 14,325
  • 6
  • 82
  • 89
  • 3
    The problem with this is that the other rows that were previously selected would still have that new background color. – vnchopra Aug 14 '13 at 01:16
  • @vnchopra, I think this may have changed since 2013 but I just tried this and it does get removed when you select another cell. (Xcode 9, iOS 11, Swift 4) – Mark Moeykens Feb 28 '18 at 04:16
11

I created UIView and set the property of cell selectedBackgroundView:

UIView *v = [[UIView alloc] init];
v.backgroundColor = [UIColor redColor];
cell.selectedBackgroundView = v;
k06a
  • 17,755
  • 10
  • 70
  • 110
Yerkezhan
  • 481
  • 5
  • 9
  • For a solution that works (properly) with `UIAppearance` for iOS 7 (and higher?) using its default `selectedBackgroundView` to set the color, take a look at my [answer](http://stackoverflow.com/a/32208591/2471006) to similar question. – anneblue Aug 26 '15 at 10:29
7

If you're talking about selected cells, the property is -selectedBackgroundView. This will be shown when the user selects your cell.

Steven Canfield
  • 7,312
  • 5
  • 35
  • 28
6

I have a highly customized UITableViewCell. So I implemented my own cell selection.

cell.selectionStyle = UITableViewCellSelectionStyleNone;

I created a method in my cell's class:

- (void)highlightCell:(BOOL)highlight
{
    if (highlight) {
        self.contentView.backgroundColor = RGB(0x355881);
        _bodyLabel.textColor = RGB(0xffffff);
        _fromLabel.textColor = RGB(0xffffff);
        _subjectLabel.textColor = RGB(0xffffff);
        _dateLabel.textColor = RGB(0xffffff);
    }
    else {
        self.contentView.backgroundColor = RGB(0xf7f7f7);;
        _bodyLabel.textColor = RGB(0xaaaaaa);
        _fromLabel.textColor = [UIColor blackColor];
        _subjectLabel.textColor = [UIColor blackColor];
        _dateLabel.textColor = RGB(0x496487);
    }
}

In my UITableViewController class in ViewWillAppear added this:

NSIndexPath *tableSelection = [self.tableView indexPathForSelectedRow];
SideSwipeTableViewCell *cell = (SideSwipeTableViewCell*)[self.tableView cellForRowAtIndexPath:tableSelection];
[cell highlightCell:NO];

In didSelectRow added this:

SideSwipeTableViewCell *cell = (SideSwipeTableViewCell*)[self.tableView cellForRowAtIndexPath:indexPath];
[cell highlightCell:YES];
Denis Kutlubaev
  • 15,320
  • 6
  • 84
  • 70
6

I've had luck with the following:

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    bool isSelected = // enter your own code here
    if (isSelected)
    {
        [cell setBackgroundColor:[UIColor colorWithRed:1 green:1 blue:0.75 alpha:1]];
        [cell setAccessibilityTraits:UIAccessibilityTraitSelected];
    }
    else
    {
        [cell setBackgroundColor:[UIColor clearColor]];
        [cell setAccessibilityTraits:0];
    }
}
sehugg
  • 3,615
  • 5
  • 43
  • 60
6

I was able to solve this problem by creating a subclass of UITableViewCell and implementing the setSelected:animated: method

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
    if(selected) {
        [self setSelectionStyle:UITableViewCellSelectionStyleNone];
        [self setBackgroundColor:[UIColor greenColor]];
    } else {
        [self setBackgroundColor:[UIColor whiteColor]];
    }
}

The trick was setting the

cell.selectionStyle = UITableViewCellSelectionStyleDefault;

in the implementing view controller and then in the tableViewCell setting it as

[self setSelectionStyle:UITableViewCellSelectionStyleNone];

Hope this helps. :)

Yurii
  • 4,811
  • 7
  • 32
  • 41
illuminate
  • 165
  • 2
  • 10
  • I confirm this works well. In my custom cell subclass initWithCoder I set the selection style to none and then customise the colours etc in setSelected based upon if it is selected. – biddster Dec 10 '14 at 09:45
6

For iOS7+ and if you are using Interface Builder then subclass your cell and implement:

Objective-C

- (void)awakeFromNib {
    [super awakeFromNib];
    // Default Select background
    UIView *v = [[UIView alloc] init];
    v.backgroundColor = [UIColor redColor];
    self.selectedBackgroundView = v;
}

Swift 2.2

override func awakeFromNib() {
    super.awakeFromNib()
    // Default Select background
    self.selectedBackgroundView = { view in
        view.backgroundColor = .redColor()
        return view
    }(UIView())
}
ricardopereira
  • 11,118
  • 5
  • 63
  • 81
Peter Lapisu
  • 19,915
  • 16
  • 123
  • 179
5

This worked perfectly with grouped calls: Implement a custom subclass of UITableViewCell

This will respect corners and such...

- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
    [super setSelected:selected animated:animated];

    if(selected)
        [self setBackgroundColor:[UIColor colorWithRed:(245/255.0) green:(255/255.0) blue:(255/255.0) alpha:1]];
    else
        [self setBackgroundColor:[UIColor whiteColor]];

}
Navnath Godse
  • 2,233
  • 2
  • 23
  • 32
theprojectabot
  • 1,163
  • 12
  • 19
  • 1
    Thanks this works, but don't forget to set UITableViewCell "Selection" to "None" instead of default, otherwise the default gray background would keep showing up. – Benjamin Piette Oct 21 '14 at 11:21
5

If you just want to remove the grey background color do this :

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
     [[tableView cellForRowAtIndexPath:indexPath] setSelectionStyle:UITableViewCellSelectionStyleNone];
}     
Coolsinus
  • 404
  • 4
  • 4
4

The default style is gray and it destroys the colors of the cell if it was done programmatically. You can do this to avoid that. (in Swift)
cell.selectionStyle = .None

726a
  • 89
  • 9
3

In Swift

let v = UIView()
    v.backgroundColor = self.darkerColor(color)
    cell?.selectedBackgroundView = v;

...

func darkerColor( color: UIColor) -> UIColor {
    var h = CGFloat(0)
    var s = CGFloat(0)
    var b = CGFloat(0)
    var a = CGFloat(0)
    let hueObtained = color.getHue(&h, saturation: &s, brightness: &b, alpha: &a)
    if hueObtained {
        return UIColor(hue: h, saturation: s, brightness: b * 0.75, alpha: a)
    }
    return color
}
Alexander Volkov
  • 7,904
  • 1
  • 47
  • 44
  • This is definitely the best modern answer, because setting the selection style to .None and using the "willSelectRow" and "didSelectRow" delegate methods has the side effect that a long press on a row will not highlight it as selected, which is the default behavior for normal styling. – Kevin Aug 30 '16 at 18:33
3

Works for me

UIView *customColorView = [[UIView alloc] init];
    customColorView.backgroundColor = [UIColor colorWithRed:180/255.0 
                                                      green:138/255.0 
                                                       blue:171/255.0 
                                                      alpha:0.5];
    cell.selectedBackgroundView =  customColorView;
Jamie Eltringham
  • 810
  • 3
  • 16
  • 25
Mrsantateam
  • 161
  • 1
  • 10
3

in Swift 3, converted from illuminates answer.

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    if(selected) {
        self.selectionStyle = .none
        self.backgroundColor = UIColor.green
    } else {
        self.backgroundColor = UIColor.blue
    }
}

(however the view only changes once the selection is confirmed by releasing your finger)

Peter Johnson
  • 3,764
  • 1
  • 23
  • 27
3

Check out AdvancedTableViewCells in Apple's sample code.

You'll want to use the composite cell pattern.

BryanH
  • 5,826
  • 3
  • 34
  • 47
johndpope
  • 5,035
  • 2
  • 41
  • 43
3

Swift 5.3

Here I did for a single row without creating a class for the cell.

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    if let cell = tableView.cellForRow(at: indexPath) {
        cell.contentView.backgroundColor = #colorLiteral(red: 0.1411764771, green: 0.3960784376, blue: 0.5647059083, alpha: 1)
    }
}
override func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
    if let cell = tableView.cellForRow(at: indexPath) {
        cell.contentView.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    }
}
Kostarev Kirill
  • 174
  • 2
  • 9
  • I am looking for OSX solution. I am able to change cell colour but not able to hide/unhide button inside cells. Any help? – Lakshmi Yadav Jan 12 '21 at 08:35
2

Create a custom UITableViewCell. Inside you custom class override the "setSelected" function and change the contentView background color. You can also override you "setHighlighted" function.

In Swift:

class myTableViewCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
        // Add your color here
        self.contentView.backgroundColor = UIColor.whiteColor()
    }

    override func setHighlighted(highlighted: Bool, animated: Bool) {
        // Add your color here
        self.contentView.backgroundColor = UIColor.whiteColor()
    }
}
Eduardo Irias
  • 1,043
  • 11
  • 12
2
override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)

    if selected {
        self.contentView.backgroundColor = .black
    } else {
        self.contentView.backgroundColor = .white
    }
}
Daniel Simons
  • 123
  • 2
  • 5
2

Swift 3, 4, 5 select cell background colour

1) Change only highlighted colour when user click on cell:

1.1) Inside cell class:

override func awakeFromNib() {
    super.awakeFromNib()
    // Initialization code

    let backgroundView = UIView()
    backgroundView.backgroundColor = UIColor.init(white: 1.0, alpha: 0.1)
    selectedBackgroundView = backgroundView
}

1.2) Viewcontroller that you use customized cell

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    tableView.deselectRow(at: indexPath, animated: true)
}

2) If you to set colour for selected cells:

override func setSelected(_ selected: Bool, animated: Bool) {
    super.setSelected(selected, animated: animated)
    // Configure the view for the selected state

    if selected {
        self.backgroundColor = .darkGray
    } else {
        self.backgroundColor = .white
    }
}
Egzon P.
  • 4,498
  • 3
  • 32
  • 31
1

Here is a quick way to do this right in Interface Builder (within a Storyboard). Drag a simple UIView to the top of your UITableView as in UIView Next connect your cell's selectedBackgroundView Outlet to this view. You can even connect multiple cells' outlets to this one view. Cell's outlet

Sebastian
  • 2,889
  • 4
  • 34
  • 37
  • no, that's not a good deal. if u do this ... there is only one instance for each cell. U r not able to select more then one item with this solution – Maurice Raguse Jan 23 '15 at 15:02
  • Yeah this method looks good, but the view gets shared and you get a flash as it jumps to the next cell – trapper May 19 '16 at 03:37
1

For a solution that works (properly) with UIAppearance for iOS 7 (and higher?) by subclassing UITableViewCell and using its default selectedBackgroundView to set the color, take a look at my answer to a similar question here.

Community
  • 1
  • 1
anneblue
  • 706
  • 4
  • 21
1
- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    cell.contentView.backgroundColor = [UIColor yellowColor];
}

- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    cell.contentView.backgroundColor = nil;
}
tuoxie007
  • 1,234
  • 12
  • 10
0

I have tried each one among above answers, but none of them best fits for me,

then i have looked into one of the native provided method, and it is working fine.

first, make cellSelectionStyle to None and then go for this solution.

func tableView(_ tableView: UITableView, willDeselectRowAt indexPath: IndexPath) -> IndexPath?
{   
    let cell = tableView.cellForRow(at: indexPath);

   //cell which is getting deselected, make whatever changes that are required to make it back normal        

    cell.backgroundColor = kNormalColor;

    return indexPath;
}

func tableView(_ tableView: UITableView, willSelectRowAt indexPath: IndexPath) -> IndexPath?
{
    let cell = tableView.cellForRow(at: indexPath);

   //cell which is getting selected, make whatever changes that are required to make it selected        

    cell.backgroundColor = kSelectedColor;

    return indexPath;
}

advantage of this methods over other all is :

  1. It works for multiple cell selection
  2. You can change any element, whichever you want, not only background color of given cell when it get selected as well as deselected.
Mehul Thakkar
  • 12,440
  • 10
  • 52
  • 81
0
var last_selected:IndexPath!

define last_selected:IndexPath inside the class

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    let cell = tableView.cellForRow(at: indexPath) as! Cell
    cell.contentView.backgroundColor = UIColor.lightGray
    cell.txt.textColor = UIColor.red

    if(last_selected != nil){
        //deselect
        let deselect_cell = tableView.cellForRow(at: last_selected) as! Cell
        deselect_cell.contentView.backgroundColor = UIColor.white
        deselect_cell.txt.textColor = UIColor.black
    }

    last_selected = indexPath
}
Talha Ahmed
  • 160
  • 1
  • 10
  • I am looking for OSX solution. I am able to change cell colour but not able to hide/unhide button inside cells. Any help? – Lakshmi Yadav Jan 12 '21 at 08:37
0

Set selection property to None, make sure tableView has 'Single Selection' set and use this method in tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell delegate method:

extension UITableViewCell {
    func setSelectionColor(isSelected: Bool, selectionColor: UIColor, nonSelectionColor: UIColor) {
        contentView.backgroundColor = isSelected ? selectionColor : nonSelectionColor
    }
}
Newsonic
  • 413
  • 4
  • 19
0

SWIFT 5.X
It also works when accessoryType changed for cell

extension UITableViewCell{
    var selectedBackgroundColor: UIColor?{
        set{
            let customColorView = UIView()
            customColorView.backgroundColor = newValue
            selectedBackgroundView = customColorView
        }
        get{
            return selectedBackgroundView?.backgroundColor
        }
    }
}

And in UIViewController use like below...

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! myCell
    cell.selectedBackgroundColor = UIColor.lightGray
    return cell
  }
NiravS
  • 1,144
  • 1
  • 12
  • 24
  • I am looking for OSX solution. I am able to change cell colour but not able to hide/unhide button inside cells. Any help? – Lakshmi Yadav Jan 12 '21 at 08:37
0

I had a recent issue with an update to Swift 5 where the table view would flash select and then deselect the selected cell. I tried several of the solutions here and none worked. The solution is setting clearsSelectionOnViewWillAppear to false.

I had previously used the UIView and selectedBackgroundColor property, so I kept with that approach.

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "popoverCell", for: indexPath) as! PopoverCell

  let backgroundView = UIView()
  backgroundView.backgroundColor = Color.Blue
  cell.selectedBackgroundView = backgroundView
}

Below are the changes I needed for Swift 5. The property clearsSelectionOnViewWillAppear was the reason my cells were deselecting. The following select was necessary on first load.

override func viewDidLoad() {
  super.viewDidLoad()

  clearsSelectionOnViewWillAppear = false
  popoverTableView.selectRow(at: selectedIndexPath, animated: false, scrollPosition: .none)
}
Vanessa Forney
  • 436
  • 5
  • 7
  • I am looking for OSX solution. I am able to change cell colour but not able to hide/unhide button inside cells. Any help? – Lakshmi Yadav Jan 12 '21 at 08:37