Dynamic types in iOS

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