Mastering TextKit

try! Swift NYC 2016
- Mastering TextKit

Transcript

1. Mastering TextKit try! Swift NYC 2016 Katsumi Kishikawa kk@realm.io
2. Katsumi Kishikawa Realm Inc. kk@realm.io
3. kk@realm.io
4. kk@realm.io
5. kk@realm.io
6. kk@realm.io
7. Agenda ˖ )PX
   UFYUT
   MBJE
   PVU
   JO
   J04
   ˖ #BTJD
   UZQPHSBQIZ
   ˖ #BTJD
   VTBHF
   PG
   5FYU,JU
   ˖ "EWBODFE
   FYBNQMFT kk@realm.io
8. Text Layout after iOS 7 kk@realm.io
9. What is TextKit? kk@realm.io
10. TextKit is ˖ .PEFSO
    UFYU
    SFOEFSJOH
    FOHJOF
    ˖ #VJMU
    PO
    UPQ
    PG
    $PSF5FYU
    ˖ )JHIMZ
    JOUFHSBUFE
    XJUI
    6*,JU kk@realm.io https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/CustomTextProcessing.html
11. UILabel kk@realm.io
12. kk@realm.io UILabel
13. Font Metrics kk@realm.io
14. kk@realm.io Font Metrics https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/FontHandling/FontHandling.html
15. kk@realm.io Font Metrics https://developer.apple.com/library/mac/documentation/TextFonts/Conceptual/CocoaTextArchitecture/FontHandling/FontHandling.html
16. kk@realm.io Font metrics Baseline X-Height Cap height Ascent Descent
17. How to know the display size kk@realm.io
18. let size = CGSize(width: label.bounds.width, height: CGFloat.max) let boundingRect = NSString(string: text).boundingRectWithSize(size, options: [], attributes: [NSFontAttributeName: font], context: nil) kk@realm.io Get Bounding Rect Single Line
19. let size = CGSize(width: label.bounds.width, height: CGFloat.max) let boundingRect = NSString(string: text).boundingRectWithSize(size, options: [.UsesLineFragmentOrigin], attributes: [NSFontAttributeName: font], context: nil) kk@realm.io Get Bounding Rect Multiple Lines
20. kk@realm.io Get Bounding Rect
21. UITextView kk@realm.io
22. kk@realm.io UITextView
23. kk@realm.io UITextView
24. kk@realm.io UITextView
25. kk@realm.io Default margins
26. kk@realm.io Default margins textView.textContainer.lineFragmentPadding textView.textContainerInset UIEdgeInsets(top: 8.0, left: 0.0, bottom: 8.0, right: 0.0) 5.0
27. kk@realm.io Leading
28. kk@realm.io CJK Font font.leading
29. kk@realm.io Custom Font (Not built-in) font.leading
30. Reset Default Margins kk@realm.io
31. let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit() kk@realm.io Remove textContainerInset
32. let textView = UITextView(frame: view.bounds) ... textView.textContainerInset = UIEdgeInsetsZero textView.sizeToFit() kk@realm.io Remove textContainerInset
33. kk@realm.io Remove textContainerInset
34. let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit() kk@realm.io Remove lineFragmentPadding
35. let textView = UITextView(frame: view.bounds) ... textView.textContainer.lineFragmentPadding = 0 textView.sizeToFit() kk@realm.io Remove lineFragmentPadding
36. kk@realm.io Remove lineFragmentPadding
37. let textView = UITextView(frame: view.bounds) ... textView.layoutManager.usesFontLeading = false textView.sizeToFit() kk@realm.io Ignore font.leading
38. kk@realm.io Ignore font.leading @interface NSLayoutManager : NSObject <NSCoding> ... // By default, a layout manager will use leading as specified by the font. However, this is not appropriate for most UI text, for which a fixed leading is usually specified by UI layout guidelines. These methods allow the use of the font's leading to be turned off. @property(NS_NONATOMIC_IOSONLY) BOOL usesFontLeading;
39. let textView = UITextView(frame: view.bounds) ... textView.layoutManager.usesFontLeading = false textView.sizeToFit() kk@realm.io Ignore font.leading
40. kk@realm.io Ignore font.leading
41. let size = CGSize(width: textView.bounds.width, height: CGFloat.max) let boundingRect = NSString(string: text).boundingRectWithSize(size, options: [.UsesLineFragmentOrigin, .UsesFontLeading], attributes: [NSFontAttributeName: font], context: nil) kk@realm.io Note: Including font.leading
42. kk@realm.io Including font.leading
43. kk@realm.io textView.textContainerInset = UIEdgeInsetsZero textView.textContainer.lineFragmentPadding = 0 textView.layoutManager.usesFontLeading = false Reset Default Margins
44. Displaying Rich Text kk@realm.io
45. let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight) paragraphStyle.lineSpacing = ceil(font.pointSize / 2) let attributes = [ NSFontAttributeName: font, NSForegroundColorAttributeName: UIColor(...), NSParagraphStyleAttributeName: paragraphStyle, ] let attributedText = NSAttributedString(string: text, attributes: attributes) textView.attributedText = attributedText kk@realm.io NSAttributedString
46. kk@realm.io Change Line Height
47. kk@realm.io Change Line Height
48. let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight) paragraphStyle.lineSpacing = ceil(font.pointSize / 2) let attributes = [ NSFontAttributeName: font, NSForegroundColorAttributeName: UIColor(...), NSParagraphStyleAttributeName: paragraphStyle, ] let attributedText = NSAttributedString(string: text, attributes: attributes) textView.attributedText = attributedText kk@realm.io Control Line Height
49. let paragraphStyle = NSMutableParagraphStyle() paragraphStyle.minimumLineHeight = ceil(font.lineHeight) paragraphStyle.maximumLineHeight = ceil(font.lineHeight) paragraphStyle.lineSpacing = ceil(font.pointSize / 2) kk@realm.io min/maxLineHeight
50. kk@realm.io min/maxLineHeight https://github.com/ibireme/YYText MinimumLineHeight MaximumLineHeight
51. kk@realm.io Line spacing https://github.com/ibireme/YYText
52. kk@realm.io FirstLineHeadIndent https://github.com/ibireme/YYText
53. kk@realm.io TextAlignment https://github.com/ibireme/YYText
54. kk@realm.io Kerning https://github.com/ibireme/YYText
55. Advanced Example of NSAttributedString kk@realm.io
56. kk@realm.io
57. kk@realm.io
58. kk@realm.io
59. kk@realm.io
60. kk@realm.io
61. kk@realm.io
62. kk@realm.io Mathematical Formulas
63. kk@realm.io Mathematical Formulas
64. kk@realm.io Mathematical Formulas
65. kk@realm.io Mathematical Formulas [NSFontAttributeName: UIFont(name: "LatinModernMath-Regular"]
66. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 18]
67. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -26]
68. kk@realm.io Mathematical Formulas [NSKernAttributeName: -68]
69. kk@realm.io Mathematical Formulas [String(kCTSuperscriptAttributeName): 1]
70. kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]
71. kk@realm.io Scaling font extension UIFont { func scale(x x: CGFloat, y: CGFloat) -> UIFont { return transform(CGAffineTransformMakeScale(x, y)) } func transform(matrix: CGAffineTransform) -> UIFont { return UIFont(descriptor: fontDescriptor().fontDescriptorWithMatrix(matrix), size: pointSize) } }
72. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 2]
73. kk@realm.io Mathematical Formulas "\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}"
74. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 14]
75. kk@realm.io Mathematical Formulas [NSKernAttributeName: -12]
76. kk@realm.io Mathematical Formulas “\u{2500}\u{2500}\u{2500}\u{2500}\u{2500}...”
77. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -12]
78. kk@realm.io Mathematical Formulas [NSKernAttributeName: -135]
79. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -12]
80. kk@realm.io Mathematical Formulas
81. kk@realm.io Mathematical Formulas
82. kk@realm.io Mathematical Formulas [NSFontAttributeName: UIFont(name: "LatinModernMath-Regular"]
83. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -20]
84. kk@realm.io Mathematical Formulas [NSKernAttributeName: -14]
85. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8]
86. kk@realm.io Mathematical Formulas [NSKernAttributeName: -14]
87. kk@realm.io Mathematical Formulas [NSKernAttributeName: 4]
88. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8]
89. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -24]
90. kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]
91. kk@realm.io Mathematical Formulas [NSKernAttributeName: -20]
92. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 10]
93. kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]
94. kk@realm.io Mathematical Formulas [NSKernAttributeName: -14]
95. kk@realm.io Mathematical Formulas [String(kCTSuperscriptAttributeName): -1]
96. kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]
97. kk@realm.io Mathematical Formulas [String(kCTSuperscriptAttributeName): 1]
98. kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 0.6, y: 0.6)]
99. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8]
100. kk@realm.io Mathematical Formulas [NSFontAttributeName: font.scale(x: 1, y: 2.4)]
101. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 20]
102. kk@realm.io Mathematical Formulas [NSKernAttributeName: 2]
103. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: 16]
104. kk@realm.io Mathematical Formulas [NSKernAttributeName: -118]
105. kk@realm.io Mathematical Formulas [NSBaselineOffsetAttributeName: -8]
106. kk@realm.io https://github.com/ kishikawakatsumi/TextKitExamples
107. Summary • No longer use CoreText directly • Carefully to choose font. Text layout is based on font metrics • The most important is constructing NSAttributedString kk@realm.io