Slide 1

Slide 1 text

These are confidential sessions—please refrain from streaming, blogging, or taking pictures Session 222 Introduction to Attributed Strings for iOS Aki “I ⍰ Unicode” Inoue Cocoa Engineer Drawing strings with dramatic expression

Slide 2

Slide 2 text

Multi-style String Drawing in UIKit in UIKit

Slide 3

Slide 3 text

Multi-style String Drawing in UIKit You can take it off the wishlist now! in UIKit

Slide 4

Slide 4 text

in UIKit NSAttributedString

Slide 5

Slide 5 text

•Attributed string essentials •Drawing with basic attributes •UIKit adoption Agenda

Slide 6

Slide 6 text

•Attributed string essentials •Drawing with basic attributes •UIKit adoption Agenda •Attributed string essentials

Slide 7

Slide 7 text

•Attributed string essentials •Drawing with basic attributes •UIKit adoption Agenda •Drawing with basic attributes

Slide 8

Slide 8 text

•Attributed string essentials •Drawing with basic attributes •UIKit adoption Agenda •UIKit adoption

Slide 9

Slide 9 text

Attributed String Essentials

Slide 10

Slide 10 text

Displaying Strings I’m a string Using UIStringDrawing

Slide 11

Slide 11 text

Displaying Strings NSString Using UIStringDrawing @”I’m a string”

Slide 12

Slide 12 text

Displaying Strings I’m a string Using UIStringDrawing

Slide 13

Slide 13 text

Displaying Strings I’m a string Using UIStringDrawing Helvetica Neue

Slide 14

Slide 14 text

Displaying Strings I’m a string Using UIStringDrawing Helvetica Neue Bold

Slide 15

Slide 15 text

Displaying Strings I’m a string Using UIStringDrawing Helvetica Neue Bold Red

Slide 16

Slide 16 text

What Is an Attributed String ? Associating attributes to characters I’m an attributed string

Slide 17

Slide 17 text

What Is an Attributed String ? Associating attributes to characters I’m an attributed string Helvetica Neue

Slide 18

Slide 18 text

What Is an Attributed String ? Associating attributes to characters I’m an attributed string Helvetica Neue

Slide 19

Slide 19 text

What Is an Attributed String ? Associating attributes to characters Helvetica Neue Helvetica Neue Helvetica Neue + Yellow I’m an attributed string

Slide 20

Slide 20 text

What Is an Attributed String ? Associating attributes to characters Times New Roman + Underline Helvetica Neue Helvetica Neue + Yellow I’m an attributed string Helvetica Neue Italic

Slide 21

Slide 21 text

What Can You Do with It? Multi-style text An Apple Engineer Abducted by An Alien Spacecraft A spacecraft landed at the Cuperti… TheNews - 6/13/12 at 3:18 PM An Apple Engineer Abducted by An Alien Spacecraft A spacecraft landed at the Cupert… TheNews - 6/13/12 at 3:18 PM

Slide 22

Slide 22 text

What Can You Do with It? Multi-style text An Apple Engineer Abducted by An Alien Spacecraft A spacecraft landed at the Cuperti… TheNews - 6/13/12 at 3:18 PM An Apple Engineer Abducted by An Alien Spacecraft A spacecraft landed at the Cupert… TheNews - 6/13/12 at 3:18 PM

Slide 23

Slide 23 text

What Can You Do with It? Multi-style text An Apple Engineer Abducted by An Alien Spacecraft A spacecraft landed at the Cuperti… TheNews - 6/13/12 at 3:18 PM An Apple Engineer Abducted by An Alien Spacecraft A spacecraft landed at the Cupert… TheNews - 6/13/12 at 3:18 PM

Slide 24

Slide 24 text

What Can You Do with It? More expressive layout options

Slide 25

Slide 25 text

What Can You Do with It? More expressive layout options

Slide 26

Slide 26 text

What Can You Do with It? Graphics effects as text styles

Slide 27

Slide 27 text

- (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; •An attribute dictionary per character NSAttributedString

Slide 28

Slide 28 text

- (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; •An attribute dictionary per character NSAttributedString

Slide 29

Slide 29 text

•An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; •Instantiating with a string and attributes dictionary NSAttributedString - (id)initWithString:(NSString *)string attributes:(NSDictionary *)attrs;

Slide 30

Slide 30 text

•An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; •Instantiating with a string and attributes dictionary NSAttributedString - (id)initWithString:(NSString *)string attributes:(NSDictionary *)attrs;

Slide 31

Slide 31 text

Specifying a font Instantiating an Attributed String •Using NSFontAttributeName NSAttributedString *string = [[NSAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }];

Slide 32

Slide 32 text

Specifying a font Instantiating an Attributed String Hello World!! •Using NSFontAttributeName NSAttributedString *string = [[NSAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }];

Slide 33

Slide 33 text

•An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; •Instantiating with a string and attributes dictionary - (id)initWithString:(NSString *)string attributes:(NSDictionary *)attrs; NSAttributedString

Slide 34

Slide 34 text

•An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; •Instantiating with a string and attributes dictionary - (id)initWithString:(NSString *)string attributes:(NSDictionary *)attrs; •No attribute for an empty string NSAttributedString

Slide 35

Slide 35 text

NSMutableAttributedString •Changing attributes •Modifying string contents

Slide 36

Slide 36 text

NSMutableAttributedString •Changing attributes •Modifying string contents

Slide 37

Slide 37 text

•Mutable methods for attributes - (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range; Changing attributes NSMutableAttributedString

Slide 38

Slide 38 text

•Mutable methods for attributes - (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range; - (void)addAttributes:(NSDictionary *)attrs range:(NSRange)range; - (void)addAttribute:(NSString *)key value:(id)value range:(NSRange)range; - (void)removeAttribute:(NSString *)key range:(NSRange)range; Changing attributes NSMutableAttributedString

Slide 39

Slide 39 text

•Mutable methods for attributes - (void)setAttributes:(NSDictionary *)attrs range:(NSRange)range; - (void)addAttributes:(NSDictionary *)attrs range:(NSRange)range; - (void)addAttribute:(NSString *)key value:(id)value range:(NSRange)range; - (void)removeAttribute:(NSString *)key range:(NSRange)range; •Modifying existing attributes •Creating multi-style string Changing attributes NSMutableAttributedString

Slide 40

Slide 40 text

Emphasizing a range Creating Multi-style String •Using NSForegroundColorAttributeName NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Dentist at 9:15am.” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; [string addAttribute:NSForegroundColorAttributeName ! ! value:[UIColor redColor] ! ! range:NSMakeRange(11, 6)]; // Change the time, 9:15am, to red

Slide 41

Slide 41 text

Emphasizing a range Creating Multi-style String •Using NSForegroundColorAttributeName NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Dentist at 9:15am.” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; [string addAttribute:NSForegroundColorAttributeName ! ! value:[UIColor redColor] ! ! range:NSMakeRange(11, 6)]; // Change the time, 9:15am, to red Dentist at 9:15am.

Slide 42

Slide 42 text

Emphasizing a range Creating Multi-style String •Using NSForegroundColorAttributeName NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Dentist at 9:15am.” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; [string addAttribute:NSForegroundColorAttributeName ! ! value:[UIColor redColor] ! ! range:NSMakeRange(11, 6)]; // Change the time, 9:15am, to red Dentist at 9:15am. •Using NSForegroundColorAttributeName NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Dentist at 9:15am.” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; [string addAttribute:NSForegroundColorAttributeName ! ! value:[UIColor redColor] ! ! range:NSMakeRange(11, 6)]; // Change the time, 9:15am, to red

Slide 43

Slide 43 text

Emphasizing a range Creating Multi-style String •Using NSForegroundColorAttributeName NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Dentist at 9:15am.” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; [string addAttribute:NSForegroundColorAttributeName ! ! value:[UIColor redColor] ! ! range:NSMakeRange(11, 6)]; // Change the time, 9:15am, to red Dentist at 9:15am.

Slide 44

Slide 44 text

NSMutableAttributedString •Changing attributes •Modifying string contents

Slide 45

Slide 45 text

•Mutable methods for string contents - (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str; Modifying string contents NSMutableAttributedString

Slide 46

Slide 46 text

•Mutable methods for string contents - (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str; - (void)replaceCharactersInRange:(NSRange)range ! ! ! ! withAttributedString:(NSAttributedString *)attributedString; - (void)insertAttributedString:(NSAttributedString *)attributedString ! ! ! ! ! ! ! atIndex:(NSUInteger)location; - (void)appendAttributedString:(NSAttributedString *)attributedString; - (void)deleteCharactersInRange:(NSRange)range; Modifying string contents NSMutableAttributedString

Slide 47

Slide 47 text

•Mutable methods for string contents - (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str; - (void)replaceCharactersInRange:(NSRange)range ! ! ! ! withAttributedString:(NSAttributedString *)attributedString; - (void)insertAttributedString:(NSAttributedString *)attributedString ! ! ! ! ! ! ! atIndex:(NSUInteger)location; - (void)appendAttributedString:(NSAttributedString *)attributedString; - (void)deleteCharactersInRange:(NSRange)range; Modifying string contents NSMutableAttributedString

Slide 48

Slide 48 text

- (void)replaceCharactersInRange:(NSRange)range ! ! ! ! withAttributedString:(NSAttributedString *)attributedString; - (void)insertAttributedString:(NSAttributedString *)attributedString ! ! ! ! ! ! ! atIndex:(NSUInteger)location; - (void)appendAttributedString:(NSAttributedString *)attributedString; - (void)deleteCharactersInRange:(NSRange)range; Modifying string contents NSMutableAttributedString •Mutable methods for string contents - (void)replaceCharactersInRange:(NSRange)range withString:(NSString *)str;

Slide 49

Slide 49 text

•Moving the appointment time 1 hour early NSMutableAttributedString *string; // a mutable string [string replaceCharactersInRange:NSMakeRange(11, 6) withString:@”8:15am”]; Modifying String Contents

Slide 50

Slide 50 text

•Moving the appointment time 1 hour early NSMutableAttributedString *string; // a mutable string [string replaceCharactersInRange:NSMakeRange(11, 6) withString:@”8:15am”]; Dentist at 9:15am. Modifying String Contents

Slide 51

Slide 51 text

•Moving the appointment time 1 hour early NSMutableAttributedString *string; // a mutable string [string replaceCharactersInRange:NSMakeRange(11, 6) withString:@”8:15am”]; Modifying String Contents Dentist at 8:15am.

Slide 52

Slide 52 text

•Moving the appointment time 1 hour early NSMutableAttributedString *string; // a mutable string [string replaceCharactersInRange:NSMakeRange(11, 6) withString:@”8:15am”]; Modifying String Contents Dentist at 8:15am.

Slide 53

Slide 53 text

Modifying String Contents Dentist at 8:15am. •Moving the appointment time 1 hour early NSMutableAttributedString *string; // a mutable string [string replaceCharactersInRange:NSMakeRange(11, 6) withString:@”8:15am”];

Slide 54

Slide 54 text

Modifying String Contents Dentist at 8:15am. •Moving the appointment time 1 hour early NSMutableAttributedString *string; // a mutable string [string replaceCharactersInRange:NSMakeRange(11, 6) withString:@”8:15am”];

Slide 55

Slide 55 text

Attributes Preserved

Slide 56

Slide 56 text

•Attributes are preserved during string content replacement Attributes Preserved

Slide 57

Slide 57 text

•Attributes are preserved during string content replacement •Three rules to remember Attributes Preserved

Slide 58

Slide 58 text

•Attributes are preserved during string content replacement •Three rules to remember 1. When replacing, the new characters inherit attributes from the first character of the range being replaced Attributes Preserved 1. When replacing, the new characters inherit attributes from the first character of the range being replaced

Slide 59

Slide 59 text

•Attributes are preserved during string content replacement •Three rules to remember 1. When replacing, the new characters inherit attributes from the first character of the range being replaced 2. When inserting, the incoming string inherit from the previous character Attributes Preserved 2. When inserting, the incoming string inherit from the previous character

Slide 60

Slide 60 text

•Attributes are preserved during string content replacement •Three rules to remember 1. When replacing, the new characters inherit attributes from the first character of the range being replaced 2. When inserting, the incoming string inherit from the previous character 3. When inserting at the beginning, the attributes at index 0 are used Attributes Preserved 3. When inserting at the beginning, the attributes at index 0 are used

Slide 61

Slide 61 text

•Attributes are preserved during string content replacement •Three rules to remember 1. When replacing, the new characters inherit attributes from the first character of the range being replaced 2. When inserting, the incoming string inherit from the previous character 3. When inserting at the beginning, the attributes at index 0 are used NOTE: Remember the “no character, no attributes” rule Attributes Preserved

Slide 62

Slide 62 text

•Insertion [string replaceCharactersInRange:NSMakeRange(3, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents defghi •Insertion [string replaceCharactersInRange:NSMakeRange(3, 0) withString:@”ABC”]; abc

Slide 63

Slide 63 text

•Insertion [string replaceCharactersInRange:NSMakeRange(3, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents defghi •Insertion [string replaceCharactersInRange:NSMakeRange(3, 0) withString:@”ABC”]; ABC abc

Slide 64

Slide 64 text

•Insertion [string replaceCharactersInRange:NSMakeRange(3, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents defghi •Insertion [string replaceCharactersInRange:NSMakeRange(3, 0) withString:@”ABC”]; abcABC

Slide 65

Slide 65 text

•Insertion at the beginning [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents defghi abc

Slide 66

Slide 66 text

•Insertion at the beginning [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents ABC defghi abc

Slide 67

Slide 67 text

•Insertion at the beginning [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents defghi abc ABC

Slide 68

Slide 68 text

•Cross-run replacement [string replaceCharactersInRange:NSMakeRange(2, 3) withString:@”ABC”]; Replacement rule samples Modifying String Contents ab de c fghi

Slide 69

Slide 69 text

•Cross-run replacement [string replaceCharactersInRange:NSMakeRange(2, 3) withString:@”ABC”]; Replacement rule samples Modifying String Contents ABC ab de c fghi

Slide 70

Slide 70 text

•Cross-run replacement [string replaceCharactersInRange:NSMakeRange(2, 3) withString:@”ABC”]; Replacement rule samples Modifying String Contents abABCfghi

Slide 71

Slide 71 text

•No character, no attributes [string deleteCharactersInRange:NSMakeRange(0, 9)]; [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents abcdefghi

Slide 72

Slide 72 text

•No character, no attributes [string deleteCharactersInRange:NSMakeRange(0, 9)]; [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents abcdefghi •No character, no attributes [string deleteCharactersInRange:NSMakeRange(0, 9)]; [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”];

Slide 73

Slide 73 text

•No character, no attributes [string deleteCharactersInRange:NSMakeRange(0, 9)]; [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents

Slide 74

Slide 74 text

•No character, no attributes [string deleteCharactersInRange:NSMakeRange(0, 9)]; [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”]; Replacement rule samples Modifying String Contents ABC [string replaceCharactersInRange:NSMakeRange(0, 0) withString:@”ABC”];

Slide 75

Slide 75 text

Querying Attributes •An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range;

Slide 76

Slide 76 text

Querying Attributes •An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range;

Slide 77

Slide 77 text

Querying Attributes •An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range;

Slide 78

Slide 78 text

Querying Attributes Not guaranteed to return the maximum range •An attribute dictionary per character - (NSString *)string - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range;

Slide 79

Slide 79 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; Querying Attributes abcdefghi

Slide 80

Slide 80 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; Querying Attributes abcdefghi

Slide 81

Slide 81 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; Querying Attributes abcdefghi NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range];

Slide 82

Slide 82 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; Querying Attributes abcdefghi

Slide 83

Slide 83 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; Querying Attributes abcdefghi &range

Slide 84

Slide 84 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; Querying Attributes abcdefghi &range {3, 3}

Slide 85

Slide 85 text

•An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; Querying Attributes abcdefghi &range {4, 2}

Slide 86

Slide 86 text

NSRange range; NSDictionary *dict = [string attributesAtIndex:4 effectiveRange:&range]; •An attribute dictionary per character - (NSDictionary *)attributesAtIndex:(NSUInteger)location effectiveRange:(NSRangePointer)range; Querying Attributes abcdefghi &range {4, 1}

Slide 87

Slide 87 text

Using longest effective range methods Getting Contiguous Run Range •Variants of attribute query methods - (NSDictionary *)attributesAtIndex:(NSUInteger)location ! ! ! ! longestEffectiveRange:(NSRangePointer)range inRange:(NSRange)maximumRange; - (id)attribute:(NSString)attribute atIndex:(NSUInteger)location ! ! ! ! longestEffectiveRange:(NSRangePointer)range inRange:(NSRange)maximumRange;

Slide 88

Slide 88 text

Using longest effective range methods Getting Contiguous Run Range •Getting the contiguous range for attributes abcdefghi

Slide 89

Slide 89 text

Using longest effective range methods Getting Contiguous Run Range •Getting the contiguous range for attributes abcdefghi

Slide 90

Slide 90 text

•Getting the contiguous range for attributes abcdefghi Using longest effective range methods Getting Contiguous Run Range

Slide 91

Slide 91 text

•Getting the contiguous range for attributes abcdefghi Using longest effective range methods Getting Contiguous Run Range Helvetica Neue Red

Slide 92

Slide 92 text

•Getting the contiguous range for attributes abcdefghi Using longest effective range methods Getting Contiguous Run Range Helvetica Neue Blue

Slide 93

Slide 93 text

•Getting the contiguous range for attributes abcdefghi Using longest effective range methods Getting Contiguous Run Range Helvetica Neue Italic Blue

Slide 94

Slide 94 text

abcdefghi •Getting the contiguous range for attributes Using longest effective range methods Getting Contiguous Run Range Helvetica Neue Italic Green

Slide 95

Slide 95 text

abcdefghi •Getting the contiguous range for NSFontAttributeName Using longest effective range methods Getting Contiguous Run Range

Slide 96

Slide 96 text

abcdefghi •Getting the contiguous range for NSFontAttributeName Using longest effective range methods Getting Contiguous Run Range Helvetica Neue

Slide 97

Slide 97 text

abcdefghi •Getting the contiguous range for NSFontAttributeName Using longest effective range methods Getting Contiguous Run Range Helvetica Neue Italic

Slide 98

Slide 98 text

abcdefghi •Getting the contiguous range for NSForegroundColorAttributeName Using longest effective range methods Getting Contiguous Run Range

Slide 99

Slide 99 text

abcdefghi •Getting the contiguous range for NSForegroundColorAttributeName Using longest effective range methods Getting Contiguous Run Range Red

Slide 100

Slide 100 text

abcdefghi •Getting the contiguous range for NSForegroundColorAttributeName Using longest effective range methods Getting Contiguous Run Range Blue

Slide 101

Slide 101 text

abcdefghi •Getting the contiguous range for NSForegroundColorAttributeName Using longest effective range methods Getting Contiguous Run Range Green

Slide 102

Slide 102 text

Querying Attributes

Slide 103

Slide 103 text

•Enumeration methods -enumerateAttributesInRange:options:usingBlock: -enumerateAttribute:inRange:options:usingBlock: Querying Attributes

Slide 104

Slide 104 text

•Enumeration methods -enumerateAttributesInRange:options:usingBlock: -enumerateAttribute:inRange:options:usingBlock: •Changing attributes based on existing attributes Querying Attributes

Slide 105

Slide 105 text

•Enumeration methods -enumerateAttributesInRange:options:usingBlock: -enumerateAttribute:inRange:options:usingBlock: •Changing attributes based on existing attributes •Modifying string contents while preserving the attributes Querying Attributes

Slide 106

Slide 106 text

•Enumeration methods -enumerateAttributesInRange:options:usingBlock: -enumerateAttribute:inRange:options:usingBlock: •Changing attributes based on existing attributes •Modifying string contents while preserving the attributes •Modifying string contents while preserving the attributes Querying Attributes

Slide 107

Slide 107 text

Uppercase while preserving attributes Enumerating for Modification NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; abcdefghi abcdefghi

Slide 108

Slide 108 text

Uppercase while preserving attributes Enumerating for Modification NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; abcdefghi abcdefghi

Slide 109

Slide 109 text

Uppercase while preserving attributes Enumerating for Modification NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; abcdefghi abcdefghi

Slide 110

Slide 110 text

Uppercase while preserving attributes Enumerating for Modification NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; abcdefghi abcdefghi

Slide 111

Slide 111 text

Uppercase while preserving attributes Enumerating for Modification NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; uppercaseStringWithLocale: abcdefghi abcdefghi

Slide 112

Slide 112 text

Uppercase while preserving attributes Enumerating for Modification NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; abcdefghi abcdefghi

Slide 113

Slide 113 text

NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; Uppercase while preserving attributes Enumerating for Modification ABCdefghi

Slide 114

Slide 114 text

NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; Uppercase while preserving attributes Enumerating for Modification ABCDEfghi

Slide 115

Slide 115 text

NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; Uppercase while preserving attributes Enumerating for Modification ABCDEFghi

Slide 116

Slide 116 text

NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; Uppercase while preserving attributes Enumerating for Modification ABCDEFGHI

Slide 117

Slide 117 text

NSMutableAttributedString *attrString; NSLocale *locale = [NSLocale currentLocale]; [attrString enumerateAttributesInRange:NSMakeRange(0, [attrString length]) ! options:0 ! usingBlock:^(NSDictionary *attrs, NSRange range, BOOL *stop) { ! ! NSString *string = [[attrString string] substringWithRange:range]; ! ! [attrString replaceCharactersInRange:range ! ! ! ! ! withString:[string uppercaseStringWithLocale:locale]]; }]; Uppercase while preserving attributes Enumerating for Modification ABCDEFGHI

Slide 118

Slide 118 text

Drawing Attributed Strings

Slide 119

Slide 119 text

NSAttributedString *string = [[NSAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; Drawing an Attributed String

Slide 120

Slide 120 text

NSAttributedString *string = [[NSAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSFontAttributeName : [UIFont systemFontOfSize:12.0f }]; Drawing an Attributed String [string drawAtPoint:NSMakePoint(10.0f, 10.0f)]; // rendering at 10,10

Slide 121

Slide 121 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 122

Slide 122 text

NSStringDrawing API •Simple drawing/sizing methods - (void)drawAtPoint:(CGPoint)point; - (CGSize)size; - (void)drawInRect:(CGRect)rect;

Slide 123

Slide 123 text

NSStringDrawing API •Simple drawing/sizing methods - (void)drawAtPoint:(CGPoint)point; - (CGSize)size; - (void)drawInRect:(CGRect)rect;

Slide 124

Slide 124 text

NSStringDrawing API •Simple drawing/sizing methods - (void)drawInRect:(CGRect)rect; ! -drawInRect:withFont:lineBreakMode:alignment: - (void)drawAtPoint:(CGPoint)point; - (CGSize)size;

Slide 125

Slide 125 text

NSStringDrawing API •Simple drawing/sizing methods - (void)drawInRect:(CGRect)rect; - (void)drawAtPoint:(CGPoint)point; ! -drawAtPoint:withFont: - (CGSize)size;

Slide 126

Slide 126 text

NSStringDrawing API •Simple drawing/sizing methods - (void)drawInRect:(CGRect)rect; - (void)drawAtPoint:(CGPoint)point; - (CGSize)size; ! -sizeWithFont:

Slide 127

Slide 127 text

Available Attributes •Font •Text color •Paragraph style •Text background color •Ligature, kerning, and baseline offset •Underline and strike-through •Stroke width and color •Shadow

Slide 128

Slide 128 text

Available Attributes •Font •Text color •Paragraph style •Text background color •Ligature, kerning, and baseline offset •Underline and strike-through •Stroke width and color •Shadow

Slide 129

Slide 129 text

•Font NSFontAttributeName (UIFont) •Text color! ! ! ! NSForegroundColorAttributeName (UIColor) •Paragraph style NSParagraphStyleAttributeName (NSParagraphStyle) Available Attributes

Slide 130

Slide 130 text

•Font NSFontAttributeName (UIFont) •Text color! ! ! ! NSForegroundColorAttributeName (UIColor) •Paragraph style NSParagraphStyleAttributeName (NSParagraphStyle) Available Attributes A missing attribute implies its default value.

Slide 131

Slide 131 text

Attribute default value Available Attributes •Font [UIFont systemFontOfSize:[UIFont systemFontSize]] •Text color! ! ! ! [UIColor blackColor] •Paragraph style [NSParagraphStyle defaultParagraphStyle]

Slide 132

Slide 132 text

Quartz graphics state independent Missing Attributes NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point];

Slide 133

Slide 133 text

Quartz graphics state independent Missing Attributes NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point];

Slide 134

Slide 134 text

Quartz graphics state independent Missing Attributes NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point]; NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point];

Slide 135

Slide 135 text

Quartz graphics state independent Missing Attributes NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point];

Slide 136

Slide 136 text

Quartz graphics state independent Missing Attributes NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point];

Slide 137

Slide 137 text

Quartz graphics state independent Missing Attributes NSAttributedString *string; // No attribute specified string = [[NSAttributedString alloc] initWithString:@”Hello World!!”]; // Leaving CGContext color properties with red color [[UIColor redColor] set]; UIRectFill(rect); [string drawAtPoint:point]; Hello World!! // Renders with system font in black

Slide 138

Slide 138 text

Available Attributes •Font NSFontAttributeName (UIFont) •Text color! ! ! ! NSForegroundColorAttributeName (UIColor) •Paragraph style NSParagraphStyleAttributeName (NSParagraphStyle)

Slide 139

Slide 139 text

Available Attributes •Font NSFontAttributeName (UIFont) •Text color! ! ! ! NSForegroundColorAttributeName (UIColor) •Paragraph style NSParagraphStyleAttributeName (NSParagraphStyle)

Slide 140

Slide 140 text

NSParagraphStyle Layout Text Like Pages Documents

Slide 141

Slide 141 text

NSParagraphStyle Layout Text Like Pages Documents •Encapsulates various paragraph-wide style attributes

Slide 142

Slide 142 text

NSParagraphStyle Layout Text Like Pages Documents •Encapsulates various paragraph-wide style attributes •Allows richer word processor like text formatting

Slide 143

Slide 143 text

NSParagraphStyle Layout Text Like Pages Documents •Encapsulates various paragraph-wide style attributes •Allows richer word processor like text formatting •The paragraph style for the first character is used for the rest of paragraph

Slide 144

Slide 144 text

NSParagraphStyle Layout Text Like Pages Documents •Encapsulates various paragraph-wide style attributes •Allows richer word processor like text formatting •The paragraph style for the first character is used for the rest of paragraph

Slide 145

Slide 145 text

NSParagraphStyle •Line break mode •Alignment •Spacings •Indentation •Line height control •Hyphenation •Base writing direction

Slide 146

Slide 146 text

NSParagraphStyle •Line break mode •Alignment •Spacings •Indentation •Line height control •Hyphenation •Base writing direction

Slide 147

Slide 147 text

Line break mode NSParagraphStyle •Very similar to UILineBreakMode @property NSLineBreakMode lineBreakMode; NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init]; style.lineBreakMode = NSLineBreakByTruncatingTail; NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSParagraphStyleAttributeName : style }];

Slide 148

Slide 148 text

Line break mode NSParagraphStyle •Very similar to UILineBreakMode @property NSLineBreakMode lineBreakMode; NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init]; style.lineBreakMode = NSLineBreakByTruncatingTail; NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSParagraphStyleAttributeName : style }];

Slide 149

Slide 149 text

Line break mode NSParagraphStyle •Very similar to UILineBreakMode @property NSLineBreakMode lineBreakMode; NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init]; style.lineBreakMode = NSLineBreakByTruncatingTail; NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSParagraphStyleAttributeName : style }];

Slide 150

Slide 150 text

Line break mode NSParagraphStyle •Very similar to UILineBreakMode @property NSLineBreakMode lineBreakMode; NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc] init]; style.lineBreakMode = NSLineBreakByTruncatingTail; NSMutableAttributedString *string = [[NSMutableAttributedString alloc] ! ! initWithString:@”Hello World!!” ! ! attributes:@{ NSParagraphStyleAttributeName : style }]; Hello Wor…

Slide 151

Slide 151 text

•Additional alignments introduced @property NSTextAlignment alignment; NSTextAlignmentLeft Alignment NSParagraphStyle Hello World!!

Slide 152

Slide 152 text

•Additional alignments introduced @property NSTextAlignment alignment; NSTextAlignmentLeft NSTextAlignmentCenter Alignment NSParagraphStyle Hello World!!

Slide 153

Slide 153 text

•Additional alignments introduced @property NSTextAlignment alignment; NSTextAlignmentLeft NSTextAlignmentCenter NSTextAlignmentRight Alignment NSParagraphStyle Hello World!!

Slide 154

Slide 154 text

•Additional alignments introduced @property NSTextAlignment alignment; NSTextAlignmentLeft NSTextAlignmentCenter NSTextAlignmentRight NSTextAlignmentJustified Alignment NSParagraphStyle This paragraph shows the new alignment mode, justification.

Slide 155

Slide 155 text

•Additional alignments introduced @property NSTextAlignment alignment; NSTextAlignmentLeft NSTextAlignmentCenter NSTextAlignmentRight NSTextAlignmentJustified NSTextAlignmentNatural Alignment NSParagraphStyle Hello World!!

Slide 156

Slide 156 text

•Additional alignments introduced @property NSTextAlignment alignment; NSTextAlignmentLeft NSTextAlignmentCenter NSTextAlignmentRight NSTextAlignmentJustified NSTextAlignmentNatural Alignment NSParagraphStyle !!!"#$"ا #&'()

Slide 157

Slide 157 text

Rest of drawing options Drawing Attributed Strings •Extended NSStringDrawing methods •Advanced attributes •…and more

Slide 158

Slide 158 text

Rest of drawing options Drawing Attributed Strings •Extended NSStringDrawing methods •Advanced attributes •…and more Advanced Attributed Strings for iOS Mission Thursday 10:15am

Slide 159

Slide 159 text

How do I get this stuff in my labels? Attributed Strings in UIKit Ian Baird Label Engineer

Slide 160

Slide 160 text

Attributed Strings in UIKit UILabel is the nexus of power

Slide 161

Slide 161 text

Attributed Strings in UIKit UILabel is the nexus of power I’m a UILabel with a title.

Slide 162

Slide 162 text

Attributed Strings in UIKit UILabel is the nexus of power I’m a UILabel with an attributed title.

Slide 163

Slide 163 text

UILabel Attributed Strings in UIKit •Existing properties

Slide 164

Slide 164 text

UILabel Attributed Strings in UIKit •Existing properties text Big red dog.

Slide 165

Slide 165 text

UILabel Attributed Strings in UIKit •Existing properties text font Big red dog.

Slide 166

Slide 166 text

UILabel Attributed Strings in UIKit •Existing properties text font textColor Big red dog.

Slide 167

Slide 167 text

UILabel Attributed Strings in UIKit •Existing properties text font textColor textAlignment Big red dog.

Slide 168

Slide 168 text

UILabel Attributed Strings in UIKit •Existing properties text font textColor textAlignment lineBreakMode Big red dog.

Slide 169

Slide 169 text

UILabel Attributed Strings in UIKit •Existing properties text font textColor textAlignment lineBreakMode shadowColor Big red dog.

Slide 170

Slide 170 text

UILabel Attributed Strings in UIKit •Existing properties text font textColor textAlignment lineBreakMode shadowColor shadowOffset Big red dog.

Slide 171

Slide 171 text

UILabel Attributed Strings in UIKit •New properties: attributedText minimumScaleFactor adjustsLetterSpacingToFitWidth

Slide 172

Slide 172 text

UILabel Attributed Strings in UIKit •New properties: attributedText minimumScaleFactor adjustsLetterSpacingToFitWidth Big red dog.

Slide 173

Slide 173 text

UILabel Attributed Strings in UIKit •New properties: attributedText Big red dog.

Slide 174

Slide 174 text

UILabel Attributed Strings in UIKit •New properties: attributedText minimumScaleFactor Big red …

Slide 175

Slide 175 text

UILabel Attributed Strings in UIKit •New properties: attributedText minimumScaleFactor adjustsLetterSpacingToFitWidth Big red dog.

Slide 176

Slide 176 text

UILabel Attributed Strings in UIKit •Deprecated property

Slide 177

Slide 177 text

UILabel Attributed Strings in UIKit •Deprecated property minimumFontSize

Slide 178

Slide 178 text

UILabel Attributed Strings in UIKit •Deprecated property minimumFontSize •Instead use

Slide 179

Slide 179 text

UILabel Attributed Strings in UIKit •Deprecated property minimumFontSize •Instead use minimumScaleFactor

Slide 180

Slide 180 text

UILabel Attributed Strings in UIKit

Slide 181

Slide 181 text

UILabel Attributed Strings in UIKit •Style properties apply style to entire attributed string, for example Big red dog.

Slide 182

Slide 182 text

UILabel Attributed Strings in UIKit •Style properties apply style to entire attributed string, for example font font: Helvetica Neue Big red dog.

Slide 183

Slide 183 text

UILabel Attributed Strings in UIKit •Style properties apply style to entire attributed string, for example font textColor Big red dog. textColor: red

Slide 184

Slide 184 text

UIButton Attributed Strings in UIKit •Existing method

Slide 185

Slide 185 text

UIButton Attributed Strings in UIKit •Existing method setTitle:forControlState: Touch Me

Slide 186

Slide 186 text

UIButton Attributed Strings in UIKit •Existing method setTitle:forControlState: •New method Touch Me

Slide 187

Slide 187 text

UIButton Attributed Strings in UIKit •Existing method setTitle:forControlState: •New method setAttributedTitle:forControlState: Touch Me

Slide 188

Slide 188 text

UIButton Attributed Strings in UIKit •Existing method setTitle:forControlState: •New method setAttributedTitle:forControlState: •Attributed title takes precedence Touch Me

Slide 189

Slide 189 text

Attributed Strings in UIKit UIPickerView

Slide 190

Slide 190 text

Attributed Strings in UIKit UIPickerView pickerView:titleForRow:forComponent:

Slide 191

Slide 191 text

Attributed Strings in UIKit UIPickerView pickerView:attributedTitleForRow:forComponent:

Slide 192

Slide 192 text

•Added properties UITextView Attributed Strings in UIKit

Slide 193

Slide 193 text

•Added properties attributedText UITextView Attributed Strings in UIKit

Slide 194

Slide 194 text

•Added properties attributedText allowsEditingTextAttributes UITextView Attributed Strings in UIKit

Slide 195

Slide 195 text

UITableView Attributed Strings in UIKit

Slide 196

Slide 196 text

UITableView Attributed Strings in UIKit •No new properties or methods

Slide 197

Slide 197 text

UITableView Attributed Strings in UIKit •No new properties or methods Just set attributedText on the cell or header view’s textLabel.

Slide 198

Slide 198 text

Demo Johannes Fortmann UIKit Engineer

Slide 199

Slide 199 text

Demo summary Attributed Strings in UIKit •Drawing text using attributed string drawInRect: •Enhancing existing labels NSMutableAttributedString, addAttribute:value:range: •Formatting paragraphs NSMutableParagraphStyle

Slide 200

Slide 200 text

Summary

Slide 201

Slide 201 text

Summary •Attributed string essentials

Slide 202

Slide 202 text

Summary •Attributed string essentials •Drawing and use

Slide 203

Slide 203 text

Summary •Attributed string essentials •Drawing and use •UIKit adoption

Slide 204

Slide 204 text

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

Slide 205

Slide 205 text

Related Sessions Advanced Attributed Strings for iOS Mission Thursday 10:15am Keyboard Input in iOS Russian Hill Wednesday 2:00PM Core Text and Fonts Russian Hill Wednesday 4:30PM

Slide 206

Slide 206 text

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

Slide 207

Slide 207 text

No content

Slide 208

Slide 208 text

The last 3 slides after the logo are intentionally left blank for all presentations.

Slide 209

Slide 209 text

The last 3 slides after the logo are intentionally left blank for all presentations.

Slide 210

Slide 210 text

The last 3 slides after the logo are intentionally left blank for all presentations.