Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フォントの基本とUIFont/UIFontDescriptor
Search
satoshin21
January 14, 2017
Programming
12
3.5k
フォントの基本とUIFont/UIFontDescriptor
デザイナーとのコミュニケーションに必須なフォントの基本と
iOSの開発に用いられるUIFontと更に柔軟にフォントを扱えるUIFontDescriptorについて #potatotips36
satoshin21
January 14, 2017
Tweet
Share
More Decks by satoshin21
See All by satoshin21
少数精鋭で戦うための技術的改善について
satoshin21
3
1.1k
GTXiLibで小さく始めるAccessibility Testing
satoshin21
0
4.9k
iPhoneのカメラで写真撮影から現像までの技術を紐解く
satoshin21
4
3.2k
try! swift-sh
satoshin21
2
850
Reduxを取り入れて開発はpairs開発はどう変わったか
satoshin21
0
340
レガシーなアプリケーションの 60fps化を目指す為にやっていること
satoshin21
12
3.8k
Introducing CodeLayout with Tips
satoshin21
6
1.5k
World of No Interface Builder
satoshin21
0
1.8k
What I've done to attend WWDC
satoshin21
0
91
Other Decks in Programming
See All in Programming
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
100
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.5k
初めてDefinitelyTypedにPRを出した話
syumai
0
410
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
Visualization
eitanlees
145
15k
Statistics for Hackers
jakevdp
796
220k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Transcript
ϑΥϯτͷجຊͱ UIFont/UIFontDescriptor @SatoshiN21
satoshin21 SatoshiN21 ࡔ ޛࢤ (Nagasaka Satoshi) - iOS Engineer of
pairs Div. eureka, Inc. - Swift, Objective-C, Java(Android), Apple Script
- pairs - Couples
class UIFont
ϑΥϯτ/ॻମ ‣ ϑΥϯτ㲈ॻମ w ॻମʮ͋ΔҰ؏ͨ͠σβΠϯํͰ࡞ΒΕͨจࣈͷू·Γʯ w ൛ͱ w ϑΥϯτͦΕΛදݱ͢Δखஈɺ͘͠Ұଗ͍ͷσʔλ
UIFont ‣ 6*'POU͕͍࣋ͬͯΔใ w /BNF GPOU/BNF GBNJMZ/BNF w QPJOU4J[F
w )FJHIUܥ MJOF)FJHIU MFBEJOH DBQ)FJHIU w CBTFMJOFܥ
baseline CBTFMJOF YIFJHIU DBQTIFJHIU "TDFOEFS %FTDFOEFS
baseline CBTFMJOF YIFJHIU DBQTIFJHIU "TDFOEFS %FTDFOEFS ‣ CBTFMJOFΛىʹͯ͠ԤจϑΥϯτϨΠΞτ͞ΕΔ ‣ BTDFOEFS
w CBTFMJOF͔Β্෦ͷڑ ‣ EFTDFOEFS w CBTFMJOF͔ΒԼ෦ͷڑ ෛ ‣ MFBEJOH w GPOUͷ࣋ͭߦؒ w MFBEJOHͷͳ͍ϑΥϯτ γεςϜϑΥϯτͳͲ
// San Francisco(.SFUIText) let font = UIFont.systemFont(ofSize: 12) let height
= abs(font.descender) + font.ascender + font.leading font.lineHeight == height // true font.lineHeight
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
AutoLayout firstBaseline // first baselineを揃える minLabel.firstBaselineAnchor .constraint(equalTo: largeLabel.firstBaselineAnchor).isActive = true
AutoLayout lastBaseline // last baselineを揃える minLabel.lastBaselineAnchor.constraint(equalTo : largeLabel.lastBaselineAnchor).isActive = true
ϑΥϯτʹҰखؒՃ͍͑ͨɾɾ
class UIFontDescriptor
UIFontDescriptorͱ ‣ ༷ʑͳϑΥϯτใΛऔಘ͢Δ͜ͱ͕Մೳ w ΣΠτɺΧεέʔυϑΥϯτɺελΠϧ ࣼମͷ֯ ‣ ্هͷΛมߋɺՃ͢Δ͜ͱ͕Մೳ
UIFontDescriptorCascadeListAttribute ‣ ΧεέʔυϑΥϯτΛྻͰࢦఆ ‣ ຊޠͷ߹͜ͷϑΥϯτͰද͍ࣔͨ͠ͱ͍͏࣌ͳͲʹ׆༻
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)
UIFontDescriptorMatrixAttribute ‣ ֤άϦϑ จࣈ ʹରͯ͠ΞϑΟϯม $("⒏OF5SBOTGPSN Λߦ͏ w ֦େɾॖখ w
ճసͳͲ
UIFontDescriptorMatrixAttribute let scale = CGAffineTransform(scaleX: 1.0, y: 2.0) let fontDescriptor
= UIFontDescriptor(name: ".SFUIDisplay", matrix: scale) label.font = UIFont(descriptor: fontDescriptor, size: 75)
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)
ͦͷଞ UIFontDescriptor Attributes ‣ 6*'POU%FTDSJQUPS5SBJUT"UUSJCVUF w ΣΠτଐੑઢͷ෯ɺࣼମͷ֯ͳͲͷϑΥϯτಛੑ ‣ 6*'POU%FTDSJQUPS'JYFE"EWBODF"UUSJCVUF w
ࣈૹΓ "EWBODF ͷΛࢦఆ w ࣈؒ/4"UUSJCVUFE4USJOHͷ/4,FSO"UUSJCVUF/BNFͰࢦఆ
ϑΥϯτΛཧղͯ͠ σβΠφʔͱԁͳίϛϡχέʔγϣϯΛ
Thank you IUUQTXXXOBTBHPWNJTTJPO@QBHFT/11OFXTFBSUIBUOJHIUIUNM