The use of the bottom navigation bar of Android BottomNavigationView

The use of the bottom navigation bar of Android BottomNavigationView

Basic use

Import dependencies first (here, take AndroidX as an example)

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

Use in layout

<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" />

Where app:itemTextColor="@drawable/sl_tab_color" is the color selection of the font when the button is selected and not selected. The navigation_item.xml file is:

<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>

Among them, android:icon="@drawable/sl_tab_main_system" is the icon selection when the setting button is selected and not.
Display effect:
Insert picture description here


note:

There is the following piece of code in the source code of BottomNavigationView

public int getMaxItemCount() {
        
        
        return 5;
}

So when the number of items we add in the menu file is greater than 5, an error will be reported

Common effect display

1. Remove the water ripple background effect that appears when you click
app:itemBackground="@null"
2. Remove the animation effect and displacement when clicking
app:labelVisibilityMode="labeled"

The attribute values ​​are labeled, unlabeled, selected, and auto
labeled: icons and labels are displayed in all buttons.
unlabeled: No label is displayed in all buttons, only icons are displayed.
selected: Only the selected button displays the label and icon, and the other unselected only displays the icon.
auto: automatic mode, this mode uses the number of items to determine whether to show or hide the label. The labeled mode is used when the number of buttons is less than or equal to 3, and the selected mode is used when there are more than 3 buttons.

This method can only be used when the currently used api is greater than 28. When api is less than 28, the following method can be used:

@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. Remove the default icon color modification when clicked
bottomNavigationView.itemIconTintList = null
4. Modify the text size

Add in the resource file 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>

Use in Activity

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
        }

If you need to get information about a specific button, you can call the following code

Insert picture description here


Continuously updating...
Article reference learning address: https://www.jianshu.com/p/d5fb8ff21b4f

Guess you like

Origin blog.csdn.net/weixin_44325444/article/details/107185522