Hi-Performance TableViews with QuartzCore    and CoreText  Beginners guide to an advanced concept              Mugunth Kum...
About me
About me    •   Author of the iOS 5, iOS 6 Programming:        Pushing the Limits book - Reached the top        100 books ...
Why?•   What makes apps pleasant to use?    •   Fast scrolling    •   Why?
Why?
Why?•   iPhone is a direct manipulation device
Why?•   iPhone is a direct manipulation device•   iPhone screen is closer to your eye than your HDTV or your    computer m...
Why?•   iPhone is a direct manipulation device•   iPhone screen is closer to your eye than your HDTV or your    computer m...
Why?•   iPhone is a direct manipulation device•   iPhone screen is closer to your eye than your HDTV or your    computer m...
Agenda
Agenda•   Why?
Agenda•   Why?•   Three different methods
Agenda•   Why?•   Three different methods•   Pros and Cons
Agenda•   Why?•   Three different methods•   Pros and Cons•   QuartzCore/CoreText introduction
Agenda•   Why?•   Three different methods•   Pros and Cons•   QuartzCore/CoreText introduction•   A simple table view cell...
Agenda•   Why?•   Three different methods•   Pros and Cons•   QuartzCore/CoreText introduction•   A simple table view cell...
Compositing Table View Cells•   UITableViewCell    •   Subviews (UILabel, UIImageView)
Pros/Cons
Pros/Cons•   Advantages    •   Programmatically easy    •   Fast for compositing images    •   Built in cells are rendered...
Pros/Cons•   Advantages    •   Programmatically easy    •   Fast for compositing images    •   Built in cells are rendered...
Direct Drawing•   UITableViewCell drawRect    •   NSString -drawInRect, drawAtPoint    •   UIImage -drawInRect, drawAtPoint
Pros/Cons
Pros/Cons•   Advantages    •   Fast    •   Really fast!
Pros/Cons•   Advantages    •   Fast    •   Really fast!•   Drawbacks    •   Difficult (Annoyingly complex to build complex...
Hybrid•   A mix of drawRect + UIImageViews
Cons
Cons•   Still cannot render shadows around images views
Cons•     Still cannot render shadows around images views    self.view.layer.masksToBounds = NO;    self.view.layer.shadow...
Cons    •     Still cannot render shadows around images views        self.view.layer.masksToBounds = NO;        self.view....
Is there a better way?•   QuartzCore.framework•   CoreText.framework
Pros/Cons
Pros/Cons•   Advantages    •   Fast    •   Can render text and image within our 16ms deadline    •   Rendering highly cust...
Pros/Cons•   Advantages    •   Fast    •   Can render text and image within our 16ms deadline    •   Rendering highly cust...
QuartzCore•   CALayer•   CATextLayer•   CAGradientLayer•   CAShapeLayer
CoreText•   NSAttributedString•   NSMutableAttributedString•   UIBezierPath
Composition@interface SCTCoreTextCell@property   (strong,   nonatomic)   CATextLayer *nameTextLayer;@property   (strong,  ...
CALayer - Images  self.backgroundLayer = [CALayer layer];  self.backgroundLayer.frame = CGRectMake(0, 0, 320, 150);  self....
CATextLayer - Textself.nameTextLayer = [CATextLayer layer];self.nameTextLayer.frame = CGRectMake(65, 3, 240, 21);self.name...
Composition+(NSDictionary*) actionsDictionary {    return @{      @"onOrderIn" : [NSNull null],      @"onOrderOut" : [NSNu...
Contents
Contents•   CALayer    •   Mostly Images    •   Rendering a graphics context in background
Contents•   CALayer    •   Mostly Images    •   Rendering a graphics context in background
Contents•   CALayer    •   Mostly Images    •   Rendering a graphics context in background•   CAGradientLayer    •   Addin...
Contents
Contents•   CAShapeLayer    •   Mostly Paths    •   Use UIBezierPath to create a path
Contents•   CAShapeLayer    •   Mostly Paths    •   Use UIBezierPath to create a path
Contents•   CAShapeLayer    •   Mostly Paths    •   Use UIBezierPath to create a path•   CATextLayer (Most useful + compli...
NSAttributedString•   The basic building block for complex text rendering•   NSAttributedString = NSString + Attributes Di...
Demo 1 - Simple Bold
Composition-(void) setText {  CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFontboldSystemFontOfSiz...
Composition  CTFontRef ctNormalFont = CTFontCreateWithName((__bridge CFStringRef)[UIFontsystemFontOfSize:16].fontName, [UI...
Composition  CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFontboldSystemFontOfSize:17].fontName, [...
Composition  NSMutableAttributedString *string = [[NSMutableAttributedString alloc]initWithString:@"iOS Dev Scout is a AWE...
What did we use?•   kCTForegroundColorAttributeName•   kCTFontAttributeName
What else available?•   kCTCharacterShapeAttributeName•   kCTKernAttributeName•   kCTLigatureAttributeName•   kCTParagraph...
What else available?•   kCTSuperscriptAttributeName•   kCTUnderlineColorAttributeName•   kCTUnderlineStyleAttributeName•  ...
What else available?•   And that is just text.•   Lot more for image rendering•   Even lot more for animation•   NSLinkAtt...
Demo 2 - Facebook
Performance tips
Performance tips•   Use dispatch_once for almost any “constants”    •   UIFont, UIBezierPath, UIColor etc.,
Performance tips•   Use dispatch_once for almost any “constants”    •   UIFont, UIBezierPath, UIColor etc.,
Performance tips•   Use dispatch_once for almost any “constants”    •   UIFont, UIBezierPath, UIColor etc.,•   Use strptim...
Thanks       @mugunthkumar    mugunth@steinlogic.com         iostraining.sg    Available for consulting            service...
Upcoming SlideShare
Loading in …5
×

Hi performance table views with QuartzCore and CoreText

8,883
-1

Published on

QuartzCore and CoreText can be used to render text and graphics faster than UIKit elements. In this presentation you will learn some of these tricks

Published in: Technology
0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,883
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
118
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Hi performance table views with QuartzCore and CoreText

  1. 1. Hi-Performance TableViews with QuartzCore and CoreText Beginners guide to an advanced concept Mugunth Kumar Steinlogic Consulting and Training Pte Ltd
  2. 2. About me
  3. 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. 4. Why?• What makes apps pleasant to use? • Fast scrolling • Why?
  5. 5. Why?
  6. 6. Why?• iPhone is a direct manipulation device
  7. 7. Why?• iPhone is a direct manipulation device• iPhone screen is closer to your eye than your HDTV or your computer monitor
  8. 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. 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. 10. Agenda
  11. 11. Agenda• Why?
  12. 12. Agenda• Why?• Three different methods
  13. 13. Agenda• Why?• Three different methods• Pros and Cons
  14. 14. Agenda• Why?• Three different methods• Pros and Cons• QuartzCore/CoreText introduction
  15. 15. Agenda• Why?• Three different methods• Pros and Cons• QuartzCore/CoreText introduction• A simple table view cell example
  16. 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. 17. Compositing Table View Cells• UITableViewCell • Subviews (UILabel, UIImageView)
  18. 18. Pros/Cons
  19. 19. Pros/Cons• Advantages • Programmatically easy • Fast for compositing images • Built in cells are rendered differently
  20. 20. Pros/Cons• Advantages • Programmatically easy • Fast for compositing images • Built in cells are rendered differently• Drawbacks • Slow for text based tables
  21. 21. Direct Drawing• UITableViewCell drawRect • NSString -drawInRect, drawAtPoint • UIImage -drawInRect, drawAtPoint
  22. 22. Pros/Cons
  23. 23. Pros/Cons• Advantages • Fast • Really fast!
  24. 24. Pros/Cons• Advantages • Fast • Really fast!• Drawbacks • Difficult (Annoyingly complex to build complex layouts) • CGContextDrawImage is really slow compared to using UIImageView
  25. 25. Hybrid• A mix of drawRect + UIImageViews
  26. 26. Cons
  27. 27. Cons• Still cannot render shadows around images views
  28. 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. 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. 30. Is there a better way?• QuartzCore.framework• CoreText.framework
  31. 31. Pros/Cons
  32. 32. Pros/Cons• Advantages • Fast • Can render text and image within our 16ms deadline • Rendering highly customized text is hard
  33. 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. 34. QuartzCore• CALayer• CATextLayer• CAGradientLayer• CAShapeLayer
  35. 35. CoreText• NSAttributedString• NSMutableAttributedString• UIBezierPath
  36. 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. 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. 38. CATextLayer - Textself.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. 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. 40. Contents
  41. 41. Contents• CALayer • Mostly Images • Rendering a graphics context in background
  42. 42. Contents• CALayer • Mostly Images • Rendering a graphics context in background
  43. 43. Contents• CALayer • Mostly Images • Rendering a graphics context in background• CAGradientLayer • Adding gradient backgrounds
  44. 44. Contents
  45. 45. Contents• CAShapeLayer • Mostly Paths • Use UIBezierPath to create a path
  46. 46. Contents• CAShapeLayer • Mostly Paths • Use UIBezierPath to create a path
  47. 47. Contents• CAShapeLayer • Mostly Paths • Use UIBezierPath to create a path• CATextLayer (Most useful + complicated) • Text (NSAttributedString)
  48. 48. NSAttributedString• The basic building block for complex text rendering• NSAttributedString = NSString + Attributes Dictionary
  49. 49. Demo 1 - Simple Bold
  50. 50. Composition-(void) setText { CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFontboldSystemFontOfSize: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)[UIFontsystemFontOfSize: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. 51. Composition CTFontRef ctNormalFont = CTFontCreateWithName((__bridge CFStringRef)[UIFontsystemFontOfSize: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. 52. Composition CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)[UIFontboldSystemFontOfSize: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. 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. 54. What did we use?• kCTForegroundColorAttributeName• kCTFontAttributeName
  55. 55. What else available?• kCTCharacterShapeAttributeName• kCTKernAttributeName• kCTLigatureAttributeName• kCTParagraphStyleAttributeName• kCTStrokeWidthAttributeName• kCTStrokeColorAttributeName
  56. 56. What else available?• kCTSuperscriptAttributeName• kCTUnderlineColorAttributeName• kCTUnderlineStyleAttributeName• kCTVerticalFormsAttributeName• kCTGlyphInfoAttributeName• kCTRunDelegateAttributeName• NSLinkAttributeName (only on Mac)
  57. 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. 58. Demo 2 - Facebook
  59. 59. Performance tips
  60. 60. Performance tips• Use dispatch_once for almost any “constants” • UIFont, UIBezierPath, UIColor etc.,
  61. 61. Performance tips• Use dispatch_once for almost any “constants” • UIFont, UIBezierPath, UIColor etc.,
  62. 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. 63. Thanks @mugunthkumar mugunth@steinlogic.com iostraining.sg Available for consulting services iOS App Development API Design Mobile UX
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×