UILabel layer cornerRadius negatively impacting performance

by

For labels, or views with rounded corners and or background colors and shadows on scrolling views the solution is pretty simple:

The biggest issue is from the masksToBounds layer option. This appears to tax performance significantly, however the label seems to need this ON to mask the background color to rounded corners. So to get around this you need to set the labels layer background color instead and switch off masksToBounds.

The second issue is that the default behavior is to redraw the view whenever possible which is totally unnecessary with static or slow changing items on scrolling views. Here we simply set layer.shouldRasterize = YES. This will allow CA to ‘cache’ a rasterized version of the view for quick drawing when scrolling (presumably with hardware acceleration).

You need to make sure your layer has an alpha channel otherwise rasterizing will affect the drawing of rounded corners. I’ve never had a problem as I have alpha set for my background colors, but you may need to check in your situation.

Here is a sample UILabel set up to work nicely on a scollview:

UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(4, 4, 40.0, 24.0)];
lbl.font = [UIFont fontWithName:@"Helvetica" size:14.0];
lbl.textAlignment = UITextAlignmentRight;
lbl.text = @"Hello World";
// Must set the label background to clear so the layer background shows
lbl.backgroundColor = [UIColor clearColor];        
// Set UILabel.layer.backgroundColor not UILabel.backgroundColor otherwise the background is not masked to the rounded border.
lbl.layer.backgroundColor = [UIColor colorWithRed:1 green:0 blue:0 alpha:0.5].CGColor;

lbl.layer.cornerRadius = 8;
lbl.layer.borderColor = [UIColor blackColor].CGColor;
lbl.layer.borderWidth = 1;
// Huge change in performance by explicitly setting the below (even though default is supposedly NO)
lbl.layer.masksToBounds = NO;
// Performance improvement here depends on the size of your view
lbl.layer.shouldRasterize = YES;
lbl.layer.rasterizationScale = [UIScreen mainScreen].scale;
// self here is the child view in the scroll view
[self addSubview:lbl];
[lbl release];

I can fill the iPad 1 screen with views like this and still scroll smoothly 🙂

More Related Contents:

  1. How do I apply a perspective transform to a UIView?
  2. UIView with rounded corners and drop shadow?
  3. Why masksToBounds = YES prevents CALayer shadow?
  4. How is the relation between UIView’s clipsToBounds and CALayer’s masksToBounds?
  5. Label doesn’t show text
  6. How do I adjust the anchor point of a CALayer, when Auto Layout is being used?
  7. How Do I Take a Screen Shot of a UIView?
  8. UILabel sizeToFit doesn’t work with autolayout ios6
  9. Giving UIView rounded corners
  10. Underline text in UIlabel
  11. Add “…Read More” to the end of UILabel
  12. Event handling for iOS – how hitTest:withEvent: and pointInside:withEvent: are related?
  13. How to find actual number of lines of UILabel?
  14. How to add a border just on the top side of a UIView
  15. How do I set bold and italic on UILabel of iPhone/iPad?
  16. How do I apply UIAppearance Proxy properties to UILabel?
  17. How do you make a vertical text UILabel and UITextView for iOS in Swift?
  18. Tap on a part of text of UILabel
  19. UILabel: wrap and/or break inside word(s) with hyphen(s)
  20. UIButton that resizes to fit its titleLabel
  21. add UIImage in CALayer
  22. UIView with a Dashed line
  23. Create a copy of a UIView in Swift
  24. How to draw border around a UILabel?
  25. UIView backgroundColor disappears when UITableViewCell is selected
  26. How to mask UIViews in iOS
  27. CABasicAnimation resets to initial value after animation completes
  28. Draw line in UIView
  29. Using autolayout in a tableHeaderView
  30. Add left/right horizontal padding to UILabel

Leave a Comment