Hi performance table views with QuartzCore and CoreText
18 likes10,246 views
This document provides an introduction to using QuartzCore and CoreText to build high-performance table views on iOS. It begins by explaining why fast scrolling is important for the iPhone experience. It then outlines three different methods for compositing table view cells (subviews, direct drawing, hybrid) and their pros and cons. The document dives into using QuartzCore and CoreText to render text and images within table view cells, providing examples of using CALayers, CATextLayers, and NSAttributedStrings. It concludes with performance tips for working with these frameworks like using dispatch_once.
![Cons
• Still cannot render shadows around images views
self.view.layer.masksToBounds = NO;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowOffset = CGSizeMake(0.0f, -1.0f);
self.view.layer.shadowOpacity = 0.5f;
self.view.layer.shadowRadius = 1.0f;](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-28-320.jpg)
![Cons
• Still cannot render shadows around images views
self.view.layer.masksToBounds = NO;
self.view.layer.shadowColor = [UIColor blackColor].CGColor;
self.view.layer.shadowOffset = CGSizeMake(0.0f, -1.0f);
self.view.layer.shadowOpacity = 0.5f;
self.view.layer.shadowRadius = 1.0f;
• The above code is dog slow.
• Good for views, very bad for table view cells or collection view
cells](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-29-320.jpg)
![CALayer - Images
self.backgroundLayer = [CALayer layer];
self.backgroundLayer.frame = CGRectMake(0, 0, 320, 150);
self.backgroundLayer.contentsScale = [[UIScreen mainScreen] scale];
self.backgroundLayer.actions = [NSDictionary actionsDictionary];
self.backgroundLayer.contents = (id) backgroundImage.CGImage;
self.backgroundLayer.contentsCenter = CGRectMake(1.0/
backgroundImage.size.width, 8.0/backgroundImage.size.height,
1.0/
backgroundImage.size.width,1.0/backgroundImage.size.height);
self.backgroundLayer.contentsGravity = kCAGravityResize;
[self.contentView.layer addSublayer:self.backgroundLayer];](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-37-320.jpg)
![CATextLayer - Text
self.nameTextLayer = [CATextLayer layer];
self.nameTextLayer.frame = CGRectMake(65, 3, 240, 21);
self.nameTextLayer.alignmentMode = kCAAlignmentLeft;
self.nameTextLayer.wrapped = YES;
self.nameTextLayer.contentsScale = [[UIScreen mainScreen] scale];
self.nameTextLayer.actions = [NSDictionary actionsDictionary];
[self.contentView.layer addSublayer:self.nameTextLayer];](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-38-320.jpg)
![Composition
+(NSDictionary*) actionsDictionary {
return @{
@"onOrderIn" : [NSNull null],
@"onOrderOut" : [NSNull null],
@"sublayers" : [NSNull null],
@"contents" : [NSNull null],
@"position" : [NSNull null],
@"bounds" : [NSNull null],
@"onLayout" : [NSNull null],
@"hidden" : [NSNull null],
};
});
}](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-39-320.jpg)
![Composition
-(void) setText {
CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont
boldSystemFontOfSize:17].fontName, [UIFont boldSystemFontOfSize:17].pointSize, NULL);
NSDictionary *boldAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
(__bridge id)ctBoldFont,
(id)kCTFontAttributeName,
[UIColor blackColor].CGColor,
(id)kCTForegroundColorAttributeName, nil];
CFRelease(ctBoldFont);
CTFontRef ctNormalFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont
systemFontOfSize:16].fontName, [UIFont systemFontOfSize:16].pointSize, NULL);
NSDictionary *normalAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
(__bridge id)ctNormalFont,
(id)kCTFontAttributeName,
[UIColor blackColor].CGColor,
(id)kCTForegroundColorAttributeName, nil];
CFRelease(ctNormalFont);
NSMutableAttributedString *string = [[NSMutableAttributedString alloc]
initWithString:@"iOS Dev Scout is a AWESOME iOS group!" attributes:normalAttributes];
[string addAttributes:boldAttributes range:NSMakeRange(19, 7)];
self.textLayer.string = string;
}](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-50-320.jpg)
![Composition
CTFontRef ctNormalFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont
systemFontOfSize:16].fontName, [UIFont systemFontOfSize:16].pointSize, NULL);
NSDictionary *normalAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
(__bridge id)ctNormalFont,
(id)kCTFontAttributeName,
[UIColor blackColor].CGColor,
(id)kCTForegroundColorAttributeName, nil];
CFRelease(ctNormalFont);](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-51-320.jpg)
![Composition
CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont
boldSystemFontOfSize:17].fontName, [UIFont boldSystemFontOfSize:17].pointSize, NULL);
NSDictionary *boldAttributes = [NSDictionary dictionaryWithObjectsAndKeys:
(__bridge id)ctBoldFont,
(id)kCTFontAttributeName,
[UIColor blackColor].CGColor,
(id)kCTForegroundColorAttributeName, nil];
CFRelease(ctBoldFont);](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-52-320.jpg)
![Composition
NSMutableAttributedString *string = [[NSMutableAttributedString alloc]
initWithString:@"iOS Dev Scout is a AWESOME iOS group!" attributes:normalAttributes];
[string addAttributes:boldAttributes range:NSMakeRange(19, 7)];
self.textLayer.string = string;](https://image.slidesharecdn.com/hiperformancetableviews-121223192834-phpapp01/85/Hi-performance-table-views-with-QuartzCore-and-CoreText-53-320.jpg)
Hi performance table views with QuartzCore and CoreText
- 1. Hi-Performance Table Views with QuartzCore and CoreText Beginners guide to an advanced concept Mugunth Kumar Steinlogic Consulting and Training Pte Ltd
- 2. About me
- 3. About me • Author of the iOS 5, iOS 6 Programming: Pushing the Limits book - Reached the top 100 books in Amazon’s Computer and Technology books list • Trainer - Conducts training on iOS programming at iOSTraining.sg. • Developer • MKNetworkKit (1200+ watchers) • MKStoreKit (700+ watchers) • Several other “minor” projects with 200+ watchers • Clients include startups in Singapore like Squiryl, Found and MNC’s including Microsoft Redmond, Oracle and such.
- 4. Why? • What makes apps pleasant to use? • Fast scrolling • Why?
- 5. Why?
- 6. Why? • iPhone is a direct manipulation device
- 7. Why? • iPhone is a direct manipulation device • iPhone screen is closer to your eye than your HDTV or your computer monitor
- 8. Why? • iPhone is a direct manipulation device • iPhone screen is closer to your eye than your HDTV or your computer monitor • 60 frames per second = 16.66ms per frame
- 9. Why? • iPhone is a direct manipulation device • iPhone screen is closer to your eye than your HDTV or your computer monitor • 60 frames per second = 16.66ms per frame • Anything less, you will get a headache
- 10. Agenda
- 11. Agenda • Why?
- 12. Agenda • Why? • Three different methods
- 13. Agenda • Why? • Three different methods • Pros and Cons
- 14. Agenda • Why? • Three different methods • Pros and Cons • QuartzCore/CoreText introduction
- 15. Agenda • Why? • Three different methods • Pros and Cons • QuartzCore/CoreText introduction • A simple table view cell example
- 16. Agenda • Why? • Three different methods • Pros and Cons • QuartzCore/CoreText introduction • A simple table view cell example • What else can you build? - Facebook style news feed
- 17. Compositing Table View Cells • UITableViewCell • Subviews (UILabel, UIImageView)
- 18. Pros/Cons
- 19. Pros/Cons • Advantages • Programmatically easy • Fast for compositing images • Built in cells are rendered differently
- 20. Pros/Cons • Advantages • Programmatically easy • Fast for compositing images • Built in cells are rendered differently • Drawbacks • Slow for text based tables
- 21. Direct Drawing • UITableViewCell drawRect • NSString -drawInRect, drawAtPoint • UIImage -drawInRect, drawAtPoint
- 22. Pros/Cons
- 23. Pros/Cons • Advantages • Fast • Really fast!
- 24. Pros/Cons • Advantages • Fast • Really fast! • Drawbacks • Difficult (Annoyingly complex to build complex layouts) • CGContextDrawImage is really slow compared to using UIImageView
- 25. Hybrid • A mix of drawRect + UIImageViews
- 26. Cons
- 27. Cons • Still cannot render shadows around images views
- 28. Cons • Still cannot render shadows around images views self.view.layer.masksToBounds = NO; self.view.layer.shadowColor = [UIColor blackColor].CGColor; self.view.layer.shadowOffset = CGSizeMake(0.0f, -1.0f); self.view.layer.shadowOpacity = 0.5f; self.view.layer.shadowRadius = 1.0f;
- 29. Cons • Still cannot render shadows around images views self.view.layer.masksToBounds = NO; self.view.layer.shadowColor = [UIColor blackColor].CGColor; self.view.layer.shadowOffset = CGSizeMake(0.0f, -1.0f); self.view.layer.shadowOpacity = 0.5f; self.view.layer.shadowRadius = 1.0f; • The above code is dog slow. • Good for views, very bad for table view cells or collection view cells
- 30. Is there a better way? • QuartzCore.framework • CoreText.framework
- 31. Pros/Cons
- 32. Pros/Cons • Advantages • Fast • Can render text and image within our 16ms deadline • Rendering highly customized text is hard
- 33. Pros/Cons • Advantages • Fast • Can render text and image within our 16ms deadline • Rendering highly customized text is hard This is BOLD and this is in italics.
- 34. QuartzCore • CALayer • CATextLayer • CAGradientLayer • CAShapeLayer
- 35. CoreText • NSAttributedString • NSMutableAttributedString • UIBezierPath
- 36. Composition @interface SCTCoreTextCell @property (strong, nonatomic) CATextLayer *nameTextLayer; @property (strong, nonatomic) CATextLayer *timeTextLayer; @property (strong, nonatomic) CALayer *avatarImageLayer; @property (strong, nonatomic) CALayer *avatarImageShadowLayer; @property (strong, nonatomic) CATextLayer *descriptionTextLayer; @end
- 37. CALayer - Images self.backgroundLayer = [CALayer layer]; self.backgroundLayer.frame = CGRectMake(0, 0, 320, 150); self.backgroundLayer.contentsScale = [[UIScreen mainScreen] scale]; self.backgroundLayer.actions = [NSDictionary actionsDictionary]; self.backgroundLayer.contents = (id) backgroundImage.CGImage; self.backgroundLayer.contentsCenter = CGRectMake(1.0/ backgroundImage.size.width, 8.0/backgroundImage.size.height, 1.0/ backgroundImage.size.width,1.0/backgroundImage.size.height); self.backgroundLayer.contentsGravity = kCAGravityResize; [self.contentView.layer addSublayer:self.backgroundLayer];
- 38. CATextLayer - Text self.nameTextLayer = [CATextLayer layer]; self.nameTextLayer.frame = CGRectMake(65, 3, 240, 21); self.nameTextLayer.alignmentMode = kCAAlignmentLeft; self.nameTextLayer.wrapped = YES; self.nameTextLayer.contentsScale = [[UIScreen mainScreen] scale]; self.nameTextLayer.actions = [NSDictionary actionsDictionary]; [self.contentView.layer addSublayer:self.nameTextLayer];
- 39. Composition +(NSDictionary*) actionsDictionary { return @{ @"onOrderIn" : [NSNull null], @"onOrderOut" : [NSNull null], @"sublayers" : [NSNull null], @"contents" : [NSNull null], @"position" : [NSNull null], @"bounds" : [NSNull null], @"onLayout" : [NSNull null], @"hidden" : [NSNull null], }; }); }
- 40. Contents
- 41. Contents • CALayer • Mostly Images • Rendering a graphics context in background
- 42. Contents • CALayer • Mostly Images • Rendering a graphics context in background
- 43. Contents • CALayer • Mostly Images • Rendering a graphics context in background • CAGradientLayer • Adding gradient backgrounds
- 44. Contents
- 45. Contents • CAShapeLayer • Mostly Paths • Use UIBezierPath to create a path
- 46. Contents • CAShapeLayer • Mostly Paths • Use UIBezierPath to create a path
- 47. Contents • CAShapeLayer • Mostly Paths • Use UIBezierPath to create a path • CATextLayer (Most useful + complicated) • Text (NSAttributedString)
- 48. NSAttributedString • The basic building block for complex text rendering • NSAttributedString = NSString + Attributes Dictionary
- 49. Demo 1 - Simple Bold
- 50. Composition -(void) setText { CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont boldSystemFontOfSize:17].fontName, [UIFont boldSystemFontOfSize:17].pointSize, NULL); NSDictionary *boldAttributes = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)ctBoldFont, (id)kCTFontAttributeName, [UIColor blackColor].CGColor, (id)kCTForegroundColorAttributeName, nil]; CFRelease(ctBoldFont); CTFontRef ctNormalFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont systemFontOfSize:16].fontName, [UIFont systemFontOfSize:16].pointSize, NULL); NSDictionary *normalAttributes = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)ctNormalFont, (id)kCTFontAttributeName, [UIColor blackColor].CGColor, (id)kCTForegroundColorAttributeName, nil]; CFRelease(ctNormalFont); NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"iOS Dev Scout is a AWESOME iOS group!" attributes:normalAttributes]; [string addAttributes:boldAttributes range:NSMakeRange(19, 7)]; self.textLayer.string = string; }
- 51. Composition CTFontRef ctNormalFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont systemFontOfSize:16].fontName, [UIFont systemFontOfSize:16].pointSize, NULL); NSDictionary *normalAttributes = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)ctNormalFont, (id)kCTFontAttributeName, [UIColor blackColor].CGColor, (id)kCTForegroundColorAttributeName, nil]; CFRelease(ctNormalFont);
- 52. Composition CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFont boldSystemFontOfSize:17].fontName, [UIFont boldSystemFontOfSize:17].pointSize, NULL); NSDictionary *boldAttributes = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)ctBoldFont, (id)kCTFontAttributeName, [UIColor blackColor].CGColor, (id)kCTForegroundColorAttributeName, nil]; CFRelease(ctBoldFont);
- 53. Composition NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:@"iOS Dev Scout is a AWESOME iOS group!" attributes:normalAttributes]; [string addAttributes:boldAttributes range:NSMakeRange(19, 7)]; self.textLayer.string = string;
- 54. What did we use? • kCTForegroundColorAttributeName • kCTFontAttributeName
- 55. What else available? • kCTCharacterShapeAttributeName • kCTKernAttributeName • kCTLigatureAttributeName • kCTParagraphStyleAttributeName • kCTStrokeWidthAttributeName • kCTStrokeColorAttributeName
- 56. What else available? • kCTSuperscriptAttributeName • kCTUnderlineColorAttributeName • kCTUnderlineStyleAttributeName • kCTVerticalFormsAttributeName • kCTGlyphInfoAttributeName • kCTRunDelegateAttributeName • NSLinkAttributeName (only on Mac)
- 57. What else available? • And that is just text. • Lot more for image rendering • Even lot more for animation • NSLinkAttributeName not available on iOS. You should look at OHAttributedLabel or play around with UIButtons
- 58. Demo 2 - Facebook
- 59. Performance tips
- 60. Performance tips • Use dispatch_once for almost any “constants” • UIFont, UIBezierPath, UIColor etc.,
- 61. Performance tips • Use dispatch_once for almost any “constants” • UIFont, UIBezierPath, UIColor etc.,
- 62. Performance tips • Use dispatch_once for almost any “constants” • UIFont, UIBezierPath, UIColor etc., • Use strptime* methods instead of NSDateFormatter • No support for locale, but crazy fast
- 63. Thanks @mugunthkumar mugunth@steinlogic.com iostraining.sg Available for consulting services iOS App Development API Design Mobile UX