UITableViewCell selected shadow color on deselection - iphone

Question

I have a standard UITableView. I want to set the shadowColor of the cell's textLabel to [UIColor whiteColor], but only when the cell is touched. For that, I'm using the following code. It's a custom UITableViewCell subclass that overrides setSelected/setHighlighted:
#implementation ExampleTableViewCell
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:animated];
[self setShadowColorSelected:selected];
}
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
[super setHighlighted:highlighted animated:animated];
[self setShadowColorSelected:highlighted];
}
- (void)setShadowColorSelected:(BOOL)selected {
if (selected) {
self.textLabel.shadowColor = [UIColor blackColor];
}else {
self.textLabel.shadowColor = [UIColor whiteColor];
}
}
#end
My problem with this approach is that, on deselection, the cell has a very short period where both the label's text and shadow are white. See this screenshot, which was taken in the exact moment of deselection:
It's basically the same approach as in these two posts:
UILabel shadow from custom cell selected color
Removing text shadow in UITableViewCell when it's selected
I'm using the approach of the accepted answer in the latter question.
I have created a very very simple code project and uploaded it to github. It shows off my problem. It's just a UITableViewController that displays a single cell.
Apart from that, there's nothing fancy. UITableView delegate methods:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (!cell) {
cell = [[ExampleTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.textLabel.text = #"test";
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self.tableView deselectRowAtIndexPath:indexPath animated:YES]; //setting this to NO doesn't work either!
}
Any ideas?

Answer 1

If I understood the problem, you need to display the shadow color until the cell selection is animated to be gone. I'm not sure what is incorrect in the way you tried, more straightforward solution works fine though.
Please note, you'll need to remove observer once it's not needed.
ExampleTableViewCell.h
#interface ExampleTableViewCell : UITableViewCell {
}
- (void) setSelectionShadowOfColor:(UIColor *) selColor;
#end
ExampleTableViewCell.m
#implementation ExampleTableViewCell
- (void) setSelectionShadowOfColor:(UIColor *) selColor {
self.textLabel
[self addObserver:self
forKeyPath:#"textLabel.highlighted" // not isHighlighted as that is a getter name of the highlighted property
options:NSKeyValueObservingOptionNew
context:NULL];
}
- (void)observeValueForKeyPath:(NSString *)keyPath
ofObject:(id)object
change:(NSDictionary *)change
context:(void *)context {
BOOL isHighlighted = [[change objectForKey:NSKeyValueChangeNewKey] boolValue];
if (isHighlighted) {
self.textLabel.shadowColor = [UIColor blackColor];
} else {
self.textLabel.shadowColor = [UIColor whiteColor];
}
}
#end
ExampleTableViewController.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
ExampleTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; // note the type ExampleTableViewCell is used here to avoid the interface lookup mess
if (!cell) {
cell = [[ExampleTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
[cell setSelectionShadowOfColor:[UIColor blackColor]];
}
cell.textLabel.text = #"test";
return cell;
}

Answer 2

Add the below to your UITableViewDelegate:
NSIndexPath *selectedIndex;
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (!cell) {
cell = [[ExampleTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
cell.textLabel.text = #"test";
if(indexpath == selectedIndex)
{
cell.textlabel.shadowColor = [UIColor blackColor];
}
else
{
cell.textlabel.shadowColor = [UIColor whiteColor];
}
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self.tableView beginUpdates];
selectedIndex = indexpath;
[self.tableView endUpdates];
}

Answer 3

This is the best I was able to do:
- (void)setSelected:(BOOL)selected animated:(BOOL)animated
{
[super setSelected:selected animated:NO];
[self setShadowColorSelected:selected];
}
- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
[super setHighlighted:highlighted animated:YES];
[self setShadowColorSelected:highlighted];
}
- (void)setShadowColorSelected:(BOOL)selected {
[self.textLabel setBackgroundColor:[UIColor clearColor]];
if (selected)
{
[self.textLabel setTextColor:[UIColor whiteColor]];
[self.textLabel setShadowColor:[UIColor blackColor]];
[UIView setAnimationBeginsFromCurrentState:YES];
[UIView transitionWithView:self.textLabel duration:0.25 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
if (selected)
{
[self.textLabel setTextColor:[UIColor whiteColor]];
[self.textLabel setShadowColor:[UIColor blackColor]];
}
else
{
[self.textLabel setTextColor:[UIColor blackColor]];
[self.textLabel setShadowColor:[UIColor whiteColor]];
}
} completion:nil];
}
else
{
[self.textLabel setTextColor:[UIColor blackColor]];
[self.textLabel setShadowColor:[UIColor whiteColor]];
}
}

Answer 4

Here is a simple way to accomplish what you want:
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
self.textLabel.shadowColor = [UIColor blackColor];
[super touchesBegan:touches withEvent:event];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
self.textLabel.shadowColor = [UIColor whiteColor];
[super touchesEnded:touches withEvent:event];
}
-(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
self.textLabel.shadowColor = [UIColor whiteColor];
[super touchesCancelled:touches withEvent:event];
}

Answer 5

I guess you should need to animate the changing of the text/shadow color with the same duration that UITableView uses to animate selection/deselection. In my understanding, you change the text/shadow color at the exact moment that the tableView begins animating the (dis)appearing of the selection highlight, so what you get is that your colors change momentarily, while the selection highlight takes some time to animate from one state to another
Try something like this:
__block UIColor *newShadowColor = selected ? [UIColor blackColor] : [UIColor whiteColor];
[UIView animateWithDuration:0.2
animations:^{
/* change your label/shadow color here. */
self.textLabel.shadowColor = newShadowColor;
}
completion:^(BOOL finished){
/* this is where the cell is no longer selected
or highlighted. You may do some additional style changes to your
label here */ }];

Answer 6

I had the same issue. All solutions I looked at required subcassing / too much additional code.
What I did in the end is to create a second UILabel underneath the primary UILabel to act as a shadow.
Don't set shadows on your primary and shadow labels. For the shadow label, set the 'Normal Color' to what you wanted your shadow color to be and set the highlighted color to 'Clear Color'.
Obviously you have to update the shadow label each time you update the primary label. Not a big price to pay in many cases.
Hope that helps!

Answer 7

According to my understanding you can eliminate this issue by changing the color of the tableview by using following code with the color needed
[tableView setBackgroundColor:[UIColor "GrayColor"]];

Answer 8

I was also facing the same problem.
Instead of using default label, you can use UIButton and your problem will be solved.
Put custom button in cell.
My requirements were solved. It might help you.