Upload
matteo-battaglio
View
5.643
Download
1
Embed Size (px)
Citation preview
Matteo BattaglioiOS Developer @ Tiltap
Enhance the look of your app with Text Kit
���1
About
Matteo BattaglioiOS Developer @ TilTap (@ Superpartes Innovation Campus)
#pragma mark co-founder
!
@MatteoBattaglio
���2
Contents• What, and why, is Text Kit?
• Features
• Structure
• Advanced text layouts and use cases
• Fonts
���3
What is Text Kit?
What is Text Kit?
Text Kit is one of the coolest features of iOS 7
iOS 7 UI overhaul is pretty much about text
���5
What is Text Kit?
• Fast, modern text layout and rendering engine
• Built on top of Core Text
• Deeply integrated with UIKit
Text Kit Framework Position
���6
Why Text Kit?
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
Why?What about...
• Great for rendering 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
UIWebView?
Why?
But: since iOS 6 we have attributed text editing in UITextView
• Limited (supports bold, italic, underline, custom font size & color)
• Hardly customizable
• no control over layout
• no convenient way to customize text attributes
Better than nothing, but:
���10
UIKit Integration
In iOS 7
UILabel
UITextField
UITextView
Rewritten to take advantage of Text Kit
���11
Features
Rich Text Editing
• Interactive text coloring
• text folding
• custom truncation
���13
Text Wrapping
•Paginated text
•Multiple columns
• Layout text aroundcustom shapes
���14
Text Styles
•Dynamic Type mechanism
•Optimized for legibility:thickness changes with size
•Customizable by the userat runtime
���15
Typographical concepts
Def: GlyphA 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.
Def: CharacterA character 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.
Typographic Features• Kernings
adjustments of spacing between two letters
• Ligaturesreplacements of two letters with one glyph that ‘merges’ them
• Hypenationsplitting of too-long words at line boundaries
���17
Customizability• Extensible Object-Oriented Architecture:
•Subclassing
•Delegation
•NotificationsNSTextStorageWillProcessEditingNotificationNSTextStorageDidProcessEditingNotification
���18
Text EffectsIn iOS 7 we have just one effect:
Letterpress
���19
Structure
Primary Text Kit Objects
���21
Classes Composing Text Kit
���22
[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
NSTextStorage
In the Model-View-Controller paradigm,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
Subclassing NSTextStorage• It can be 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
Text Attributes
• Paragraph attributes:traits such as indentation, tabs, and line spacing.
• Document attributes:document-wide traits such as paper size, margins, and view zoom percentage.
• 3 Kinds
• Character attributes:traits such as font, color,and subscript.Can be applied to asingle char or to a range.
���26
NSTextStorage
Set ofNSLayoutManager objects
manages
each one canrelayout and redisplay the text
when and how it wants
so that
NSTextStorage
���27
NSLayoutManager
In the Model-View-Controller paradigm,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
NSLayoutManager Features
• Draws glyphs in text views when requested by the view
• Computes bounding box rectangles for lines of text
• Controls hyphenation
• Manipulates character attributes and glyph properties
Layout ProcessTriggered by text or attribute change notifications in the text storage
2 steps:
Glyphgeneration
Glyphlayout
• Both are done lazily
• NSLayoutManager caches the results to improve performance
���30
Char to Glyph MappingGlyphs do not map 1:1 with characters
ligaturestruncation
line wrapping
modify the mapping of chars to glyphs.
���31
Char & Glyph MethodsThe 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
Customizing Text Layout
NSLayoutManagerDelegate
• modify line 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
NSTextContainerIn the Model-View-Controller paradigm,
it represents the view
• deals with the geometryof the text area
• defines a coordinate spacein which the layout manager lives
���34
NSTextContainerIt defines one single 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
Exclusion PathsExclusion paths are UIBezierPath objects that live in NSTextContainer’s coordinate system
���36
Upon updating exclusion paths in text container, layout manager can re-layout text instantaneously
Text Container Coordinate System
Text container’s origin could be anywhere inside its parent view’s coordinate system
���37
Line Fragments
Layout manager
characters
���38
lines of glyphs
Line FragmentsExclusion paths break lines in parts
Each part is called a line fragment
���39
Line Fragment Coordinates
Relative to the text containercoordinate system
���40
Glyph Coordinates
Relative to the line fragmentcoordinate system
���41
Character Location
Glyph coordinate
+
Line fragment coordinate
+
Text container coordinate
=
UIView coordinate
���42
Example: Character LocationFinding the location of last character
���43
Example: Hit Testing
Finding a word under a touch
���44
Text AttachmentsNSTextAttachment objects
• are a type of text attribute
•live in NSTextStorage
•include geometry for containeddata, including baseline
•usually used for inline images
•user can interact with them
���45
Interacting With Text DataSince 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
Fonts
Font DescriptorsUIFontDescriptor
•describes a 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
Font Descriptor Usage Examples
•Language Taggingyou 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
Symbolic Traits
UIFontDescriptor lets you apply traits like:
•bold, italic, underline
•expanded & condensed
•loose & tight line spacing
���50
UIFontDescriptor *fontDescriptor = [UIFontDescriptor preferredFontDescriptorWithTextStyle: UIFontTextStyleBody]; !UIFontDescriptor *boldFontDescriptor = [fontDescriptor fontDescriptorWithSymbolicTraits: UIFontDescriptorTraitBold]; !UIFont *boldFont = [UIFont fontWithDescriptor: boldFontDescriptor size: 0.0];
[Demo]Sample app:
https://github.com/macguru/TextKitDemo
by Max Seelemann
Showing:
•Multi layout manager and multi text container configuration
•Hit testing and real time word tagging
• link highlighting & custom line spacing
• interactive exclusion paths
Resources•WWDC 2013 Sessions
•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
#Thank You!
���53