CODEWITHSUNDEEP
iphonecocoa-touchuitableview
Amit Vaghela
Amit Vaghela

Reputation: 2970

How do I set UITableViewCellSelectionStyle property to some custom color?

I am developing an iPhone application, in my table view I wanted custom color for Cell Selection Style, I read the UITableViewCell Class Reference but there are only three constants defined for Selection style (Blue, Gray, None). I saw one application that used a different color than those defined in the reference.

How can we use a color other than those defined in the reference?

Upvotes: 35

Views: 27221

Answers (9)

Prateekro
Prateekro

Reputation: 566

To add a custom color use the below code. And to make it transparent use alpha: 0.0

cell.selectedBackgroundView = UIView(frame: CGRect.zero)
cell.selectedBackgroundView?.backgroundColor = UIColor(red:0.27, green:0.71, blue:0.73, alpha:1.0)

If you use custom color and want to give it rounded corner look use:

cell.layer.cornerRadius = 8

Also, use this for better animation and feel

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {

    tableView.deselectRow(at: indexPath, animated: true)
}

Upvotes: 0

Ishwar Hingu
Ishwar Hingu

Reputation: 560

- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}

- (void)tableView:(UITableView *)tableView didHighlightRowAtIndexPath:(NSIndexPath *)indexPath {
    // Add your Colour.
    SocialTableViewCell *cell = (SocialTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    [self setCellColor:Ripple_Colour ForCell:cell];  //highlight colour
}

- (void)tableView:(UITableView *)tableView didUnhighlightRowAtIndexPath:(NSIndexPath *)indexPath {
    // Reset Colour.
    SocialTableViewCell *cell = (SocialTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    [self setCellColor:Ripple_Colour ForCell:cell]; //normal color

}

- (void)setCellColor:(UIColor *)color ForCell:(UITableViewCell *)cell {
    cell.contentView.backgroundColor = color;
    cell.backgroundColor = color;
}

Upvotes: 0

Willster
Willster

Reputation: 2586

If you have subclassed a UITableViewCell, then you can customise the various elements of the cell by overriding the following:

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

    [super setHighlighted:highlighted animated:animated];
}

EDIT for iOS7: as Sasho stated, you also need 

cell.selectionStyle = UITableViewCellSelectionStyleNone

Upvotes: 13

PK86
PK86

Reputation: 1198

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {  
// Set Highlighted Color  
if (highlighted) {  
self.backgroundColor = [UIColor colorWithRed:234.0f/255 green:202.0f/255 blue:255.0f/255 alpha:1.0f];
    } else {  
        self.backgroundColor = [UIColor clearColor];  
  }   
}

Upvotes: 0

Jeffrey Forbes
Jeffrey Forbes

Reputation: 2007

Override didSelectRowAtIndexPath: and draw a UIView of a color of your choosing and insert it behind the UILabel inside the cell. I would do it something like this:

UIView* selectedView; //inside your header

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

  UITableViewCell* cell = [tableView cellForRowAtIndexPath:indexPath];
  selectedView = [[UIView alloc] initWithFrame:[cell frame]];
  selectedView.backgroundColor = [UIColor greenColor]; //whatever

  [cell insertSubview:selectedView atIndex:0]; //tweak this as necessary
  [selectedView release]; //clean up

}

You can choose to animate this view out when it gets deselected and will satisfy your requirements.

Upvotes: 2

bentford
bentford

Reputation: 33406

Sublcass UITableViewCell and override setHighlighted:animated:

You can define a custom selection color color by setting the backgroundColor (see WIllster's answer):

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

    [super setHighlighted:highlighted animated:animated];
}

You can define a custom background image by setting the backgroundView property:

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
    if( highlighted == YES )
        self.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"seasonal_list_event_bar_default.png"]];
    else
        self.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"seasonal_list_event_bar_active.png"]];


    [super setHighlighted:highlighted animated:animated];
}

Upvotes: 1

Charles Marsh
Charles Marsh

Reputation: 1917

I tried some of the above, and I actually prefer to create my own subclass of UITableViewCell and then override the touchesBegan/touchesCancelled/touchesEnded methods. To do this, ignore all the selectedBackgroundView and highlightedColor properties on the cell, and instead just set these colors manually whenever one of the above methods are called. For example, if you want to set the cell to have a green background with red text, try this (within your custom cell subclass):

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    //Set backgorund
    self.backgroundColor = [UIColor themeBlue];

    //Set text
    self.textLabel.textColor = [UIColor themeWhite];

    //Call super
    [super touchesBegan:touches withEvent:event];
}

Note that for this to work, you need to set:

self.selectionStyle = UITableViewCellSelectionStyleNone;

Otherwise, you'll first get the current selection style.

EDIT: I suggest using the touchesCancelled method to revert back to the original cell colors, but just ignore the touchesEnded method.

Upvotes: 7

Paul
Paul

Reputation: 249

Setting the selectedBackgroundView seems to have no effect when the cell.selectionStyle is set to UITableViewCellSelectionStyleNone. When I don't set the style is just uses the default gray.

Using the first suggestion that inserts the custom UIView into the cell does manipulate the cell but it doesn't show up when the cell is touched, only after the selected action is completed which is too late because I'm pushing to a new view. How do I get the selected view in the cell to display before the beginning of the selected operation?

Upvotes: 24

Matt Gallagher
Matt Gallagher

Reputation: 14968

The best way to set the selection is to set the selectedBackgroundView on the cell when you construct it.

i.e.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
        cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"SelectedCellBackground.png"]] autorelease];
    }

    // configure the cell
}

The image used should have a nice gradient (like the default selection). If you just want a flat color, you can use a UIView instead of a UIImageView and set the backgroundColor to the color you want.

This background is then automatically applied when the row is selected.

Upvotes: 64

Related Questions