英語と日本語の文字をComposeでキレイに並べよう

Transcript

1. 英語と日本語の文字を Composeでキレイに並べよう id:bps_tomoya / @tomoya_shibata 2025/03/14 DroidKaigi.collect { #17@Tokyo } 1
2. 自己紹介 • バトルプログラマー柴田智也 ◦ id:bps_tomoya ◦ @tomoya_shibata • 株式会社はてな • AndroidときどきiOS 2
3. 3 2つのTextが 横に並ぶ実装を触っていた ある日
4. 2つのTextを横に並べる • ちょっとしたラベル、バッジのような表示が欲しい • それぞれ背景（あるいは枠線など）を持っている • 短い文字列が2つ並ぶ、とてもありふれた要件 4
5. 実装はこんな感じ 5
6. これで問題ないのでは 🤔 6
7. 日本語に対して英語がちょっと浮いている 7
8. 8 それぞれの Textのベースラインを 揃えたい
9. Modifier.alignByBaseline() 9 • Rowの中で使える • 設定された要素同士のベースラインを揃える • Text以外にも色々使える
10. こんな感じ 10
11. うん？ 11
12. うん？ 12 ベースラインは揃った
13. うん？ 13 代わりにTextそのものがズレてしまった
14. 背景色を持っていたりするとうまくいかない 14 • 逆にいえば背景色など無ければこれで大丈夫 • ベースラインがあらかじめ揃えられた日本語・英語の フォントをアプリに入れる？ • それともText要素のサイズを計測して差分を埋める？ • 要件に対して解決方法がちょっと派手
15. 15 LineHeightStyle API
16. LineHeightStyle API • 行の中での配置や余白の取 り方を指定できる • Compose 1.2.0+ 16 https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/LineHeightStyle
17. LineHeightStyle.Alignment • 行の高さの中で文字をどう配置するか • Top ◦ 下にスペースを入れて上に詰める • Bottom ◦ 上にスペースを入れて下に詰める • Proportional（デフォルト） ◦ フォントが持っているメトリクスを 元にスペース配分する • Center ◦ 上下に同量のスペースを入れる 17 https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b
18. LineHeightStyle.Alignment 18 • 0~1または-1fの値を渡すこともできる • 使う機会は少ないかも
19. LineHeightStyle.Trim • 1行目と最終行に含まれるスペースを取 り除くかどうか • FirstLineTop ◦ 1行目の上部分をtrimする • LastLineBottom ◦ 最終行の下部分をtrimする • None ◦ なにもtrimしない • Both（デフォルト） ◦ FirstLineTop/Bottomの両方 19 https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b
20. LineHeightStyle.Mode 20 • 行の高さがシステム推奨値より小さいときどうするか • Fixed（デフォルト） ◦ 指定された値を優先 • Minimum ◦ システム推奨値を優先 • Compose 1.8.0-beta03+ ◦ 今回のテーマでは登場しませんが、ご紹介まで
21. いま解決したいのは 21 • 英語と日本語のベースラインを揃えたい • フォントメトリクスで配置されるといい ◦ Alignment.Proportional（デフォルト） • 上下の余白を取り除かれるのは困る ◦ Trim.None
22. 22 今回は Alignment.Proportional Trim.None の組み合わせがよさそう
23. こんな感じ 23
24. どうかな？ 24
25. よさそう！ 25
26. 行が複数になると分かりやすい Trim.Both（デフォルト） Trim.None 26
27. まとめ • ベースラインを揃えたいときは Modifier.alignByBaseline • 背景色があるなど場面によっては上手くいか ないパターンも • LineHeightStyle APIを使って調整しよう 27