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;

Solution 1

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.

Solution 2

In my case, having set shouldRasterize = YES on the CGLayer of the view containing the UILabel was the culprit. Removing that line made the text nice and crisp.

Solution 3

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

Solution 4

Setting shouldRasterize to YES may introduce blurriness. Set the rasterization scale and that should eliminate the blurriness. [self.layer setRasterizationScale:[[UIScreen mainScreen] scale]];

Solution 5

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.

View more solutions

Comments

[Alex Reynolds]

I am already setting the frame to integer values: _objectTitleLabel.frame = CGRectIntegral(_objectTitleLabel.frame)

[Alex Reynolds]

I am already setting the frame to integer values: _objectTitleLabel.frame = CGRectIntegral(_objectTitleLabel.frame)

[Stuart Carnie]

And you are still seeing an issue with blurry renders? What about your parent view(s) - are they too positioned integrally?

[Alex Reynolds]

As mentioned, I added _objectTitleLabel.frame = CGRectIntegral(_objectTitleLabel.frame); to no effect.

[mvds]

Be warned: This problem also arises when setting the center of a view with odd width and/or height.

[Jessedc]

This answer should be marked as the correct answer to this question, and setting the center is a great way to cause this issue.

[hkatz]

Had the same problem, but for me it didn't have anything to do with an odd width or height. I solved it by calling floor() on both center.x and center.y.

[Andrew]

#define CGPointIntegral(point) CGPointMake((int)point.x,(int)point.y) is a quick macro to cast CGPoint members to integers.

[roplacebo]

Thank you, that saves a lot of time

[Shirish Kumar]

Correct. But if you are using UITableViewCell this may introduce jerkiness in the scroll. In that case set the Rasterization scale.

[Johannes Fahrenkrug]

That is good advice. I ended up doing complete custom drawing with Quartz in my tableview cell and now it's lightning fast!

[Visal Sambo]

IT WORKED BUT WHEN I SCROLL IT IS GETTING LAG