はじめに
先日プロダクト開発中に掲題の、TextViewで自動サイズ調整ができることを知って、ろくに公式ドキュメントも見ずに実装したら、思ったように動かなかったので備忘録として整理します
TextView自動サイズ調整使用経緯
以下のように3つの種別の可変長文字列が横に並ぶことで、Android端末内でケースによってはレイアウトが崩れてしまうため、TextView自動サイズ調整を用いて回避を試みました
デイリーアクティブユーザ数 | ウィークリーアクティブユーザ数 | マンスリーアクティブユーザ数 |
---|---|---|
100,000 | 40,000 | 10,00,000 |
失敗例
実際のコードはこちら
自動サイズ調整したいTextViewそれぞれに以下のみを追加しました
app:autoSizeMaxTextSize="xxsp"
app:autoSizeMinTextSize="xxsp"
app:autoSizeTextType="uniform"
結果は以下の通り、左端と真ん中のテキストが被ってしまっています
これはなぜおきてしまっているかというと、公式に以下のような注意があります(まさに予期しない結果でした)
注: XML ファイルで自動サイズ調整を設定する場合、TextView の layout_width 属性または layout_height 属性に値「wrap_content」を使用することはおすすめしません。そのようにすると、予期しない結果が発生する可能性があります。
成功例
上記失敗を回避するために、自動サイズ調整を指定したTextViewのwidth指定を、今回はConstraintlayoutなので0dpを指定すると以下のようになります
実際のコードはこちら
おまけ1
上記成功例では真ん中のTextViewのみwidthに0dpを指定し、右端はwrap_contentのままとなっています。
では右端もwidthに0dpを指定するとどうなるかというと、以下のようになります。
検証した結果、文字数が多いTextViewが優先的に加工(文字サイズや折返し)されてそうなことがわかりました。
実際のコードはこちら
おまけ2
せっかくなのでwidthだけでなくheightのケースも紹介します(失敗例は載せません)。
右端の文字数を減らし、 autoSizeMinTextSize
を少し大きめの値に変更、さらにheightをwrap_contentから40dpに指定すると、ちゃんと自動でサイズ調整していそうな状態になりました。
注意点としては、widthの時と同様heightをwrap_contentのままにすると文字サイズは大きくなりますが下がみきれてしまいます。
実際のコードはこちら
おまけ3
最後に、Constraintlayoutなので失敗ケースに対して悪あがきをしてみます。
layout_constrainedWidthを使うとどうなるかを検証しました
文字数を減らし、 autoSizeMinTextSize
を少し大きめの値に変更、 layout_constrainedWidth="true"
にしたところ、左右見切れは解消され文字サイズも大きくなりました。
ただし、文字数を減らしたとはいえちょっとたりないですね。
こちらは文字サイズを小さくすることで折返し表示されることを確認しましたが、やはりwrap_contentのままだと意図しない結果になってしまっているようです。
実際のコードはこちら
リポジトリはこちら
まとめ
公式ドキュメントはちゃんと読みましょう。
その上で予期しない挙動については興味があれば自分で実装して、どうなるのか検証するのがいいなと痛感しました。