Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TextKitから表現が広がる - iOSDC Japan 2018

Kohey
September 02, 2018

TextKitから表現が広がる - iOSDC Japan 2018

TextKitはiOS7から導入されたテキスト用のレンダリングエンジンです。これのおかげによって、低レベルのAPIを格闘することなく、開発でも難しいテキストでも比較的容易にレイアウトを描画できるようになっています。本トークでは、実際にデザイナーとあった話をもとに、文字列デザインをフォーカスして行きます。

Kohey

September 02, 2018
Tweet

Other Decks in Programming

Transcript

  1. TextKit͔Βදݱ͕޿͕Δ
    @ iOS DC2018

    2018/09/02 10:50ʙ

    Track C ϨΪϡϥʔτʔΫ
    Kohei Nishioka / paper_and_paper

    View full-size slide

  2. Introduction

    View full-size slide

  3. Profile
    • Kohei Nishioka / Pref. Fukui

    • iOS Engineer @ iRidge Inc.

    • Swift, Objective-C, C++, Ocaml, 

    PHP, JavaScript …

    • Japanese / English

    • Github takumi314

    • Twitter #paper_and_paper

    View full-size slide

  4. Agenda
    ɾ8IZ5FYU,JU
    ɾ8IBUT5FYU,JU
    ɾ4USVDUVSFT
    ɾ/4"UUSJCVUFE4USJOH
    ɾ/4$POUBJOFS
    ɾ/45FYU-BZPVU.BOHFS
    ɾ4VNNBSZ

    View full-size slide

  5. Why TextKit ?

    View full-size slide

  6. ൃ୺
    ɹɹɹʮ͜ͷߦؒΛ2p͚ͩখͯ͘͞͠΋Β͑·͢ʁʯ
    ɹɹɹʮ͜͜ͷจࣈ͚ͩϑΥϯτม͑ͯཉ͍͠ʯ
    ɹɹɹʮจࣈͷִؒΛͪΐͬͱ͚ͩ…. ʯ

    View full-size slide

  7. ʮ͸ɺ͸͍….ʯ

    View full-size slide

  8. WWDC 2018 Session 221

    View full-size slide

  9. “This is what customers pay us for – to sweat all
    these details so it’s easy and pleasant for them to
    use our computers. We’re supposed to be really
    good at this. That doesn’t mean we don’t listen to
    customers, but it’s hard for them to tell you what
    they want when they’ve never seen anything
    remotely like it. Take desktop video editing. I never
    got one request from someone who wanted to edit
    movies on his computer. Yet now that people see it,
    they say, ‘Oh my God, that’s great!’ ”

    View full-size slide

  10. “Sweating the Details ”

    View full-size slide

  11. What’s TextKit ?

    View full-size slide

  12. TextKit
    • Rendering Engine for Texting

    • iOS7 or Later

    • Based on Core Text

    View full-size slide

  13. TextKit and CoreText

    View full-size slide

  14. Before iOS7 …
    HTMLͰඳը

    View full-size slide

  15. iOS7 or Later

    View full-size slide

  16. API groups
    w ςΩετΛදࣔ͢Δ
    w 6*5FYU7JFX
    w 6*5FYU'JFME
    w 6*-BCFM
    w ςΩετඳըΛ੍ޚ͢Δ
    w /4-BZPVU.BOBHFS
    w /45FYU$POUBJOFS
    w σΩετσʔλΛอ؅͢Δ
    w /4"UUSJCVUF4USJOH
    TextKitͷຊؙ

    View full-size slide

  17. API groups
    w ςΩετΛදࣔ͢Δ
    w 6*5FYU7JFX
    w 6*5FYU'JFME
    w 6*-BCFM
    w ςΩετඳըΛ੍ޚ͢Δ
    w /4-BZPVU.BOBHFS
    w /45FYU$POUBJOFS
    w σΩετσʔλΛอ؅͢Δ
    w /4"UUSJCVUF4USJOH
    View
    Controller
    Model

    View full-size slide

  18. TextKit Like “MVC”
    w7JFX
    w6*5FYU7JFX
    w6*5FYU'JFME
    w6*-BCFM
    w$POUSPMMFS
    w-BZPVU.BOBHFS
    w/45FYU$POUBJOFS
    w.PEFM
    w/4"UUSJCVUFE4USJOH

    View full-size slide

  19. The Reletions between Objects
    UITextView NSTextContainer
    NSLayoutManager
    NSTextStorage

    View full-size slide

  20. Structures
    ɾNSAttributeString
    ɾNSContainer
    ɾNSTextLayoutManger

    View full-size slide

  21. NSTextStorage

    View full-size slide

  22. The Reletions between Objects
    UITextView NSTextContainer
    NSLayoutManager
    NSTextStorage

    View full-size slide

  23. NSTextStorage
    • TextKitͷModelʹ૬౰͢Δ

    • NSMutableAttributedStringͷSubclass (ΫϥεΫϥελ)

    • NSLayoutManagerͷมߋΛcharacters ΍ attributes ʹ

    ௨஌ͯ͠ඞཁͳΒ͹࠶දࣔΛଅ͢

    • 1ͭຢ͸ෳ਺ͷNSLayoutManagerΛ࣋ͭ

    • ͲͷεϨου͔ΒͰ΋ΞΫηεՄೳ

    • ಉ࣌ʹෳ਺εϨου͔ΒͷΞΫηε͸ආ͚ͨํ͕ແ೉
    https://developer.apple.com/documentation/uikit/nstextstorage

    View full-size slide

  24. Original Storage
    NSAttributedStringͷϓϦϛςΟϒϝιου
    NSMutableAttributedStringͷϓϦϛςΟϒϝιου
    ৄࡉ͸AppleͷʮObjective-C ϓϩάϥϛϯά֓೦ʯͳͲΛࢀর

    View full-size slide

  25. Ex. CustomTextStorage

    View full-size slide

  26. NSAttributedString

    View full-size slide

  27. NSAttributedString
    /4"UUSJCVUFE4USJOHͱಉ͡ػೳ

    View full-size slide

  28. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  29. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  30. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  31. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  32. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  33. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  34. UIFont
    • pointSize

    • lineHeight

    • ascender

    • desceder

    • leading

    • capHeight

    View full-size slide

  35. usesFontLeading
    LeadingΛແࢹ͢Δ৔߹

    View full-size slide

  36. Adding a Custom Font
    • αϙʔτ͍ͯ͠Δܗࣜ

    • True Type Font (*.ttf)

    • Open TypeFont (*.otf)

    • ະ֬ೝ

    • True Type Collection (*.ttc) ʁʁ

    View full-size slide

  37. NSAttributedString
    • σϑΥϧτ஋͕ଘࡏ͢Δ

    View full-size slide

  38. I Love iOSDC
    Apply bold font with "Comic Sans MS"

    View full-size slide

  39. I
    Love iOSDC
    textView.text = "I Love iOSDC"
    guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return }
    let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold)
    let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize))
    let newText = NSMutableAttributedString(string: textView.text)
    newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5))
    textView.attributedText = newText

    View full-size slide

  40. I
    Love iOSDC
    textView.text = "I Love iOSDC"
    guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return }
    let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold)
    let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize))
    let newText = NSMutableAttributedString(string: textView.text)
    newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5))
    textView.attributedText = newText
    I
    Love iOSDC

    View full-size slide

  41. textView.text = "I Love iOSDC"
    guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return }
    let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold)
    let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize))
    let newText = NSMutableAttributedString(string: textView.text)
    newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5))
    textView.attributedText = newText

    View full-size slide

  42. I
    Love iOSDC
    Comic Sans MS 24-pt
    I Love iOSDC
    Arial Black 12-pt
    I Love iOSDC
    Helvetica 12-pt
    ద༻લ
    ॳظԽ
    ଐੑઃఆ

    View full-size slide

  43. Attributes with default values
    Baseline offset 0.0
    Font Helvetica 12-pt
    Background color None (no background)
    Kern None (use font's default kerning)
    Ligature None (use font's standard ligatures)
    Link None
    Foreground color None (no background)
    Paragraph style defaultParagapghStyle

    View full-size slide

  44. I
    Love iOSDC
    textView.text = "I Love iOSDC"
    guard let originFont = UIFont(name: "Comic Sans MS", size: 24.0) else { return }
    let boldFontDescriper = originFont.fontDescriptor.withSymbolicTraits(.traitBold)
    let boldFont = UIFont(descriptor: boldFontDescriper!, size: (originFont.pointSize))
    let newText = NSMutableAttributedString(attributedString: textView.attributedText)
    newText.addAttribute(.font, value: boldFont, range: NSRange(location: 1, length: 5))
    textView.attributedText = newText ΠχγϟϥΠβʹଐੑ৘ใΛ༩͑Δ

    View full-size slide

  45. The Reletions between Objects
    UITextView NSTextContainer
    NSLayoutManager
    NSTextStorage

    View full-size slide

  46. NSLayoutManager

    View full-size slide

  47. NSLayoutManager
    • ϨΠΞ΢τͱϨϯμϦϯάʹؔ͢Δௐ੔Λߦ͏

    • ςΩετΛදࣔ͢΂͖࠲ඪͱܗঢ় -> NSTextContainer

    • දࣔ͢Δίϯςϯπ -> NSTextStorage

    • ̍ͭ·ͨ͸ෳ਺ͷNSTextContainerΛ࣋ͭ

    • ̍ͭͷNSTextStorageΛ࣋ͭ

    View full-size slide

  48. NSLayoutManager

    View full-size slide

  49. NSTextContainer

    View full-size slide

  50. NSTextContainer
    ʮUIKitపఈղઆ iOSϢʔβʔΠϯλʔϑΣΠεͷ։ൃʯΑΓൈਮ

    View full-size slide

  51. ʮUIKitపఈղઆ iOSϢʔβʔΠϯλʔϑΣΠεͷ։ൃʯΑΓൈਮ

    View full-size slide

  52. NSTextContainer
    ඇදࣔྖҬ

    View full-size slide

  53. NSTextContainer
    • UITextView্ʹදࣔ͢ΔςΩετͷ࠲ඪͱܗঢ়Λఆٛ


    View full-size slide

  54. NSTextContainer
    → NSLaytouManager͕ςΩετҐஔΛڭ͑ͯ͘ΕΔ

    View full-size slide

  55. NSTextContainer
    ιʔείʔυ͸ͪ͜Β ->ɹhttps://github.com/takumi314/Sensitive-TextView

    View full-size slide

  56. Summary
    • TextKitΛ੍͢Ε͹ɺେ൒ͷςΩετඳըΛϚελͰ͖Δ

    • ࡉ෦ʹϑΥʔΧε͢Δ΄Ͳଟ༷ͳςΩετදݱʹ

    View full-size slide

  57. • Text Programming Guide for iOS - https://
    developer.apple.com/library/archive/documentation/
    StringsTextFonts/Conceptual/TextAndWebiPhoneOS/
    CustomTextProcessing/CustomTextProcessing.html

    • WWDC2018 “TextKit Best Practice” - session 221

    • WWDC2013 “Introducing TextKit” - session 210
    References

    View full-size slide

  58. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    m(__)m

    View full-size slide