Tweet
Tweet

Slide 1

Slide 1 text

英語と日本語の文字を Composeでキレイに並べよう id:bps_tomoya / @tomoya_shibata 2025/03/14 DroidKaigi.collect { #17@Tokyo } 1

Slide 2

Slide 2 text

自己紹介 ● バトルプログラマー柴田智也 ○ id:bps_tomoya ○ @tomoya_shibata ● 株式会社はてな ● AndroidときどきiOS 2

Slide 3

Slide 3 text

3 2つのTextが 横に並ぶ実装を触っていた ある日

Slide 4

Slide 4 text

2つのTextを横に並べる ● ちょっとしたラベル、バッジのような表示が欲しい ● それぞれ背景（あるいは枠線など）を持っている ● 短い文字列が2つ並ぶ、とてもありふれた要件 4

Slide 5

Slide 5 text

実装はこんな感じ 5

Slide 6

Slide 6 text

これで問題ないのでは 🤔 6

Slide 7

Slide 7 text

日本語に対して英語がちょっと浮いている 7

Slide 8

Slide 8 text

8 それぞれの Textのベースラインを 揃えたい

Slide 9

Slide 9 text

Modifier.alignByBaseline() 9 ● Rowの中で使える ● 設定された要素同士のベースラインを揃える ● Text以外にも色々使える

Slide 10

Slide 10 text

こんな感じ 10

Slide 11

Slide 11 text

うん？ 11

Slide 12

Slide 12 text

うん？ 12 ベースラインは揃った

Slide 13

Slide 13 text

うん？ 13 代わりにTextそのものがズレてしまった

Slide 14

Slide 14 text

背景色を持っていたりするとうまくいかない 14 ● 逆にいえば背景色など無ければこれで大丈夫 ● ベースラインがあらかじめ揃えられた日本語・英語の フォントをアプリに入れる？ ● それともText要素のサイズを計測して差分を埋める？ ● 要件に対して解決方法がちょっと派手

Slide 15

Slide 15 text

15 LineHeightStyle API

Slide 16

Slide 16 text

LineHeightStyle API ● 行の中での配置や余白の取 り方を指定できる ● Compose 1.2.0+ 16 https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/LineHeightStyle

Slide 17

Slide 17 text

LineHeightStyle.Alignment ● 行の高さの中で文字をどう配置するか ● Top ○ 下にスペースを入れて上に詰める ● Bottom ○ 上にスペースを入れて下に詰める ● Proportional（デフォルト） ○ フォントが持っているメトリクスを 元にスペース配分する ● Center ○ 上下に同量のスペースを入れる 17 https://medium.com/androiddevelopers/fixing-font-padding-in-compose-text-768cd232425b

Slide 18

Slide 18 text

LineHeightStyle.Alignment 18 ● 0~1または-1fの値を渡すこともできる ● 使う機会は少ないかも

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

LineHeightStyle.Mode 20 ● 行の高さがシステム推奨値より小さいときどうするか ● Fixed（デフォルト） ○ 指定された値を優先 ● Minimum ○ システム推奨値を優先 ● Compose 1.8.0-beta03+ ○ 今回のテーマでは登場しませんが、ご紹介まで

Slide 21

Slide 21 text

いま解決したいのは 21 ● 英語と日本語のベースラインを揃えたい ● フォントメトリクスで配置されるといい ○ Alignment.Proportional（デフォルト） ● 上下の余白を取り除かれるのは困る ○ Trim.None

Slide 22

Slide 22 text

22 今回は Alignment.Proportional Trim.None の組み合わせがよさそう

Slide 23

Slide 23 text

こんな感じ 23

Slide 24

Slide 24 text

どうかな？ 24

Slide 25

Slide 25 text

よさそう！ 25

Slide 26

Slide 26 text

行が複数になると分かりやすい Trim.Both（デフォルト） Trim.None 26

Slide 27

Slide 27 text

まとめ ● ベースラインを揃えたいときは Modifier.alignByBaseline ● 背景色があるなど場面によっては上手くいか ないパターンも ● LineHeightStyle APIを使って調整しよう 27