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

フォントの基本とUIFont/UIFontDescriptor

F05557f473bac91b5bdc6c2e8a95c6f2?s=47 satoshin21
January 14, 2017

 フォントの基本とUIFont/UIFontDescriptor

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

F05557f473bac91b5bdc6c2e8a95c6f2?s=128

satoshin21

January 14, 2017
Tweet

Transcript

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

  2. satoshin21 SatoshiN21 ௕ࡔ ޛࢤ (Nagasaka Satoshi) - iOS Engineer of

    pairs Div. eureka, Inc. - Swift, Objective-C, Java(Android), Apple Script
  3. - pairs - Couples

  4. class UIFont

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

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

    w )FJHIUܥ MJOF)FJHIU MFBEJOH DBQ)FJHIU  w CBTFMJOFܥ
  7. baseline CBTFMJOF YIFJHIU DBQTIFJHIU "TDFOEFS %FTDFOEFS

  8. baseline CBTFMJOF YIFJHIU DBQTIFJHIU "TDFOEFS %FTDFOEFS ‣ CBTFMJOFΛى఺ʹͯ͠ԤจϑΥϯτ͸ϨΠΞ΢τ͞ΕΔ ‣ BTDFOEFS

    w CBTFMJOF͔Β্෦ͷڑ཭ ‣ EFTDFOEFS w CBTFMJOF͔ΒԼ෦ͷڑ཭ ෛ਺  ‣ MFBEJOH w GPOUͷ࣋ͭߦؒ஋ w MFBEJOHͷͳ͍ϑΥϯτ΋ γεςϜϑΥϯτͳͲ
  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
  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
  11. AutoLayout firstBaseline // first baselineを揃える minLabel.firstBaselineAnchor .constraint(equalTo: largeLabel.firstBaselineAnchor).isActive = true

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

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

  14. class UIFontDescriptor

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

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

  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)
  18. UIFontDescriptorMatrixAttribute ‣ ֤άϦϑ จࣈ ʹରͯ͠ΞϑΟϯม׵ $("⒏OF5SBOTGPSN Λߦ͏ w ֦େɾॖখ w

    ճసͳͲ
  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)
  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)
  21. ͦͷଞ UIFontDescriptor Attributes ‣ 6*'POU%FTDSJQUPS5SBJUT"UUSJCVUF w ΢ΣΠτଐੑ΍ઢͷ෯ɺࣼମͷ֯౓ͳͲͷϑΥϯτಛੑ ‣ 6*'POU%FTDSJQUPS'JYFE"EWBODF"UUSJCVUF w

    ࣈૹΓ "EWBODF ͷ஋Λࢦఆ w ࣈؒ͸/4"UUSJCVUFE4USJOHͷ/4,FSO"UUSJCVUF/BNFͰࢦఆ
  22. ϑΥϯτΛཧղͯ͠ σβΠφʔͱԁ׈ͳίϛϡχέʔγϣϯΛ

  23. Thank you IUUQTXXXOBTBHPWNJTTJPO@QBHFT/11OFXTFBSUIBUOJHIUIUNM