LoginSignup
5
4

More than 3 years have passed since last update.

AndroidのTextViewでフォントサイズの変更について考えてみた

Last updated at Posted at 2020-02-24

はじめに

Androidアプリ開発をしていて、

  • デザイナーさんがデザインを起こしてくれる
  • デザインの数値通りにレイアウトを組む
  • 解像度、ディスプレイサイズの違いに対応する
  • フォントサイズ変更で崩れるところに対応する

までが一連の流れになってきたので、特に4点目に対応することを考えました..
そもそも、デザインが文字サイズの変更や解像度の違いを考慮してくれたら最高に有り難いですが、
基本iPhoneベースのデザインでAndroidを作ることが多いので、そんなことはなく...

4点目は「一旦置いて」、後で「対応しよう」になることが多いので先に対応方法をまとめておきたいと思いました。

試してみたこと

  • LinearLayout と ConstraintLayout の違いの比較
  • Layoutの高さを固定しないようにする
  • AutoSizingTextView

sampleアプリ

ソースはこちら

キャプチャ(フォント標準)

単純なレイアウトですが、この時点で崩れはありません。

キャプチャ(フォント最小)

小さくするだけなので、崩れはありません。

キャプチャ(フォント最大)

このあたりで差が生まれてきます。

  • LinearLayout が ConstraintLayoutよりも崩れが大きいように見える(合計のところ)のは、 合計のwidthが固定だから
  • 高さをwrap_contentにして、文字サイズ(20sp + margin)で高さを合わせるのが一番応用が効きそう (ただし、見た目のレイアウトの上下は変わる...スクロールないとダメかも)
  • TextViewAutoSizingは一番いい感じにしてくれそうだけど、全部同じspにはできないから、 どの道ダメなパターンは出てきそう(同じspにするとクラッシュする)。
<!-- Ng -->
                <TextView
                    android:id="@+id/amount3_cl_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical|end"
                    android:layout_marginEnd="10dp"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:text="¥3,000"
                    app:autoSizeMaxTextSize="30sp"
                    app:autoSizeMinTextSize="30sp"
                    app:autoSizeTextType="uniform"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"/>

<!-- Safe -->
                <TextView
                    android:id="@+id/amount3_cl_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical|end"
                    android:layout_marginEnd="10dp"
                    android:textSize="30sp"
                    android:textStyle="bold"
                    android:text="¥3,000"
                    app:autoSizeMaxTextSize="32sp"
                    app:autoSizeMinTextSize="20sp"
                    app:autoSizeTextType="uniform"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"/>

まとめ

レイアウトを崩さない対応するならdpにするのが一番楽ですが、
ユーザビリティの低下・ソースが警告で読みにくくなるのであまり採用したくない手法です。

TextViewAutoSizingをきちんと扱えれば一番良さそうですが、
情報が少なくて表示をコントロールするには一苦労しそうです。
そもそも、高さ・幅を固定にする前提のレイアウトや文字が詰まったレイアウトにしないのが一番いいかもしれません。
(キャプチャのうち、3つ目のパターン)

一旦、整理してみましたが、あまりいい方法を整理できませんでした..
ベストプラクティスがあれば共有して欲しいです...

追伸

後、アプリ起動中にフォントを変更すると、
アプリが一度キルされて、再度作成されるのでそれも予期せぬ不具合を生みます...

TextViewAutoSizing公式

5
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4