Dynamic Type in iOS Priya Rajagopal
www.priyaontech.com Twitter: @rajagp
CocoaHeads Ann Arbor May, 2014
Fonts
! Text content represented using fonts (UIFont)
! Fonts = glyphs that share typeface, typestyle and size ! Typeface : Helvetica-Neue, Arial, Times… ! TypeStyle : bold, normal, italic…
! System Fonts + (UIFont *)systemFontOfSize:(CGFloat)fontSize;
+ (UIFont *)boldSystemFontOfSize:(CGFloat)fontSize;
+ (UIFont *)italicSystemFontOfSize:(CGFloat)fontSize;
! Custom + (UIFont *)fontWithName:(NSString *)fontName size:(CGFloat)fontSize;
! Text Styles …
www.priyaontech.com 2
Text Styles
! Introduced in iOS7
! UITextKit
! Describe intended use of text – Headings, SubHeadings,Body
! Every text style associated with a font + (UIFont *)preferredFontForTextStyle:(NSString *)style
www.priyaontech.com 3
Text Style Constants • UIFontTextStyleHeadline
• UIFontTextStyleSubheadline
• UIFontTextStyleBody
• UIFontTextStyleFootnote
• UIFontTextStyleCaption1
• UIFontTextStyleCaption2
www.priyaontech.com 4
Text Styles are implemented using Dynamic Type …
What is Dynamic Type?
! Technology introduced in iOS7
! Users adjust text size preferences ! Settings
! Accessibility
! Apps react by dynamically adjust displayed text content
! Enhanced Readability
! Customized to user’s preferences
www.priyaontech.com 5
www.priyaontech.com 6
TextStyles & Dynamic Type
! Fonts associated with text styles change dynamically based on user preferences
! To support dynamic type, use TextStyles
+ (UIFont *)preferredFontForTextStyle:(NSString *)style
www.priyaontech.com 7
www.priyaontech.com 8
Font Descriptors ! Introduced in iOS7 (UIFontDescriptor)
! Describe fonts
! Dictionary of font attributes UIFontDescriptorTraitsAttribute, UIFontDescriptorFamilyAttribute, UIFontDescriptorTextStyleAttribute, UIFontDescriptorNameAttribute, UIFontDescriptorFaceAttribute, UIFontDescriptorSizeAttribute …
! Get/Create font from descriptor + (UIFont *)fontWithDescriptor:(UIFontDescriptor *)descriptor size:(CGFloat)pointSize
! Get descriptor for font - (UIFontDescriptor *)fontDescriptor
www.priyaontech.com 9
Your own Text Style (with Dynamic Type Support)
! Get font descriptor for an existing TextStyle UIFontDescriptor* fontDesc = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleHeadline];
! Update descriptor. UIFontDescriptor* updatedFontDesc = [fontDesc fontDescriptorByAddingAttributes:@{UIFontDescriptorTraitsAttribute:@{UIFontSymbolicTrait:[NSNumber numberWithInteger:UIFontDescriptorTraitItalic]}}];
! Create new font from updated font descriptor UIFont* myFont = [UIFont fontWithDescriptor:updatedFontDesc size:fontDesc.pointSize* scale];
* You can’t change the font family. It will be the system font type- Helvetica-Neue.
www.priyaontech.com 10
Detecting Text Size Changes
! UIContentSizeCategoryDidChangeNotification
! Register for notification with NSNotificationCenter
! React by invalidating existing fonts and getting new ones
! Adjust container bounds to account for new content size ! Auto layout
! invalidateIntrinsicContentSize/ sizeToFit
www.priyaontech.com 11
Demo
www.priyaontech.com 12