序文

BottomNavigationViewは、Material Designが提供する標準的なボトムナビゲーションバーの実装であり、ナビゲーションバーメニュー間の切り替えやナビゲーションを容易にします。ボトムナビゲーションは、ユーザーがトップレベルのナビゲーション画面を見たり切り替えたりするのを容易にし、タブが3つから5つあるような状況に適しています。

I. BottomNavigationView 関連プロパティ

選択されているメニュー項目の ID を設定します。
このビューの基準高度を設定します。
メニュー項目の背景を指定された drawable オブジェクトに設定します。
メニュー項目の背景を指定されたリソースに設定します。
メニューアイコンのサイズを設定します。
メニューアイコンの色を設定します。
メニュー項目の背景を、指定された色の波紋に設定します。
メニュー項目のラベルに使用するテキストスタイルを設定します。
非アクティブなメニュー項目のラベルに使用するテキストスタイルを設定します。
メニュー項目のテキストの異なる状態に使用する色を設定します。
ナビゲーション項目のタブ表示モードを設定します。
統合された項目の幅が画面いっぱいになったときに、メニュー項目を選択時に水平方向にパンするかどうかを設定します。
現在選択されているボトムナビゲーション項目が再選択されたときに通知されるリスナーを設定します。
一番下のナビゲーションアイテムが選択されたときに通知されるリスナーを設定します。
getMenu() は、この下部ナビゲーション・バーに関連付けられた Menu のインスタンスを返します。
getMaxItemCount() は、Menu の最大数を返します。

BottomNavigationViewの基本的な使い方

1.依存性の導入

2、XMLレイアウトファイル

xmlレイアウトファイルに直接コントロールを導入します。

3、メニュー作成

4、3つ以上のタブテキストとアニメーション効果

以上の3ステップで、基本的にBottomNavigationViewの表示効果は確認できますが、メニューが3つ以上ある場合、テキスト表示に異常が発生し、アニメーション効果も変化することが判明しました。この問題を解決するために、APIの最新バージョンでは、すでに解決策を提供しています。

この記事はandroidxに基づいているので、古いバージョンとの互換性が必要な場合は、以下の方法を使用してください：

5、選択したメニューの色を設定

1、新しいselector_nav_text_item.xmlファイルの下にあるcolorフォルダー内

2、色のプロパティを設定します。

6.選択する項目を設定

7、選択されたリスナーを設定

BottomNavigationViewは、アイテムのidに基づいて選択されたアイテムを判断するリスナーを設定します。このリスナーは、ViewPagerとFragmentの切り替え、アイテムのスタイルの設定など、様々なことができます。

BottomNavigationView + ViewPager + フラグメント

1, ViewPagerスライド同期 BottomNavigationView

ViewPagerのスライドイベントをリッスンし、メソッドで現在のページ位置を返し、上記のメソッドで現在の選択範囲を設定します。

2、BottomNavigationViewスイッチ同期ViewPager

同様に、BottomNavigationViewが選択されるのを待ち、コールバックメソッドで、ItemIDに従ってViewPagerタブを更新します。

3.ツールバーのタイトルバーの設定

通常、APPの各インターフェイスのタイトルバーは異なっており、MainActivityのすべてのToolBarsを管理するために、我々はViewPagerリスナーのコールバックメソッドに従って動的にToolbarのタイトルバーを設定し、呼び出しコードはViewPager SlideSync BottomNavigationViewディレクトリにあります。このためのコードは既にViewPager SlideSync BottomNavigationViewディレクトリに掲載されています。

BadgeViewの紹介

1.定義

カスタマイズ可能な外観とドラッグ＆ドロップによる消去をサポートした MaterialDesign スタイルの Android BadgeView

2.特徴

バッジの位置、背景色、ボーダー、影、テキストの色、サイズ、内側と外側の余白など、ルック＆フィールをカスタマイズできます！
バッジ番号が0未満の場合はドットが表示され、0に等しい場合はバッジ全体が非表示になり、通常モードでは99以上の場合は99+が表示され、精密モードでは正確な値が表示されます。
テキスト内容の設定サポート
イメージ背景の設定をサポート
QQのようなドラッグ・アンド・ドロップ消去効果をサポートします。
バッジのアニメーション非表示に対応

V. BadgeView メソッドの説明

BottomNavigationView＋BadgeViewの使用詳細

1、依存パッケージの紹介

2、BottomNavigationMenuViewの取得

ソースコードを見ると、BottomNavigationMenuViewと子メニューの取得は非常に簡単であることがわかります。

3、BadgeViewの初期化

Badge は、実装クラス QBadgeView のオブジェクトを作成し、関連するプロパティを設定するインターフェイスです。

4、バッジビューの基本的な使い方

バッジビューの設定バインディングビュー、番号、位置

5、文字色の変更

6、精密モードの数を設定します。

メソッドをfalseに設定すると、メッセージ数>99のときに99+を表示し、trueに設定すると、メッセージ数>99のときに特定のメッセージ数を表示します。

7 の BadgeView の影の効果

このメソッドにtrueを設定するとシャドウ効果が、falseを設定するとシャドウ効果がキャンセルされます。

8, BadgeViewのドラッグ＆ドロップ効果

onDragStateChangedコールバック関数：

int STATE_START = 1;
int STATE_DRAGGING = 2;
int STATE_DRAGGING_OUT_OF_RANGE = 3;
int STATE_CANCELED = 4;
int STATE_SUCCEED = 5;

他の属性に興味があれば、ケースを書いて試してみてください。

VII.BadgeViewを使用する際の注意事項

xmlでバッジを作成しないでください。

ソースコードダウンロード ソースコードには、 Material Design シリーズのコントロールコレクションが含まれています！

概要

APPホームページフレームワークの実装が始まった当初は、Tablayout＋viewpager＋Fragmentの世界にどっぷり浸かっている方がほとんどだと思いますし、RadioGroupやRadioButtonの実装を使っている方もまだいらっしゃると思います。Googleが開発者向けにBottomNavigationViewコントロールを提供したことで、サードパーティのコントロールやプリミティブなパターンを使っている人も安心して移行することができます。

Android Material DesignシリーズのBottomNavigationView + ViewPager + BadgeView開発詳細

序文