Blurry UILabel as programmatic subview of UITableViewCell contentView

Question

I am adding a UILabel instance as a subview of my custom UITableViewCell instance's contentView.

When I select the cell, the row is highlighted blue, except for the background of the label. The label text is sharp.

When I set the label and content view backgroundColor property to [UIColor clearColor], the label text becomes blurry.

How do I set the label background color to be clear, to allow the row highlight to come through, while still keeping the label text sharp?

One suggestion I read elsewhere was to round the label's frame values, but this did not have any effect.

CODE

Here is a snippet of my custom UITableViewCell subview's -setNeedsLayout method:

UILabel *_objectTitleLabel = [[UILabel alloc] initWithFrame:CGRectNull];
_objectTitleLabel.text = [self.awsObject cleanedKey];
_objectTitleLabel.font = [UIAppDelegate defaultObjectLabelFont];
_objectTitleLabel.highlightedTextColor = [UIColor clearColor]; //[UIAppDelegate defaultLabelShadowTint];
_objectTitleLabel.backgroundColor = [UIColor clearColor]; //[UIAppDelegate defaultWidgetBackgroundTint];
_objectTitleLabel.frame = CGRectMake(
        kCellImageViewWidth + 2.0 * self.indentationWidth,
        0.5 * (self.tableView.rowHeight - 1.5 * kCellLabelHeight) + kCellTitleYPositionNudge,
        contentViewWidth,
        kCellLabelHeight
);
_objectTitleLabel.frame = CGRectIntegral(_objectTitleLabel.frame);
_objectTitleLabel.tag = kObjectTableViewCellTitleSubviewType;
//NSLog(@"_objectTitleLabel: %@", NSStringFromCGRect(_objectTitleLabel.frame));
[self.contentView addSubview:_objectTitleLabel];
[_objectTitleLabel release], _objectTitleLabel = nil;

...

self.contentView.backgroundColor = [UIAppDelegate defaultWidgetBackgroundTint]; 
self.contentView.clearsContextBeforeDrawing = YES;
self.contentView.autoresizesSubviews = YES;
self.contentView.clipsToBounds = YES;
self.contentView.contentMode = UIViewContentModeRedraw;

Answer 1

I ran into this problem myself today, and read somewhere that non-integer values for the origin and size of the UILabel's frame can cause this (I know they're floats, but you know what I mean). There has got to be a more elegant solution, but this quick hack appears to have solved the problem for me:

self.valueLabel.frame = CGRectMake((int) frame.origin.x, (int) frame.origin.y, (int) frame.size.width, (int) frame.size.height);

If you find a better solution, please let me know, I'd love to replace this hack with something a bit more tasteful.

Answer 2

Sometimes the reason for the blurriness you have mentioned can be that labels's frame is beyond the cell frame. Even if you see all of your text you have put inside the label on your cell, the actual label size can be bigger than the cell frame.

To check if that is the reason for the effect you see I would suggest to check/print all the data you have about labels size/location after it is instantiated and than check in the delegate method tableView:heightForRowAtIndexPath: that this fit into the cell height you are returning for the cell. Hope it will help in your case.

Answer 3

The issue is sub-pixel rendering, which occurs when your origin (which is a float value) has a non-zero fractional component. Round to the nearest whole number and you should be fine.

Answer 4

Hi there, anyone thought of any solution for that. I am still getting blurry fonts even with fixed rounded coordinates. This is driving me crazy. The only way to prevent that is to create the label in the ui builder but I want to create mine programatically.

Answer 5

Ok found the problem, Make sure ur parent view's coordinates are rounded as well.

Answer 6

Use round(); C functions are provided for a reason.

#define roundCGRectValues (frame) \
frame = CGRectMake(round(frame.origin.x),round(frame.origin.y),round(frame.size.width),round(frame.size.height));

All you need.

Answer 7

Does -setNeedsLayout get called even for dequeued reusable cells? If so, the cell will already have the label added to the content view, and you will draw it twice, making it blurry. You can inefficiently solve this by removing all of the content view's subviews before you add your subview:

for (UIView *subview in [[self contentView] subviews]) {
     [subview removeFromSuperview];
}

A better solution would be to provide properties on your cell subclass to let you modify the content of a reused cell as-needed, rather than rebuilding its view hierarchy from scratch.

Answer 8

Another cause of garbled/blurry text is cell reuse. If you are de-queuing a reusable cell then it may redraw with different dimensions somewhere else and again be re-used when it gets to your cell with the garbled text.

To ensure the cells are unique be sure to allocate a new cell for the indicies where the text is garbled, and mark that UITableViewCell instance with a different reuse identifier. This is only practical of course if you're dealing with a very small number of cells and if you know exactly which cells are causing problems.