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

フォントの基本とUIFont/UIFontDescriptor

satoshin21
January 14, 2017

 フォントの基本とUIFont/UIFontDescriptor

デザイナーとのコミュニケーションに必須なフォントの基本と
iOSの開発に用いられるUIFontと更に柔軟にフォントを扱えるUIFontDescriptorについて #potatotips36

satoshin21

January 14, 2017
Tweet

More Decks by satoshin21

Other Decks in Programming

Transcript

  1. ϑΥϯτͷجຊͱ
    UIFont/UIFontDescriptor
    @SatoshiN21

    View full-size slide

  2. satoshin21
    SatoshiN21
    ௕ࡔ ޛࢤ (Nagasaka Satoshi)
    - iOS Engineer of pairs Div. eureka, Inc.
    - Swift, Objective-C, Java(Android), Apple Script

    View full-size slide

  3. - pairs
    - Couples

    View full-size slide

  4. class UIFont

    View full-size slide

  5. ϑΥϯτ/ॻମ
    ‣ ϑΥϯτ㲈ॻମ
    w ॻମ͸ʮ͋ΔҰ؏ͨ͠σβΠϯํ਑Ͱ࡞ΒΕͨจࣈͷू·Γʯ
    w ૊൛ͱ΋
    w ϑΥϯτ͸ͦΕΛදݱ͢Δखஈɺ΋͘͠͸Ұଗ͍ͷσʔλ

    View full-size slide

  6. UIFont
    ‣ 6*'POU͕͍࣋ͬͯΔ৘ใ
    w /BNF GPOU/BNF GBNJMZ/BNF

    w QPJOU4J[F
    w )FJHIUܥ MJOF)FJHIU MFBEJOH DBQ)FJHIU

    w CBTFMJOFܥ

    View full-size slide

  7. baseline
    CBTFMJOF
    YIFJHIU
    DBQTIFJHIU
    "TDFOEFS
    %FTDFOEFS

    View full-size slide

  8. baseline
    CBTFMJOF
    YIFJHIU
    DBQTIFJHIU
    "TDFOEFS
    %FTDFOEFS
    ‣ CBTFMJOFΛى఺ʹͯ͠ԤจϑΥϯτ͸ϨΠΞ΢τ͞ΕΔ
    ‣ BTDFOEFS
    w CBTFMJOF͔Β্෦ͷڑ཭
    ‣ EFTDFOEFS
    w CBTFMJOF͔ΒԼ෦ͷڑ཭ ෛ਺

    ‣ MFBEJOH
    w GPOUͷ࣋ͭߦؒ஋
    w MFBEJOHͷͳ͍ϑΥϯτ΋ γεςϜϑΥϯτͳͲ

    View full-size slide

  9. // San Francisco(.SFUIText)
    let font = UIFont.systemFont(ofSize: 12)
    let height = abs(font.descender) + font.ascender + font.leading
    font.lineHeight == height // true
    font.lineHeight

    View full-size slide

  10. AutoLayout தԝἧ͑
    minLabel.leftAnchor.constraint(equalTo:
    view.leftAnchor, constant: 10).isActive = true
    minLabel.rightAnchor.constraint(equalTo:
    largeLabel.leftAnchor, constant: -12).isActive
    = true
    // Y軸を揃える
    minLabel.centerYAnchor
    .constraint(equalTo:
    largeLabel.centerYAnchor).isActive = true

    View full-size slide

  11. AutoLayout firstBaseline
    // first baselineを揃える
    minLabel.firstBaselineAnchor
    .constraint(equalTo:
    largeLabel.firstBaselineAnchor).isActive =
    true

    View full-size slide

  12. AutoLayout lastBaseline
    // last baselineを揃える
    minLabel.lastBaselineAnchor.constraint(equalTo
    : largeLabel.lastBaselineAnchor).isActive =
    true

    View full-size slide

  13. ϑΥϯτʹҰखؒՃ͍͑ͨɾɾ

    View full-size slide

  14. class UIFontDescriptor

    View full-size slide

  15. UIFontDescriptorͱ͸
    ‣ ༷ʑͳϑΥϯτ৘ใΛऔಘ͢Δ͜ͱ͕Մೳ
    w ΢ΣΠτɺΧεέʔυϑΥϯτɺελΠϧ ࣼମͷ֯౓౳

    ‣ ্هͷ஋Λมߋɺ௥Ճ͢Δ͜ͱ͕Մೳ

    View full-size slide

  16. UIFontDescriptorCascadeListAttribute
    ‣ ΧεέʔυϑΥϯτΛ഑ྻͰࢦఆ
    ‣ ೔ຊޠͷ৔߹͸͜ͷϑΥϯτͰද͍ࣔͨ͠ͱ͍͏࣌ͳͲʹ׆༻

    View full-size slide

  17. UIFontDescriptorCascadeListAttribute
    let fontDescriptor = UIFontDescriptor(fontAttributes: [UIFontDescriptorNameAttribute:
    ".SFUIDisplay"])
    let japaneseFont = UIFontDescriptor(fontAttributes: [UIFontDescriptorNameAttribute:
    "HiraMinProN-W3"])
    // カスケードフォントを配列で指定
    let mixedFontDescriptor =
    fontDescriptor.addingAttributes([UIFontDescriptorCascadeListAttribute: [japaneseFont]])
    label.font = UIFont(descriptor: mixedFontDescriptor, size: 75)

    View full-size slide

  18. UIFontDescriptorMatrixAttribute
    ‣ ֤άϦϑ จࣈ
    ʹରͯ͠ΞϑΟϯม׵ $("⒏OF5SBOTGPSN
    Λߦ͏
    w ֦େɾॖখ
    w ճసͳͲ

    View full-size slide

  19. UIFontDescriptorMatrixAttribute
    let scale = CGAffineTransform(scaleX: 1.0, y: 2.0)
    let fontDescriptor = UIFontDescriptor(name: ".SFUIDisplay", matrix: scale)
    label.font = UIFont(descriptor: fontDescriptor, size: 75)

    View full-size slide

  20. UIFontDescriptorMatrixAttribute
    let rotate = CGAffineTransform(rotationAngle: CGFloat(M_PI * 15.0 / 180.0))
    let fontDescriptor = UIFontDescriptor(name: ".SFUIDisplay", matrix: rotate)
    label2.font = UIFont(descriptor: fontDescriptor, size: 75)

    View full-size slide

  21. ͦͷଞ UIFontDescriptor Attributes
    ‣ 6*'POU%FTDSJQUPS5SBJUT"UUSJCVUF
    w ΢ΣΠτଐੑ΍ઢͷ෯ɺࣼମͷ֯౓ͳͲͷϑΥϯτಛੑ
    ‣ 6*'POU%FTDSJQUPS'JYFE"EWBODF"UUSJCVUF
    w ࣈૹΓ "EWBODF
    ͷ஋Λࢦఆ
    w ࣈؒ͸/4"UUSJCVUFE4USJOHͷ/4,FSO"UUSJCVUF/BNFͰࢦఆ

    View full-size slide

  22. ϑΥϯτΛཧղͯ͠
    σβΠφʔͱԁ׈ͳίϛϡχέʔγϣϯΛ

    View full-size slide

  23. Thank you
    IUUQTXXXOBTBHPWNJTTJPO@QBHFT/11OFXTFBSUIBUOJHIUIUNM

    View full-size slide