Session 230 - Advanced Attributed Strings for iOS

Transcript

1. These are confidential sessions—please refrain from streaming, blogging, or taking pictures Desktop class effects on a mobile device Session 230 Advanced Attributed Strings for iOS Ian Baird Label Engineer
2. Agenda
3. Agenda •Advanced Attributes
4. Agenda •Advanced Attributes •Text effects in your App
5. Agenda •Advanced Attributes •Text effects in your App •Contexts and Options
6. Advanced Attributes
7. Common attributes Advanced Attributes
8. Common attributes Advanced Attributes Big red dog.
9. Common attributes Advanced Attributes NSFontAttributeName Big red dog.
10. Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName Big red dog.
11. Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName Big red dog.
12. Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName alignment Big red dog.
13. Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName alignment lineBreakMode Big red dog.
14. Advanced Attributes NSStrokeColorAttributeName—NSStrokeWidthAttributeName
15. Advanced Attributes NSStrokeColorAttributeName—NSStrokeWidthAttributeName
16. NSStrokeWidthAttribute Name Advanced Attributes
17. NSStrokeWidthAttribute Name Advanced Attributes Positive width (stroke only)—@3.0
18. NSStrokeWidthAttribute Name Advanced Attributes Positive width (stroke only)—@3.0 Negative width (stroke & fill)—@-3.0
19. NSStrokeWidthAttribute Name Advanced Attributes Positive width (stroke only)—@3.0 Negative width (stroke & fill)—@-3.0 None—nil
20. Advanced Attributes NSShadowAttributeName
21. Advanced Attributes NSShadowAttributeName
22. NSShadow Advanced Attributes •Value class in iOS Shadow
23. NSShadow Advanced Attributes •Value class in iOS shadowColor Shadow
24. NSShadow Advanced Attributes •Value class in iOS shadowColor shadowOffset Shadow
25. NSShadow Advanced Attributes •Value class in iOS shadowColor shadowOffset shadowBlurRadius Shadow
26. Advanced Attributes NSKernAttributeName
27. Advanced Attributes NSKernAttributeName
28. Advanced Attributes NSKernAttributeName
29. NSKernAttributeName Advanced Attributes
30. NSKernAttributeName Advanced Attributes •Kerning will vary from font to font
31. NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null]
32. NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null] •Disable kerning – @0.0
33. NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null] •Disable kerning – @0.0 •Any other value adjusts the kerning by a number of points @{NSKernAttributeName: [NSNull null]}
34. NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null] •Disable kerning – @0.0 •Any other value adjusts the kerning by a number of points @{NSKernAttributeName: @2.0}
35. NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null] •Disable kerning – @0.0 •Any other value adjusts the kerning by a number of points @{NSKernAttributeName: @-2.0}
36. NSLigatureAttributeName Advanced Attributes
37. NSLigatureAttributeName Advanced Attributes
38. NSLigatureAttributeName Advanced Attributes
39. NSLigatureAttributeName Advanced Attributes
40. NSLigatureAttributeName Advanced Attributes
41. NSBackgroundColorAttributeName Advanced Attributes
42. NSBackgroundColorAttributeName Advanced Attributes
43. Advanced Attributes NSUnderlineStyleAttributeName
44. Advanced Attributes NSUnderlineStyleAttributeName
45. Advanced Attributes NSStrikethroughStyleAttributeName
46. Advanced Attributes NSStrikethroughStyleAttributeName
47. Line height NSParagraphStyle •Controls the line height
48. Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight
49. Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight ▪ Usually set to same value
50. Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight ▪ Usually set to same value ▪ Moves baseline
51. Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight ▪ Usually set to same value ▪ Moves baseline ▪ Used by Stocks
52. NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ▪ a.k.a. “leading” ▪ included in line fragment heights Spacing
53. NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ▪ a.k.a. “leading” ▪ included in line fragment heights Spacing
54. NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing Spacing
55. NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ▪ a.k.a. “leading” Spacing
56. NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ▪ a.k.a. “leading” ▪ included in line fragment heights Spacing
57. •Controls the gap between lines in the paragraph - lineSpacing Spacing NSParagraphStyle This paragraph is using the normal line spacing value.
58. •Controls the gap between lines in the paragraph - lineSpacing Spacing NSParagraphStyle The line spacing value for this paragraph is 30.0. 30.0
59. •Controls the gap between lines and paragraphs - paragraphSpacing More spacing NSParagraphStyle This paragraph has 30.0 paragraph spacing. This paragraph has 0 spacing values. 30.0
60. •Controls the gap between lines and paragraphs - paragraphSpacingBefore More spacing NSParagraphStyle This paragraph has 0 spacing values. The spacing value before this paragraph is 30.0. 30.0
61. •Controls left and right margins - headIndent Indentation NSParagraphStyle This is a normal paragraph that has no indentation specified.
62. •Controls left and right margins - headIndent Indentation NSParagraphStyle This paragraph has 30.0 head indent. 30.0
63. •Controls left and right margins - tailIndent Indentation NSParagraphStyle This paragraph has 90.0 tail indent. -90.0
64. •Controls left and right margins - firstLineHeadIndent Indentation NSParagraphStyle This is a normal paragraph that has no indentation specified. 30.0
65. Hyphenation NSParagraphStyle
66. Hyphenation NSParagraphStyle •Control hyphenation
67. Hyphenation NSParagraphStyle •Control hyphenation - hyphenationFactor
68. Hyphenation NSParagraphStyle •Control hyphenation - hyphenationFactor Disabled—0.0f
69. Hyphenation NSParagraphStyle •Control hyphenation - hyphenationFactor Disabled—0.0f Enabled—1.0f
70. Text Effects in Your App
71. Text Effects in Your App Using advanced text effects to beautify and enhance John Appleseed
72. Text Effects in Your App Using advanced text effects to beautify and enhance
73. Text Effects in Your App Using advanced text effects to beautify and enhance
74. Touch Me Text Effects in Your App Using advanced text effects to beautify and enhance
75. Text Effects in Your App Using advanced text effects to beautify and enhance
76. UIKit caveats Text Effects in Your App
77. UIKit caveats Text Effects in Your App ▪ UIKit supplies default values for
78. UIKit caveats Text Effects in Your App ▪ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE]
79. UIKit caveats Text Effects in Your App ▪ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE] NSForegroundColorAttributeName—[UIColor blackColor]
80. UIKit caveats Text Effects in Your App ▪ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE] NSForegroundColorAttributeName—[UIColor blackColor] NSKernAttributeName—@0.0
81. UIKit caveats Text Effects in Your App ▪ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE] NSForegroundColorAttributeName—[UIColor blackColor] NSKernAttributeName—@0.0 NSLigatureAttributeName—@0
82. Text Effects in Your App Table Views
83. Text Effects in Your App Table Views UITableViewHeaderFooterView .textLabel .attributedText
84. Text Effects in Your App Table Views NSShadowAttributedName UITableViewHeaderFooterView .textLabel .attributedText
85. Text Effects in Your App Table Views NSKernAttributeName UITableViewCell .textLabel .attributedText
86. Text Effects in Your App Table Views NSKernAttributeName UITableViewCell .textLabel .attributedText NSLigatureAttributeName
87. Contexts and Options
88. NSStringDrawing API •Simple drawing/sizing methods - (void)drawInRect:(CGRect)rect; - (void)drawAtPoint:(CGPoint)point; - (CGSize)size; •Extended drawing/sizing methods - (void)drawWithRect:(CGRect)rect ! options:(NSStringDrawingOptions)options ! context:(NSStringDrawingContext *)context; - (CGRect)boundingRectWithSize:(CGSize)size ! options:(NSStringDrawingOptions)options ! context:(NSStringDrawingContext *)context;
89. NSStringDrawing API •Simple drawing/sizing methods - (void)drawInRect:(CGRect)rect; - (void)drawAtPoint:(CGPoint)point; - (CGSize)size; •Extended drawing/sizing methods - (void)drawWithRect:(CGRect)rect ! options:(NSStringDrawingOptions)options ! context:(NSStringDrawingContext *)context; - (CGRect)boundingRectWithSize:(CGSize)size ! options:(NSStringDrawingOptions)options ! context:(NSStringDrawingContext *)context;
90. Extended NSStringDrawing
91. Extended NSStringDrawing •Additional drawing/sizing capabilities
92. Extended NSStringDrawing •Additional drawing/sizing capabilities •Baseline vs. line fragment origin layout
93. Extended NSStringDrawing •Additional drawing/sizing capabilities •Baseline vs. line fragment origin layout •Specify the constraining size
94. Values NSStringDrawingOptions •Supported values
95. Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin
96. Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine
97. Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading
98. Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading •Specifying multiple options
99. Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading •Specifying multiple options ▪ Truncate last visible line and use line fragment origin
100. Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading •Specifying multiple options ▪ Truncate last visible line and use line fragment origin ▪ NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin
101. NSStringDrawingUsesLineFragmentOrigin Origin
102. NSStringDrawingUsesLineFragmentOrigin Origin •The origin of the rect determines where the rendering begins
103. NSStringDrawingUsesLineFragmentOrigin Origin •The origin of the rect determines where the rendering begins - (void)drawWithRect:(CGRect)rect options:context:
104. NSStringDrawingUsesLineFragmentOrigin Baseline Origin
105. NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline AaBbCcDdEeFfGgHhIiJj
106. •Origin at baseline NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj
107. •Origin at baseline •Default mode for extended API NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj
108. •Origin at baseline •Default mode for extended API •Usually used with a single line of text NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj
109. •Origin at baseline •Default mode for extended API •Usually used with a single line of text NSStringDrawingUsesLineFragmentOrigin not set NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj
110. NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin AaBbCcDdEe FfGgHhIiJj
111. NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin AaBbCcDdEe FfGgHhIiJj
112. •Origin at upper-left of line fragment NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin Origin AaBbCcDdEe FfGgHhIiJj
113. •Origin at upper-left of line fragment •Default mode for simple API NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin Origin AaBbCcDdEe FfGgHhIiJj
114. •Origin at upper-left of line fragment •Default mode for simple API •Usually used with multiple lines of text NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin Origin AaBbCcDdEe FfGgHhIiJj
115. •Origin at upper-left of line fragment •Default mode for simple API •Usually used with multiple lines of text NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin Origin AaBbCcDdEe FfGgHhIiJj
116. NSStringDrawingTruncatesLastVisibleLine Controlling Truncation
117. NSStringDrawingTruncatesLastVisibleLine Controlling Truncation
118. Setup NSStringDrawingContext
119. Setup NSStringDrawingContext •Read-write properties (for you to setup): Big red dog.
120. Setup NSStringDrawingContext •Read-write properties (for you to setup): minimumScaleFactor Big red …
121. Setup NSStringDrawingContext •Read-write properties (for you to setup): minimumScaleFactor minimumTrackingAdjustment Big red dog.
122. Data NSStringDrawingContext •Read-only properties
123. Data NSStringDrawingContext •Read-only properties actualScaleFactor Big red … 50%
124. Data NSStringDrawingContext •Read-only properties actualScaleFactor actualTrackingAdjustment Big red dog. 0.15
125. Data NSStringDrawingContext •Read-only properties actualScaleFactor actualTrackingAdjustment totalBounds Big red dog. 376 105
126. NSStringDrawingContext Consistent font label sizes and tracking
127. NSStringDrawingContext Consistent font label sizes and tracking scaleFactor = 1.0 scaleFactor = 0.8
128. NSStringDrawingContext Consistent font label sizes and tracking scaleFactor = 0.8 scaleFactor = 0.8
129. NSStringDrawingContext One-pass layout
130. NSStringDrawingContext One-pass layout
131. NSStringDrawingContext One-pass layout
132. NSStringDrawingContext One-pass layout
133. NSStringDrawingContext One-pass layout
134. NSStringDrawingContext One-pass layout
135. NSStringDrawingContext One-pass layout
136. NSStringDrawingContext One-pass layout
137. NSStringDrawingContext One-pass layout
138. NSStringDrawingContext One-pass layout
139. Concurrency NSStringDrawing
140. Concurrency NSStringDrawing •NSStringDrawing calls are thread safe
141. Concurrency NSStringDrawing •NSStringDrawing calls are thread safe •NSStringDrawingContext instances are not ▪ No sharing instances between queues
142. Demo Johannes Fortmann UIKit Engineer
143. Demo Recap
144. Demo Recap •Use advanced text effects to communicate emphasis, selection
145. Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible
146. Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible •Drawing on the background works
147. Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible •Drawing on the background works ▪ Use UIImage and drawInRect:
148. Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible •Drawing on the background works ▪ Use UIImage and drawInRect: ▪ Do not manipulate UI elements from the background queue
149. Summary
150. Summary •Advanced attributes
151. Summary •Advanced attributes •Text effects in your App
152. Summary •Advanced attributes •Text effects in your App •Contexts and options
153. More Information Jake Behrens UI Frameworks Evangelist behrens@apple.com Documentation UIKit Framework Reference http://developer.apple.com/library/ios/ Apple Developer Forums http://devforums.apple.com
154. Related Sessions Introduction to Attributed Strings for iOS Mission Wednesday 3:15PM Core Text and Fonts Russian Hill Wednesday 4:30PM Keyboard Input in iOS Russian Hill Wednesday 2:00PM
155. Labs Attributed Strings & Text Lab Essentials Lab A Thursday 11:30AM