Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Agenda

Slide 3

Slide 3 text

Agenda •Advanced Attributes

Slide 4

Slide 4 text

Agenda •Advanced Attributes •Text effects in your App

Slide 5

Slide 5 text

Agenda •Advanced Attributes •Text effects in your App •Contexts and Options

Slide 6

Slide 6 text

Advanced Attributes

Slide 7

Slide 7 text

Common attributes Advanced Attributes

Slide 8

Slide 8 text

Common attributes Advanced Attributes Big red dog.

Slide 9

Slide 9 text

Common attributes Advanced Attributes NSFontAttributeName Big red dog.

Slide 10

Slide 10 text

Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName Big red dog.

Slide 11

Slide 11 text

Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName Big red dog.

Slide 12

Slide 12 text

Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName alignment Big red dog.

Slide 13

Slide 13 text

Common attributes Advanced Attributes NSFontAttributeName NSForegroundColorAttributeName NSParagraphStyleAttributeName alignment lineBreakMode Big red dog.

Slide 14

Slide 14 text

Advanced Attributes NSStrokeColorAttributeName—NSStrokeWidthAttributeName

Slide 15

Slide 15 text

Advanced Attributes NSStrokeColorAttributeName—NSStrokeWidthAttributeName

Slide 16

Slide 16 text

NSStrokeWidthAttribute Name Advanced Attributes

Slide 17

Slide 17 text

NSStrokeWidthAttribute Name Advanced Attributes Positive width (stroke only)—@3.0

Slide 18

Slide 18 text

NSStrokeWidthAttribute Name Advanced Attributes Positive width (stroke only)—@3.0 Negative width (stroke & fill)—@-3.0

Slide 19

Slide 19 text

NSStrokeWidthAttribute Name Advanced Attributes Positive width (stroke only)—@3.0 Negative width (stroke & fill)—@-3.0 None—nil

Slide 20

Slide 20 text

Advanced Attributes NSShadowAttributeName

Slide 21

Slide 21 text

Advanced Attributes NSShadowAttributeName

Slide 22

Slide 22 text

NSShadow Advanced Attributes •Value class in iOS Shadow

Slide 23

Slide 23 text

NSShadow Advanced Attributes •Value class in iOS shadowColor Shadow

Slide 24

Slide 24 text

NSShadow Advanced Attributes •Value class in iOS shadowColor shadowOffset Shadow

Slide 25

Slide 25 text

NSShadow Advanced Attributes •Value class in iOS shadowColor shadowOffset shadowBlurRadius Shadow

Slide 26

Slide 26 text

Advanced Attributes NSKernAttributeName

Slide 27

Slide 27 text

Advanced Attributes NSKernAttributeName

Slide 28

Slide 28 text

Advanced Attributes NSKernAttributeName

Slide 29

Slide 29 text

NSKernAttributeName Advanced Attributes

Slide 30

Slide 30 text

NSKernAttributeName Advanced Attributes •Kerning will vary from font to font

Slide 31

Slide 31 text

NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null]

Slide 32

Slide 32 text

NSKernAttributeName Advanced Attributes •Kerning will vary from font to font •Enable auto-kerning with nil or [NSNull null] •Disable kerning – @0.0

Slide 33

Slide 33 text

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]}

Slide 34

Slide 34 text

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}

Slide 35

Slide 35 text

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}

Slide 36

Slide 36 text

NSLigatureAttributeName Advanced Attributes

Slide 37

Slide 37 text

NSLigatureAttributeName Advanced Attributes

Slide 38

Slide 38 text

NSLigatureAttributeName Advanced Attributes

Slide 39

Slide 39 text

NSLigatureAttributeName Advanced Attributes

Slide 40

Slide 40 text

NSLigatureAttributeName Advanced Attributes

Slide 41

Slide 41 text

NSBackgroundColorAttributeName Advanced Attributes

Slide 42

Slide 42 text

NSBackgroundColorAttributeName Advanced Attributes

Slide 43

Slide 43 text

Advanced Attributes NSUnderlineStyleAttributeName

Slide 44

Slide 44 text

Advanced Attributes NSUnderlineStyleAttributeName

Slide 45

Slide 45 text

Advanced Attributes NSStrikethroughStyleAttributeName

Slide 46

Slide 46 text

Advanced Attributes NSStrikethroughStyleAttributeName

Slide 47

Slide 47 text

Line height NSParagraphStyle •Controls the line height

Slide 48

Slide 48 text

Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight

Slide 49

Slide 49 text

Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight ■ Usually set to same value

Slide 50

Slide 50 text

Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight ■ Usually set to same value ■ Moves baseline

Slide 51

Slide 51 text

Line height NSParagraphStyle •Controls the line height - minimumLineHeight / maximumLineHeight ■ Usually set to same value ■ Moves baseline ■ Used by Stocks

Slide 52

Slide 52 text

NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ■ a.k.a. “leading” ■ included in line fragment heights Spacing

Slide 53

Slide 53 text

NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ■ a.k.a. “leading” ■ included in line fragment heights Spacing

Slide 54

Slide 54 text

NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing Spacing

Slide 55

Slide 55 text

NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ■ a.k.a. “leading” Spacing

Slide 56

Slide 56 text

NSParagraphStyle •Controls the gap between lines and paragraphs - lineSpacing ■ a.k.a. “leading” ■ included in line fragment heights Spacing

Slide 57

Slide 57 text

•Controls the gap between lines in the paragraph - lineSpacing Spacing NSParagraphStyle This paragraph is using the normal line spacing value.

Slide 58

Slide 58 text

•Controls the gap between lines in the paragraph - lineSpacing Spacing NSParagraphStyle The line spacing value for this paragraph is 30.0. 30.0

Slide 59

Slide 59 text

•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

Slide 60

Slide 60 text

•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

Slide 61

Slide 61 text

•Controls left and right margins - headIndent Indentation NSParagraphStyle This is a normal paragraph that has no indentation specified.

Slide 62

Slide 62 text

•Controls left and right margins - headIndent Indentation NSParagraphStyle This paragraph has 30.0 head indent. 30.0

Slide 63

Slide 63 text

•Controls left and right margins - tailIndent Indentation NSParagraphStyle This paragraph has 90.0 tail indent. -90.0

Slide 64

Slide 64 text

•Controls left and right margins - firstLineHeadIndent Indentation NSParagraphStyle This is a normal paragraph that has no indentation specified. 30.0

Slide 65

Slide 65 text

Hyphenation NSParagraphStyle

Slide 66

Slide 66 text

Hyphenation NSParagraphStyle •Control hyphenation

Slide 67

Slide 67 text

Hyphenation NSParagraphStyle •Control hyphenation - hyphenationFactor

Slide 68

Slide 68 text

Hyphenation NSParagraphStyle •Control hyphenation - hyphenationFactor Disabled—0.0f

Slide 69

Slide 69 text

Hyphenation NSParagraphStyle •Control hyphenation - hyphenationFactor Disabled—0.0f Enabled—1.0f

Slide 70

Slide 70 text

Text Effects in Your App

Slide 71

Slide 71 text

Text Effects in Your App Using advanced text effects to beautify and enhance John Appleseed

Slide 72

Slide 72 text

Text Effects in Your App Using advanced text effects to beautify and enhance

Slide 73

Slide 73 text

Text Effects in Your App Using advanced text effects to beautify and enhance

Slide 74

Slide 74 text

Touch Me Text Effects in Your App Using advanced text effects to beautify and enhance

Slide 75

Slide 75 text

Text Effects in Your App Using advanced text effects to beautify and enhance

Slide 76

Slide 76 text

UIKit caveats Text Effects in Your App

Slide 77

Slide 77 text

UIKit caveats Text Effects in Your App ■ UIKit supplies default values for

Slide 78

Slide 78 text

UIKit caveats Text Effects in Your App ■ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE]

Slide 79

Slide 79 text

UIKit caveats Text Effects in Your App ■ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE] NSForegroundColorAttributeName—[UIColor blackColor]

Slide 80

Slide 80 text

UIKit caveats Text Effects in Your App ■ UIKit supplies default values for NSFontAttributeName—[UIFont systemFontWithSize:DEFAULT_FONT_SIZE] NSForegroundColorAttributeName—[UIColor blackColor] NSKernAttributeName—@0.0

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Text Effects in Your App Table Views

Slide 83

Slide 83 text

Text Effects in Your App Table Views UITableViewHeaderFooterView .textLabel .attributedText

Slide 84

Slide 84 text

Text Effects in Your App Table Views NSShadowAttributedName UITableViewHeaderFooterView .textLabel .attributedText

Slide 85

Slide 85 text

Text Effects in Your App Table Views NSKernAttributeName UITableViewCell .textLabel .attributedText

Slide 86

Slide 86 text

Text Effects in Your App Table Views NSKernAttributeName UITableViewCell .textLabel .attributedText NSLigatureAttributeName

Slide 87

Slide 87 text

Contexts and Options

Slide 88

Slide 88 text

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;

Slide 89

Slide 89 text

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;

Slide 90

Slide 90 text

Extended NSStringDrawing

Slide 91

Slide 91 text

Extended NSStringDrawing •Additional drawing/sizing capabilities

Slide 92

Slide 92 text

Extended NSStringDrawing •Additional drawing/sizing capabilities •Baseline vs. line fragment origin layout

Slide 93

Slide 93 text

Extended NSStringDrawing •Additional drawing/sizing capabilities •Baseline vs. line fragment origin layout •Specify the constraining size

Slide 94

Slide 94 text

Values NSStringDrawingOptions •Supported values

Slide 95

Slide 95 text

Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin

Slide 96

Slide 96 text

Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine

Slide 97

Slide 97 text

Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading

Slide 98

Slide 98 text

Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading •Specifying multiple options

Slide 99

Slide 99 text

Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading •Specifying multiple options ■ Truncate last visible line and use line fragment origin

Slide 100

Slide 100 text

Values NSStringDrawingOptions •Supported values NSStringDrawingUsesLineFragmentOrigin NSStringDrawingTruncatesLastVisibleLine NSStringDrawingUsesFontLeading •Specifying multiple options ■ Truncate last visible line and use line fragment origin ■ NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin

Slide 101

Slide 101 text

NSStringDrawingUsesLineFragmentOrigin Origin

Slide 102

Slide 102 text

NSStringDrawingUsesLineFragmentOrigin Origin •The origin of the rect determines where the rendering begins

Slide 103

Slide 103 text

NSStringDrawingUsesLineFragmentOrigin Origin •The origin of the rect determines where the rendering begins - (void)drawWithRect:(CGRect)rect options:context:

Slide 104

Slide 104 text

NSStringDrawingUsesLineFragmentOrigin Baseline Origin

Slide 105

Slide 105 text

NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline AaBbCcDdEeFfGgHhIiJj

Slide 106

Slide 106 text

•Origin at baseline NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj

Slide 107

Slide 107 text

•Origin at baseline •Default mode for extended API NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj

Slide 108

Slide 108 text

•Origin at baseline •Default mode for extended API •Usually used with a single line of text NSStringDrawingUsesLineFragmentOrigin Baseline Origin Baseline Origin AaBbCcDdEeFfGgHhIiJj

Slide 109

Slide 109 text

•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

Slide 110

Slide 110 text

NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin AaBbCcDdEe FfGgHhIiJj

Slide 111

Slide 111 text

NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin AaBbCcDdEe FfGgHhIiJj

Slide 112

Slide 112 text

•Origin at upper-left of line fragment NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin Origin AaBbCcDdEe FfGgHhIiJj

Slide 113

Slide 113 text

•Origin at upper-left of line fragment •Default mode for simple API NSStringDrawingUsesLineFragmentOrigin Line Fragment Origin Origin AaBbCcDdEe FfGgHhIiJj

Slide 114

Slide 114 text

•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

Slide 115

Slide 115 text

•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

Slide 116

Slide 116 text

NSStringDrawingTruncatesLastVisibleLine Controlling Truncation

Slide 117

Slide 117 text

NSStringDrawingTruncatesLastVisibleLine Controlling Truncation

Slide 118

Slide 118 text

Setup NSStringDrawingContext

Slide 119

Slide 119 text

Setup NSStringDrawingContext •Read-write properties (for you to setup): Big red dog.

Slide 120

Slide 120 text

Setup NSStringDrawingContext •Read-write properties (for you to setup): minimumScaleFactor Big red …

Slide 121

Slide 121 text

Setup NSStringDrawingContext •Read-write properties (for you to setup): minimumScaleFactor minimumTrackingAdjustment Big red dog.

Slide 122

Slide 122 text

Data NSStringDrawingContext •Read-only properties

Slide 123

Slide 123 text

Data NSStringDrawingContext •Read-only properties actualScaleFactor Big red … 50%

Slide 124

Slide 124 text

Data NSStringDrawingContext •Read-only properties actualScaleFactor actualTrackingAdjustment Big red dog. 0.15

Slide 125

Slide 125 text

Data NSStringDrawingContext •Read-only properties actualScaleFactor actualTrackingAdjustment totalBounds Big red dog. 376 105

Slide 126

Slide 126 text

NSStringDrawingContext Consistent font label sizes and tracking

Slide 127

Slide 127 text

NSStringDrawingContext Consistent font label sizes and tracking scaleFactor = 1.0 scaleFactor = 0.8

Slide 128

Slide 128 text

NSStringDrawingContext Consistent font label sizes and tracking scaleFactor = 0.8 scaleFactor = 0.8

Slide 129

Slide 129 text

NSStringDrawingContext One-pass layout

Slide 130

Slide 130 text

NSStringDrawingContext One-pass layout

Slide 131

Slide 131 text

NSStringDrawingContext One-pass layout

Slide 132

Slide 132 text

NSStringDrawingContext One-pass layout

Slide 133

Slide 133 text

NSStringDrawingContext One-pass layout

Slide 134

Slide 134 text

NSStringDrawingContext One-pass layout

Slide 135

Slide 135 text

NSStringDrawingContext One-pass layout

Slide 136

Slide 136 text

NSStringDrawingContext One-pass layout

Slide 137

Slide 137 text

NSStringDrawingContext One-pass layout

Slide 138

Slide 138 text

NSStringDrawingContext One-pass layout

Slide 139

Slide 139 text

Concurrency NSStringDrawing

Slide 140

Slide 140 text

Concurrency NSStringDrawing •NSStringDrawing calls are thread safe

Slide 141

Slide 141 text

Concurrency NSStringDrawing •NSStringDrawing calls are thread safe •NSStringDrawingContext instances are not ■ No sharing instances between queues

Slide 142

Slide 142 text

Demo Johannes Fortmann UIKit Engineer

Slide 143

Slide 143 text

Demo Recap

Slide 144

Slide 144 text

Demo Recap •Use advanced text effects to communicate emphasis, selection

Slide 145

Slide 145 text

Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible

Slide 146

Slide 146 text

Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible •Drawing on the background works

Slide 147

Slide 147 text

Demo Recap •Use advanced text effects to communicate emphasis, selection •Make your text more legible •Drawing on the background works ■ Use UIImage and drawInRect:

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

Summary

Slide 150

Slide 150 text

Summary •Advanced attributes

Slide 151

Slide 151 text

Summary •Advanced attributes •Text effects in your App

Slide 152

Slide 152 text

Summary •Advanced attributes •Text effects in your App •Contexts and options

Slide 153

Slide 153 text

More Information Jake Behrens UI Frameworks Evangelist [email protected] Documentation UIKit Framework Reference http://developer.apple.com/library/ios/ Apple Developer Forums http://devforums.apple.com

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

Labs Attributed Strings & Text Lab Essentials Lab A Thursday 11:30AM

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

No content

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

No content