Android

Android BottomNavigationViewにBadgeをつける

AndroidのMaterial ComponentのBottomNavigationViewにBadge機能が追加されて、標準でBadgeが使えるようになりました。
Badge機能は追加されてまだ日が浅いため現在も発展中であり、使い方が現在安定版のv1.1.0とalpha版のv1.2.0では若干異なります。
BottomNavigationViewにBadgeが追加された付近の2019年の6月くらいに書いた記事がありますが、このときと使い方が少し変わっているようなので、もう一度調べ直しました。

環境

Material Componentの1.2.0-alpha05です。
alphaバージョンなので、今後変わることも容易に想像されます。

使い方

まずは非常にシンプルにBadgeを表示させるコードの抜粋です。

NavigationViewのメニューからBadgeを表示させたいアイテムを取得して、getOrCreateBadgeでBadgeをつけることができます。
getOrCreateBadgeBadgeDrawableを返します。
Badgeが0の場合はBadgeを表示しなくないと思うのでBadgeDrawable#isVisibleで制御できます。
BottomNavigationViewにBadgeがなかった場合、自分無理やりBadgeを表示させていた時代にくらべるとかなり楽になりました。

カスタマイズ

標準でも十分実用できると思うのですが、カスタマイズすることもできます。

表示桁数の変更

BottomNavigationViewのBadgeの便利機能だと思うのですが表示する桁数を超える場合、以下のような表示にすることができます。

現在のところ初期値は4が設定されているので1000以上になると+表示になります。
プログラムで変更することもできるんですけど基本的に表示上の制御でスタイルでできるものはスタイルで行ったほうがよいと思うのでスタイルで制御します。

これで最大3桁表示になります。

背景色の変更

背景色(backgroundColor)もスタイルで定義できます。
初期値は?attr/colorErrorが指定されています。
これも当然ですがスタイルで変更することができます。

わかりやすいように黒にしてみました。

寄せの変更

Badgeとして使う場合右上に寄せるのが一般的かと思いますが、これも変更できます。

左上にしてみました。
以下から変更することができます。

・BOTTOM_END(右下)
・BOTTOM_START(左下)
・TOP_END(右上)
・TOP_START(左上)

もしかしてLTRだと変わったりするのでしょうか。

パディングの変更

キャプチャではわかりにくいのですが、例えばBadgeを右上に配置した場合パディングがないのでBadgeが切れているのではないかと思うくらい攻めた位置に表示されます。

自分の記憶が正しければ1.1.0-alpha09かalpha10で、このパディングの制御が変わったような記憶があります。
これは非常に残念ながら現在はスタイルから制御できないのではないかと思われます。

そのうち属性が追加されるのではないかと思っております・・・。
パディングがあるので少し安心感があります。

数ではなくドットを表示したい

通知件数などにつかう場合、数字を表示すると便利ですが、数字が必要ない場合もあると思います。
例えば、更新されたことを表す場合などです。
この場合はnumberを設定しなければよいです。
雑にいうとisVisibleをtrueにだけしておけばよいです。

まとめ

標準でBadge機能が追加されたことで本当に使いやすくなりました。
Badge自体はv1.1.0でも使用できるのではないかと思いますが、おそらくパディングの制御ができないため見栄えのカスタマイズが少し行いにくいと思われます。
v1.2.0もまだalphaなので今後どうなるかわかりませんが、現時点で参考になると幸いです。

-Android

© 2024 ビー鉄のブログ Powered by AFFINGER5