4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

TextViewの自動サイズ調整について

Last updated at Posted at 2023-06-26

はじめに

先日プロダクト開発中に掲題の、TextViewで自動サイズ調整ができることを知って、ろくに公式ドキュメントも見ずに実装したら、思ったように動かなかったので備忘録として整理します

TextView自動サイズ調整使用経緯

以下のように3つの種別の可変長文字列が横に並ぶことで、Android端末内でケースによってはレイアウトが崩れてしまうため、TextView自動サイズ調整を用いて回避を試みました

デイリーアクティブユーザ数 ウィークリーアクティブユーザ数 マンスリーアクティブユーザ数
100,000 40,000 10,00,000

失敗例

実際のコードはこちら
自動サイズ調整したいTextViewそれぞれに以下のみを追加しました

app:autoSizeMaxTextSize="xxsp"
app:autoSizeMinTextSize="xxsp"
app:autoSizeTextType="uniform"

結果は以下の通り、左端と真ん中のテキストが被ってしまっています
screenshot-1687780362426.png

これはなぜおきてしまっているかというと、公式に以下のような注意があります(まさに予期しない結果でした)

注: XML ファイルで自動サイズ調整を設定する場合、TextView の layout_width 属性または layout_height 属性に値「wrap_content」を使用することはおすすめしません。そのようにすると、予期しない結果が発生する可能性があります。

成功例

上記失敗を回避するために、自動サイズ調整を指定したTextViewのwidth指定を、今回はConstraintlayoutなので0dpを指定すると以下のようになります
実際のコードはこちら

screenshot-1687780373948.png

おまけ1

上記成功例では真ん中のTextViewのみwidthに0dpを指定し、右端はwrap_contentのままとなっています。
では右端もwidthに0dpを指定するとどうなるかというと、以下のようになります。
検証した結果、文字数が多いTextViewが優先的に加工(文字サイズや折返し)されてそうなことがわかりました。

実際のコードはこちら

screenshot-1687780383671.png

おまけ2

せっかくなのでwidthだけでなくheightのケースも紹介します(失敗例は載せません)。
右端の文字数を減らし、 autoSizeMinTextSize を少し大きめの値に変更、さらにheightをwrap_contentから40dpに指定すると、ちゃんと自動でサイズ調整していそうな状態になりました。
注意点としては、widthの時と同様heightをwrap_contentのままにすると文字サイズは大きくなりますが下がみきれてしまいます。

実際のコードはこちら

screenshot-1687790672173.png

おまけ3

最後に、Constraintlayoutなので失敗ケースに対して悪あがきをしてみます。
layout_constrainedWidthを使うとどうなるかを検証しました
文字数を減らし、 autoSizeMinTextSize を少し大きめの値に変更、 layout_constrainedWidth="true" にしたところ、左右見切れは解消され文字サイズも大きくなりました。
ただし、文字数を減らしたとはいえちょっとたりないですね。
こちらは文字サイズを小さくすることで折返し表示されることを確認しましたが、やはりwrap_contentのままだと意図しない結果になってしまっているようです。

実際のコードはこちら

screenshot-1687790672173.png

リポジトリはこちら

まとめ

公式ドキュメントはちゃんと読みましょう。
その上で予期しない挙動については興味があれば自分で実装して、どうなるのか検証するのがいいなと痛感しました。

4
2
0

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
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?