AndroidBottomNavigationViewの下部ナビゲーションバーの使用

AndroidBottomNavigationViewの下部ナビゲーションバーの使用

基本的な使い方

最初に依存関係をインポートします(ここでは、AndroidXを例として取り上げます)

implementation 'com.google.android.material:material:1.0.0'

レイアウトで使用

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="@color/white"
            app:itemBackground="@null"
            app:itemTextColor="@drawable/sl_tab_color"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/navigation_item" />

ここで、app:itemTextColor = "@ drawable / sl_tab_color"は、ボタンが選択されている場合と選択されていない場合のフォントの色の選択です。Navigation_item.xmlファイルは次のとおりです。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_main"
        android:icon="@drawable/sl_tab_main_main"
        android:title="@string/menu_main"/>

    <item
        android:id="@+id/menu_project"
        android:icon="@drawable/sl_tab_main_project"
        android:title="@string/menu_project"/>

    <item
        android:id="@+id/menu_wechat"
        android:icon="@drawable/sl_tab_main_wechat"
        android:title="@string/menu_wechat"/>

    <item
        android:id="@+id/menu_system"
        android:icon="@drawable/sl_tab_main_system"
        android:title="@string/menu_system"/>
</menu>

その中で、android:icon = "@ drawable / sl_tab_main_system"は、設定ボタンが選択されている場合と選択されていない場合のアイコンの選択です。
表示効果:
ここに写真の説明を挿入


注意:

BottomNavigationViewのソースコードには次のコードがあります

public int getMaxItemCount() {
        
        
        return 5;
}

そのため、メニューファイルに追加する項目の数が5を超えると、エラーが報告されます。

共通効果表示

1.クリックしたときに表示される水の波紋の背景効果を削除します
app:itemBackground="@null"
2.クリックしたときのアニメーション効果と変位を削除します
app:labelVisibilityMode="labeled"

属性値には、ラベル付き、ラベルなし、選択済み、自動
ラベルが付いています:アイコンとラベルはすべてのボタンに表示されます。
ラベルなし:すべてのボタンにラベルは表示されず、アイコンのみが表示されます。
選択済み:選択したボタンのみにラベルとアイコンが表示され、選択していない他のボタンにはアイコンのみが表示されます。
自動:自動モード。このモードでは、アイテムの数を使用して、ラベルを表示するか非表示にするかを決定します。ラベル付きモードは、ボタンの数が3以下の場合に使用され、選択されたモードは、ボタンの数が3を超える場合に使用されます。

この方法は、現在使用されているapiが28より大きい場合にのみ使用できます。apiが28未満の場合、次の方法を使用できます。

@SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView view) {
        
        
    BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
    try {
        
        
        Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
        shiftingMode.setAccessible(true);
        shiftingMode.setBoolean(menuView, false);
        shiftingMode.setAccessible(false);
        for (int i = 0; i < menuView.getChildCount(); i++) {
        
        
            BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
            item.setShiftingMode(false); 
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        
        
        Log.e( "TAG","Unable to get shift mode field");
    } catch (IllegalAccessException e) {
        
        
        Log.e( "TAG","Unable to change value of shift mode");
    }
}
3.クリックしたときのデフォルトのアイコンの色の変更を削除します
bottomNavigationView.itemIconTintList = null
4.テキストサイズを変更します

リソースファイルdimens.xmlに追加します

<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>
<dimen name="design_bottom_navigation_text_size" tools:override="true">12sp</dimen>

アクティビティでの使用

bottomNavigationView.setOnNavigationItemSelectedListener {
       
       
         when (it.itemId) {
       
       
                R.id.menu_main -> {
       
       
                         //todo
                }
                R.id.menu_project -> {
       
       
                        //todo
                }
                R.id.menu_system -> {
       
       
                           //todo
                }
                R.id.menu_wechat -> {
       
       
                          //todo
                }
            }
            true
        }

特定のボタンに関する情報を取得する必要がある場合は、次のコードを呼び出すことができます

ここに写真の説明を挿入


継続的に更新しています...
記事参照学習アドレス:https//www.jianshu.com/p/d5fb8ff21b4f

おすすめ

転載: blog.csdn.net/weixin_44325444/article/details/107185522