Enhance the Look of Your App With Text Kit

Enhance the Look of Your App With Text Kit

• 1.
  Enhance the lookof your app with Text Kit Matteo Battaglio iOS Developer @ Tiltap 1
• 2.
  About Matteo Battaglio iOS Developer@ TilTap (@ Superpartes Innovation Campus) #pragma mark co-founder ! matteo.battaglio@gmail.com @MatteoBattaglio 2
• 3.
  Contents • • • • • What, and why,is Text Kit? Features Structure Advanced text layouts and use cases Fonts 3
• 4.
  What is TextKit?
• 5.
  What is TextKit? iOS 7 UI overhaul is pretty much about text Text Kit is one of the coolest features of iOS 7 5
• 6.
  What is TextKit? • • • Fast, modern text layout and rendering engine Built on top of Core Text Deeply integrated with UIKit Text Kit Framework Position 6
• 7.
  Why Text Kit?
• 8.
  Why? Until iOS 6,how did you do complex things with text? Core Text • • • Really advanced Very complex Not integrated with UIKit An overkill for most scenarios 8
• 9.
  Why? What about... UIWebView? • • Great forrendering web content UITextView friends (until iOS 6.X) use it under the hood but... • Need to deal with the DOM JavaScript • • poor performance not native poorly documented • Has issues with scroll views 9
• 10.
  Why? But: since iOS6 we have attributed text editing in UITextView Better than nothing, but: • Limited (supports bold, italic, underline, custom font size color) • Hardly customizable • no control over layout • no convenient way to customize text attributes 10
• 11.
  UIKit Integration In iOS7 UILabel UITextField UITextView Rewritten to take advantage of Text Kit 11
• 12.
  Features
• 13.
  Rich Text Editing • Interactivetext coloring • text folding • custom truncation 13
• 14.
  Text Wrapping • Paginatedtext
 • Multiple columns
 • Layout text around
 custom shapes 14
• 15.
  Text Styles • DynamicType mechanism
 • Optimized for legibility:
 thickness changes with size
 • Customizable by the user
 at runtime 15
• 16.
  Typographical concepts Def: Character
 Acharacter is the smallest unit of written language that carries meaning. It can correspond to a sound, an entire word, or even a symbol. A character is an abstract concept. Def: Glyph
 A glyph is an element of writing: an individual mark on a written medium that contributes to the meaning of what is written. Different glyphs of the character A.
• 17.
  Typographic Features • Kernings
 adjustments ofspacing between two letters • Ligatures
 replacements of two letters with one glyph that ‘merges’ them • Hypenation
 splitting of too-long words at line boundaries 17
• 18.
  Customizability • Extensible Object-Oriented Architecture: •Subclassing • Delegation • Notifications
 NSTextStorageWillProcessEditingNotification
 NSTextStorageDidProcessEditingNotification
 18
• 19.
  Text Effects In iOS7 we have just one effect: Letterpress 19
• 20.
  Structure
• 21.
  Primary Text KitObjects 21
• 22.
  Classes Composing TextKit 22
• 23.
  [Multithreading Tip] NLayoutManager, NSTextStorage,and NSTextContainer can be accessed from sub-threads as long as the app guarantees the access from a single thread. 23
• 24.
  NSTextStorage In the Model-View-Controllerparadigm, it represents the model ! • Direct subclass of NSMutableAttributedString • Deals with the text and its attributes • It is a class cluster: an abstract class that group a number of private concrete subclasses 24
• 25.
  Subclassing NSTextStorage • It canbe subclassed, by implementing 4 methods: • the first 2 are for inquiring purpose (inherited from NSAttributedString):
 -string
 -attributesAtIndex:effectiveRange: • the other 2 are for modifying the text (inherited from NSMutableAttributedString):
 -replaceCharactersInRange:withString:
 -setAttributes:range: 25
• 26.
  Text Attributes • 3Kinds • Character attributes:
 traits such as font, color,
 and subscript.
 Can be applied to a
 single char or to a range.
 • Paragraph attributes:
 traits such as indentation, tabs, and line spacing. • Document attributes:
 document-wide traits such as paper size, margins, and view zoom percentage. 26
• 27.
  NSTextStorage NSTextStorage manages Set of
 NSLayoutManager objects sothat each one can
 relayout and redisplay the text
 when and how it wants 27
• 28.
  NSLayoutManager In the Model-View-Controllerparadigm,
 it represents the controller ! It performs the following actions: • Controls text storage and text container objects • Generates glyphs from characters • Computes glyph locations and stores the information • Manages ranges of glyphs and characters 28
• 29.
  NSLayoutManager Features • Draws glyphsin text views when requested by the view • Computes bounding box rectangles for lines of text • Controls hyphenation • Manipulates character attributes and glyph properties
• 30.
  Layout Process Triggered bytext or attribute change notifications in the text storage
 2 steps: Glyph generation Glyph layout • Both are done lazily • NSLayoutManager caches the results to improve performance 30
• 31.
  Char to GlyphMapping Glyphs do not map 1:1 with characters ligatures
 truncation
 line wrapping modify the mapping of chars to glyphs. 31
• 32.
  Char GlyphMethods The layout manager keeps track of this mapping and provides: -(NSUInteger)characterIndexForGlyphAtIndex: (NSUInteger)aGlyphIndex; -(NSUInteger)glyphIndexForCharacterAtIndex:
 (NSUInteger)aCharIndex;
 and the bulk ones: -textContainerForGlyphAtIndex:effectiveRange:; -lineFragmentRectForGlyphAtIndex:effectiveRange:; -locationForGlyphAtIndex:(NSUInteger)aGlyphIndex; 32
• 33.
  Customizing Text Layout NSLayoutManagerDelegate • modifyline spacing: you can modify the spacing for every single line • • validate soft line breaking customize glyph mapping, e.g. when you substitute the chars of a password with bullets, or when you fold a line 33
• 34.
  NSTextContainer In the Model-View-Controllerparadigm,
 it represents the view
 
 • deals with the geometry
 of the text area
 • defines a coordinate space
 in which the layout manager lives 34
• 35.
  NSTextContainer It defines onesingle area in which to draw text. To draw in more areas (e.g. multiple pages or columns), just add multiple text containers to the layout manager. 35
• 36.
  Exclusion Paths Exclusion pathsare UIBezierPath objects that live in NSTextContainer’s coordinate system Upon updating exclusion paths in text container, layout manager can re-layout text instantaneously 36
• 37.
  Text Container CoordinateSystem Text container’s origin could be anywhere inside its parent view’s coordinate system 37
• 38.
  Line Fragments characters Layout manager linesof glyphs 38
• 39.
  Line Fragments Exclusion pathsbreak lines in parts Each part is called a line fragment 39
• 40.
  Line Fragment Coordinates Relativeto the text container coordinate system 40
• 41.
  Glyph Coordinates Relative tothe line fragment coordinate system 41
• 42.
  Character Location Glyph coordinate + Linefragment coordinate + Text container coordinate = UIView coordinate 42
• 43.
  Example: Character Location 
 Findingthe location of last character 43
• 44.
  Example: Hit Testing Findinga word under a touch 44
• 45.
  Text Attachments NSTextAttachment objects •are a type of text attribute • live in NSTextStorage • include geometry for contained
 data, including baseline • usually used for inline images • user can interact with them 45
• 46.
  Interacting With TextData Since iOS 6, UITextView supports data detection (links, phone numbers, etc) But you couldn’t customize its behavior (e.g. show a web page without leaving the app) ! With iOS 7, UITextViewDelegate provides handy methods:
 -textView:shouldInteractWithURL:inRange:
 -textView:shouldInteractWithTextAttachment:inRange: 46
• 47.
  Fonts
• 48.
  Font Descriptors UIFontDescriptor • describesa font with a dictionary of attributes
 + (UIFontDescriptor *)fontDescriptorWithFontAttributes: (NSDictionary *)attributes • used to create UIFont objects:
 + (UIFont *)fontWithDescriptor:(UIFontDescriptor*)descriptor size:(CGFloat)pointSize • query the system for available fonts that match particular attributes (names, traits, languages, etc) • can be archived: UIFont objects are dynamic and should not
 be archived 48
• 49.
  Font Descriptor UsageExamples • Language Tagging
 you can tell the system to treat different parts of text as different languages
 • Exclude certain characters from a font’s character set,
 to let the system fallback to another font 49
• 50.
  Symbolic Traits UIFontDescriptor letsyou apply traits like: • bold, italic, underline • expanded condensed • loose tight line spacing UIFontDescriptor *fontDescriptor = [UIFontDescriptor preferredFontDescriptorWithTextStyle: UIFontTextStyleBody]; ! UIFontDescriptor *boldFontDescriptor = [fontDescriptor fontDescriptorWithSymbolicTraits: UIFontDescriptorTraitBold]; ! UIFont *boldFont = [UIFont fontWithDescriptor: boldFontDescriptor size: 0.0]; 50
• 51.
  [Demo] Sample app:
 https://github.com/macguru/TextKitDemo by MaxSeelemann Showing: • Multi layout manager and multi text container configuration • Hit testing and real time word tagging • link highlighting custom line spacing • interactive exclusion paths
• 52.
  Resources • WWDC 2013Sessions • Session 210 - “Introducing Text Kit” • Session 220 - “Advanced Text Layouts and Effects with Text Kit” • Session 223 - “Using Fonts with Text Kit”
 • objc.io issue #5 - “Getting to Know TextKit”
 • Apple’s “Text Programming Guide for iOS” • Text Kit-specific chapter: “Using Text Kit to Draw and Manage Text” 52
• 53.
  #Thank You! 53