AHBottomNavigationを使ってNavigationItemにバッジを表示する
以前の記事でAndroid Support LibraryのBottomNavigationの使い方について説明したが、今回はAHBottomNavigationというライブラリについて記載します。
このライブラリはマテリアルデザインにのBottomNavigationガイドラインに沿ったもので、 ナビゲーションアイテムに簡単にバッジを表示できる機能や、ナビゲーションタップによるFragment遷移を簡単にできるAHBottomNavigationViewPagerを備えています。
また、ナビゲーションをタップした時の背景の切り替えや切り替え時のアニメーションなどもサポートしています。
それでは、通常のBottomNavigationViewを置き換えるところから説明します。
以前の記事は以下で確認ください。
BottomNavigationを使ってみる - techium
セットアップ
アプリレベルのbuild.gradleに依存関係を追加します。
dependencies {
...
implementation 'com.aurelhubert:ahbottomnavigation:2.1.0'
}
レイアウトにAHBottomNavigationViewを追加する
単純にBottonNavigationViewを置き換えてください。 ただし、AHBottomNavigationはXMLからmenuは設定できませんのでCode上から設定します。
<com.aurelhubert.ahbottomnavigation.AHBottomNavigation
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
ナビゲーションアイテムを設定する
Activity/Fragmentからmenuを設定します。
AHBottomNavigationAdapterのコンストラクタにmenuのリソースを渡して生成します。
AHBottomNavigationAdapter#setupWithBottomNavigationをコールすると準備完了です。
個人的にはAHBottomNavigationにAdapterを渡してセットアップする方がしっくりきますが、、、
private AHBottomNavigationAdapter mAdapter; ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTextMessage = findViewById(R.id.message); AHBottomNavigation navigation = findViewById(R.id.navigation); mAdapter = new AHBottomNavigationAdapter(this, R.menu.navigation); mAdapter.setupWithBottomNavigation(navigation); navigation.setOnTabSelectedListener(mOnTabSelectedListener); }
ナビゲーションのタップをハンドリングする
ナビゲーションがタップはOnTabSelectedListenerに通知されます。
onTabSelectedメソッドをオーバーライドして、タップされたpositionとすでに選択状態だったかのパラメータを受け取ります。
SupportLibraryのBottomNavigationViewでは、タップされたMenuItemを引数でもらえましたが、ここではポジションしか渡されないので、どのmenuIDがタップされたかはわかりません。
AHBottomNavigationAdapter#getMenuItemメソッドを使ってタップされたMenuItemを取得してIDを確認します。
AHBottomNavigationからはAdapterを取得できません、、、ぐぬぬ
private AHBottomNavigation.OnTabSelectedListener mOnTabSelectedListener = new AHBottomNavigation.OnTabSelectedListener() { @Override public boolean onTabSelected(int position, boolean wasSelected) { AHBottomNavigation navigation = findViewById(R.id.navigation); Log.v(TAG, "onTabSelected position " + position + " wasSelected " + wasSelected); MenuItem menuItem = mAdapter.getMenuItem(position); switch (menuItem.getItemId()) { case R.id.navigation_home: mTextMessage.setText(R.string.title_home); return true; case R.id.navigation_dashboard: mTextMessage.setText(R.string.title_dashboard); return true; case R.id.navigation_notifications: mTextMessage.setText(R.string.title_notifications); return true; } return true; } };
NavigationItemにバッジを表示する
バッジを表示するには表示する文言とNavigationItemのポジションが必要です。
IDがnavigation_notificationsのNavigationItemにバッジを表示したいのでAdapterからポジションを取得しています。
バッジを削除するときは、空文字を設定します。
AHBottomNavigation#setNotification~メソッドでバッジの背景や文字の色、アイコンとのマージンなど細かく設定できます。
private void showNotification(int count) { int position = mAdapter.getPositionByMenuId(R.id.navigation_notifications); AHBottomNavigation navigation = findViewById(R.id.navigation); navigation.setNotification(count == 0 ? "" : String.valueOf(count), position); }
以下のように表示されます。
スペースの関係で10以上の時は、9+などに置き換えるなどの処理が必要そうですね。
参考サイト
GitHub - aurelhubert/ahbottomnavigation: A library to reproduce the behavior of the Bottom Navigation guidelines from Material Design. Bottom navigation - Components - Material Design
