Your SlideShare is downloading. ×
0
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Hi performance table views with QuartzCore and CoreText
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hi performance table views with QuartzCore and CoreText

7,622

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

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
7,622
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
114
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Hi-Performance TableViews 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 - 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. 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)[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. 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. 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. 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

×