フォントの基本とUIFont/UIFontDescriptor

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

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 Y
   IFJHIU DBQT
   IFJHIU "TDFOEFS %FTDFOEFS
8. baseline CBTFMJOF Y
   IFJHIU DBQT
   IFJHIU "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