SwiftUI Text Rendering Deep Dive

Transcript

1. SwiftUI Text Rendering Deep Dive Text(“\(price)”)がピクセルになるまで elmetal iOSDC Japan 2026 2026-09-12 #iosdc #d 1
2. About me @el̲metal̲ iOS App Developer 複数チームの 技術支援 #iosdc #d 2 競馬 対戦ゲーム 育児
3. Intro #iosdc #d 3
4. Textは簡単ではない • 普段何気なく使っているText • 簡単ではない • ロケールを変えるとレイアウトが崩れる • TextとStringでローカライズの挙動が異なる • AttributedStringの一部だけスタイルを変えたい • テキストエフェクトをカスタムしたい #iosdc #d 4
5. 値が画面に表示されるまで Value 画面への表示 Formatting Text Construction Layout #iosdc #d 5 表示内容の構築 Rendering Pixels
6. FormatStyleとStringInterpolation #iosdc #d 6
7. FormatStyleとStringInterpolation Value 画面への表示 Formatting Text Construction Layout #iosdc #d 7 表示内容の構築 Rendering Pixels
8. FormatStyle #iosdc #d 8
9. Textは同じ表示を複数の書き方で作れる Text("￥1,234") Text(verbatim: "￥1,234") Text(price, format: .currency(code: "JPY”)) Text(verbatim: price.formatted(.currency(code: "JPY"))) #iosdc #d 9
10. Textは同じ表示を複数の書き方で作れる Text("￥1,234") これらはTextに渡す値を 作る途中経過が異なる Text(verbatim: "￥1,234") Text(price, format: .currency(code: "JPY”)) Text(verbatim: price.formatted(.currency(code: "JPY"))) #iosdc #d 10
11. 文字列リテラルを渡す Text(verbatim: "￥1,234") • これは単純なStringを渡している • LocalizedStringKeyやLocalizedStringResourceなどのリソースとして扱わ ず、そのままTextに渡される #iosdc #d 11
12. 文字列リテラルを渡す Text("￥1,234") • これは単純なStringを渡しているとは限らない • LocalizedStringKeyやLocalizedStringResourceなどのリソースとして扱われ Textに渡される場合がある #iosdc #d 12
13. FormatStyleで作った文字列を渡す Text(verbatim: price.formatted(.currency(code: "JPY"))) • FoundationのFormatStyleで表示文字列を生成 • フォーマット処理はTextをinitする前に完了 #iosdc #d 13
14. 値とFormatStyleをTextへ渡す Text(price, format: .currency(code: "JPY")) • Textの中でフォーマットが行われる • SwiftUIのenvironmentを使ってLocaleを表示に反映できる • 先にフォーマットする場合はFormatStyleのlocaleが使われるので、SwiftUI のenvironmentではLocaleが反映されない #iosdc #d 14
15. Localeを変えて表示してみる ja̲JP Text(price, format: .currency(code: “JPY")) .environment(\.locale, Locale(identifier: "ja_JP")) #iosdc #d 15
16. Localeを変えて表示してみる en̲US Text(price, format: .currency(code: “JPY")) .environment(\.locale, Locale(identifier: “en_US”)) #iosdc #d 16
17. Localeを変えて表示してみる fr̲FR Text(price, format: .currency(code: “JPY")) .environment(\.locale, Locale(identifier: “fr_FR”)) #iosdc #d 17
18. StringInterpolation #iosdc #d 18
19. SwiftのInterpolation • ExpressibleByStringInterpolationに準拠する型は独自のStringInterpolaiton を持てる • String→String.StringInterpolation • Text→Text.StringInterpolaiton • リテラルが最終的にどの型で解釈されるかによってどのStringInterpolationが 使われるかが決まる #iosdc #d 19
20. String.StringInterpolation let s: String = "価格は\(price)です" • 型をStringに明示しているのでStringで扱われる • この場合はString.Interpolationが使われる #iosdc #d 20
21. Text.StringInterpolation Text("価格は\(price, format: .currency(code: "JPY"))です") • リテラルはText.StringInterpolationで処理される • Text.StringInterpolationにより、「価格は¥1,234です」全体を一つのローカライズ単位と して扱える • 翻訳リソース側では値をプレースホルダーとして動的に組み込める • 文全体の表現や語順を変更できる • TextのInterpolationに値とFormatStyleを渡すことで、リテラル、値、FormatStyleを統合 して、localizable textにできる #iosdc #d 21
22. LocaleとICUによる国際化処理 #iosdc #d 22
23. LocaleとICUによる国際化処理 Value 画面への表示 Formatting Text Construction Layout #iosdc #d 23 表示内容の構築 Rendering Pixels
24. FormatStyleは1234という値から ¥1,234という文字列をどのように作るのか？ #iosdc #d 24
25. 通貨フォーマットを支えるもの FormatStyleのCon gurationとLocaleをもとにICUが表示規則を適用 1234 ICU 表示規則を適用 • FormatStyleのCon guration .currency(code: “JPY”) • Locale ja̲JP #iosdc #d fi fi 25 ¥1,234
26. Locale • Localeは単なる言語の指定ではない • 言語や地域、数字の体系、暦などの国際化処理で表示方法を決めるための複 数の要素をまとめたコンテキスト情報 • Localeに書式が埋め込まれているわけではない • ICUが適切なロケールデータを解決できるようにコンテキストを提供する #iosdc #d 26
27. FormatStyleのCon guration • Con gurationでは値の表現方法を精度・桁区切り・符号などの要素ごとに指定する • 例えばNumberFormatStyleCon guration • currency: JPY • Precision: integer • Grouping: automatic • Sign: automatic • 表現方法の指定から具体的な記号がどうやって決まるのか？ #iosdc #d fi fi fi 27
28. ICU(International Components for Unicode) Unicode対応の文字列処理や、Localeに応じた書式設定を提供する国際化ライブラリ • Swift Foundationの国際化ではICUが利用されている • FormatStyleの設定とLocaleを使ってICU number formatterを構成する • ICUが通過記号・区切り・配置などをLocaleに応じて解決 • Swift FoundationではICUNumberFormatter.swiftから実装を追える • 実装の詳細は省略 • ここで表示用の文字列に変換される #iosdc #d 28
29. AttributedStringとText #iosdc #d 29
30. AttributedString Value 画面への表示 Formatting Text Construction Layout #iosdc #d 30 表示内容の構築 Rendering Pixels
31. AttributedString 文字列の範囲ごとに属性を持てる値型 ¥1,234 #iosdc #d 31
32. AttributedString 文字列の範囲ごとに属性を持てる値型 ¥ currency symbol 1 integer , grouping separater 234 integer #iosdc #d 32
33. AttributedScopes 用途ごとに属性を整理 • AttributedStringで扱える属性は見た目だけではない • AttributedScopesで用途ごとに属性が整理されている • FoundationAttributes • SwiftUIAttributes / UIKitAttributes / AppKitAttributes • Custom Attributes • 型でスコープを分けることで属性名の衝突を避けて属性追加ができる #iosdc #d 33
34. AttributedString.Runs • AttributedString.Runsで属性が一定範囲ごとに分割される • 隣り合う文字が同じ属性を持っていれば一つのrunにまとまる ¥ currency symbol 1 integer , grouping separater 234 integer #iosdc #d 34
35. AttributedStringとFormatStyle • 一部のFormatStyleはAttributedStringの結果を返せる • AttributedStringを返す仕組みを使うことでフォーマットの構造を再度解析す ることなく扱える #iosdc #d 35
36. FormatStyleでAttributedStringを返す let attributed = price.formatted( .currency(code: "JPY").attributed ) for run in attributed.runs { print(attributed[run.range]) print(run.attributes) } #iosdc #d 36
37. FormatStyleでAttributedStringを返す let attributed = price.formatted( .currency(code: "JPY").attributed ) ¥ currency symbol 1 integer for run in attributed.runs { print(attributed[run.range]) print(run.attributes) } , grouping separater 234 #iosdc #d 37 integer
38. TextとAttributedString • TextはAttributedStringも受け取れる • AttributedStringを渡すと、AttributedStringの属性に従ってテキストがスタ イリングされる #iosdc #d 38
39. SwiftUIのテキストレイアウト #iosdc #d 39
40. SwiftUIのテキストレイアウト Value 画面への表示 Formatting Text Construction Layout #iosdc #d 40 表示内容の構築 Rendering Pixels
41. Textのサイズ • Text(“hello world”)が何行になるかはコードだけでは決まらない • 利用できる幅が広ければ一行に • 狭ければ複数行に分かれる #iosdc #d 41
42. Textのサイズは文字列だけでは決まらない フォントファミリー 利用できる幅 サイズ・ウェイト 行間 #iosdc #d 42 行数制限
43. A text view always uses exactly the amount of space it needs to display its rendered contents, but you can a ect the viewʼs layout. Text ̶ https://developer.apple.com/documentation/swiftui/text #iosdc #d ff 43
44. SwiftUIのレイアウトプロセス 親Viewが利用可能サイズを子Viewに提示する 子Viewが提案に対して自分のサイズを親Viewに返す 親Viewが子Viewを配置する SwiftUIでカスタムビューを構築する - WWDC19 - https://developer.apple.com/jp/videos/play/wwdc2019/237 #iosdc #d 44
45. Textのレイアウトプロセス 基本はSwiftUIのレイアウトプロセスに従う 親Viewが利用可能サイズをTextに提示する 利用可能幅に合わせて行を形成する 各行を配置し、Textのサイズを親Viewに返す #iosdc #d 45
46. Textのレイアウト結果に影響する属性 タイポグラフィ Font ローカライズ Locale Layout direction Dynamic type size Line spacing Line limit Multiline text alignment 段落設定 Available width Truncation #iosdc #d 46 表示制約
47. レイアウト結果への影響の例 文字とグリフが1対1にならない • 複数のunicode scalarが一つの文字を構成する • 複数の文字が合字によって一つのグリフになる • 前後の文字に応じてグリフが変わる • 使用するフォントによってグリフの形や幅が変わる #iosdc #d 47
48. レイアウト結果への影響の例 文字列中の順序と画面上の並びが一致しない • Right to Leftの文字が含まれる • 一つの文章内で異なる書字方向が混在する #iosdc #d 48
49. シェーピング 文字列をフォントに応じたグリフ列に変換する 文字列 フォント情報 シェーピング • グリフの選択 • 位置の調整 #iosdc #d 49 グリフ列 グリフ同士の配置
50. シェーピング結果にレイアウト条件を適用する シェーピング済みのグリフ レイアウト条件 • 利用可能なサイズ・改行規則・書字方向 • lineLimit・truncationMode Text.Layout #iosdc #d 50
51. Text.Layout • Text.Layoutはレイアウト済みテキ ストの結果 Text.Layout ├─ Line │ ├─ Run │ │ ├─ Glyph │ │ └─ Glyph │ └─ Run └─ Line • 複数のLineで構成され、各Line は複数のRunを持つ • Runにはシェーピングされ、位 置が決まったGlyphが含まれる • TextRendererがこの構造を走査し て描画する #iosdc #d 51
52. Text.Layout.Line • Text.LayoutはLineのコレクション • Lineは一行に配置された複数のRunを持つ • originから行の描画位置を参照できる • typographicBoundsから幅・ascent・descent・leadingを参照できる #iosdc #d
53. Text.Layout.Run • シェーピング後のグリフはText.Layout.Runにまとめられる • フォント・属性・書字方向が変わる位置でRunが分かれる • Text.Layout.RunとAttributedString.Runの境界は一致しない • AttributedStringの属性以外もRunの境界に影響する #iosdc #d 53
54. TextRendererと描画 #iosdc #d 54
55. TextRendererと描画 Value 画面への表示 Formatting Text Construction Layout #iosdc #d 55 表示内容の構築 Rendering Pixels
56. TextRenderer SwiftUIのTextの描画を置き換えるプロトコル • レイアウト済みのText.Layoutを受け取る • GraphicsContextへ描画する • .textRenderer(̲:)をつけたView階層内のTextに適用される SwiftUIによるカスタムビジュアルエフェクトの作成 - WWDC24 - https://developer.apple.com/jp/videos/play/wwdc2024/10151/ #iosdc #d 56
57. draw(layout: in:) レイアウト結果と描画先を受け取る • layoutからLine・Run・RunSlice を走査する func draw( layout: Text.Layout, in context: inout GraphicsContext ) • contextへ各要素を描画する • TextRendererはレイアウト結果 を描画するだけで、再レイアウト はしない SwiftUIによるカスタムビジュアルエフェクトの作成 - WWDC24 - https://developer.apple.com/jp/videos/play/wwdc2024/10151/ #iosdc #d 57
58. 描画する単位 Text.Layoutを走査 • Lineを描画すると、行単位で効 果を適用できる Text.Layout ├─ Line │ ├─ Run │ │ ├─ RunSlice │ │ └─ RunSlice │ └─ Run └─ Line • Runを描画すると、属性のまとま りごとに処理できる • RunSliceを利用すると、グリフ や埋め込み要素ごとに処理でき る #iosdc #d 58
59. RunをGraphicsContextに描画する 配置済みのRunはタイポグラフィ情報を持つ • TextRendererではText.Layout.RunをGraphicsContextに直接描画できる • Runには描画に利用できるタイポグラフィ情報も含まれている • typographicBoundsから width, ascent, rectなどを取得できる #iosdc #d 59
60. RunをGraphicsContextに描画する typographicBoundsを参照して描画する struct BoundsTextRenderer: TextRenderer { func draw( layout: Text.Layout, in context: inout GraphicsContext ) { for line in layout { for run in line { let rect = run.typographicBounds.rect context.stroke( Path(rect), with: .color(.red), lineWidth: 1 ) context.draw(run) } } } } #iosdc #d 60
61. TextAttributeで描画を変更したいRunを指定する • TextAttributeはTextにつけるカスタム属性 • TextRendererはRunからTextAttributeを参照できる • TextAttribute自体は見た目を変更しない • TextRendererでTextAttributeを条件に描画方法を変更できる • テキストの内容やローカライズによってrunの分割が変わっても TextAttributeを参照することで視覚効果をテキスト内容と分離して扱える #iosdc #d 61
62. AttributedStringとTextAttributeの違い AttributedString TextAttribute 対象 文字列の範囲 Textの範囲 主な用途 内容と書式を保持する TextRendererへ対象の情報を渡す レイアウトへの影響 フォントなどの属性が影響する 属性そのものはレイアウトを変更しない 描画 Textの描画に反映される TextRendererが解釈すると反映される #iosdc #d 62
63. 描画が元の領域をはみ出す場合 • Shadow、ぼかし、移動はレイアウト済み領域の外まで描画される • 描画効果を加えても、元のTextのレイアウト領域は自動では広がらない • 必要に応じてRenderer側で表示の余白やサイズを考慮する • displayPaddingで領域外へ広がる描画が切れないようにする • Textの折り返しや配置は変わらない • View.paddingはレイアウト上の余白を扱うので少し役割が異なる #iosdc #d 63
64. TextRendererはレイアウト結果を描画する • SwiftUIからレイアウト済みのText.Layoutを受け取る • TextRendererはLineやRunを走査して、GraphicsContextへ描画する • 描画は変更できるが元のレイアウト結果は変わらない #iosdc #d 64
65. まとめ #iosdc #d 65
66. TextがPixelになるまで Value 画面への表示 Formatting Text Construction Layout #iosdc #d 66 表示内容の構築 Rendering Pixels
67. Textの見た目は段階ごとに決まる • 表示内容を変える • FormatStyle/AttributedString • 配置を変える • Layout • 描画を変える • TextRenderer
68. ありがとうございました #iosdc #d