Buscar..


Introducción

La Vista de navegación inferior ha estado en las pautas de diseño del material durante algún tiempo, pero no ha sido fácil para nosotros implementarlo en nuestras aplicaciones.

Algunas aplicaciones han creado sus propias soluciones, mientras que otras se han basado en bibliotecas de código abierto de terceros para realizar el trabajo.

Ahora que la biblioteca de soporte de diseño está viendo la adición de esta barra de navegación inferior, ¡analicemos cómo podemos usarla!

Observaciones

Representa una barra de navegación inferior estándar para la aplicación. Es una implementación de material de diseño de navegación inferior.

Campo de golf:

Implementacion basica

Para agregar el BottomNavigationView siga estos pasos:

  1. Agregue en su build.gradle la dependencia :
compile 'com.android.support:design:25.1.0'
  1. Agregue el BottomNavigationView en su diseño :
<android.support.design.widget.BottomNavigationView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_menu"/>
  1. Crea el menú para rellenar la vista:
<!-- res/menu/bottom_navigation_menu.xml -->

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/my_action1"
        android:enabled="true"
        android:icon="@drawable/my_drawable"
        android:title="@string/text"
        app:showAsAction="ifRoom" />
    ....
</menu>
  1. Adjuntar un oyente para los eventos de clic:
//Get the view
BottomNavigationView bottomNavigationView = (BottomNavigationView)
                findViewById(R.id.bottom_navigation);
//Attach the listener
bottomNavigationView.setOnNavigationItemSelectedListener(
        new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {

                    case R.id.my_action1:
                        //Do something...
                        break;

                    //...
                }
                return true;//returning false disables the Navigation bar animations
            }
        });

Ver código de demostración en BottomNavigation-Demo

Personalización de BottomNavigationView

Nota: Supongo que usted sabe cómo utilizar BottomNavigationView .


En este ejemplo explicaré cómo agregar el selector para BottomNavigationView . Por lo que puede indicar en la interfaz de usuario para los iconos y textos.

Cree bottom_navigation_view_selector.xml como

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:color="@color/bottom_nv_menu_selected" android:state_checked="true" />
    <item android:color="@color/bottom_nv_menu_default" />
</selector>

Y use los atributos siguientes en BottomNavigationView en el archivo de diseño

app:itemIconTint="@drawable/bottom_navigation_view_selector" 
app:itemTextColor="@drawable/bottom_navigation_view_selector"

En el ejemplo anterior, he usado el mismo selector bottom_navigation_view_selector para app:itemIconTint y app:itemTextColor para mantener los colores de texto e íconos iguales. Pero si su diseño tiene un color diferente para el texto y el ícono, puede definir 2 selectores diferentes y usarlos.


La salida será similar a la de abajo

Opción 1

opcion 2

Manejo de estados habilitados / deshabilitados

Crear selector para habilitar / deshabilitar elemento de menú.

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_enabled="true" />
    <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
</selector>

design.xml

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

Permitiendo más de 3 menús.

Este ejemplo es estrictamente una solución alternativa, ya que actualmente no hay forma de deshabilitar un comportamiento conocido como ShiftMode.

Crear una función como tal.

public static void disableMenuShiftMode(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);
            //noinspection RestrictedApi
            item.setShiftingMode(false);
            // set once again checked value, so view will be updated
            //noinspection RestrictedApi
            item.setChecked(item.getItemData().isChecked());
        }
    } catch (NoSuchFieldException e) {
        Log.e("BNVHelper", "Unable to get shift mode field", e);
    } catch (IllegalAccessException e) {
        Log.e("BNVHelper", "Unable to change value of shift mode", e);
    }
}

Esto desactiva el comportamiento de desplazamiento del menú cuando el recuento de elementos supera los 3 números.

USO

BottomNavigationView navView = (BottomNavigationView) findViewById(R.id.bottom_navigation_bar);
disableMenuShiftMode(navView);

Problema de progreso : Agregue la siguiente línea de archivo de configuración de progreso, de lo contrario, esto no funcionaría.

-keepclassmembers class android.support.design.internal.BottomNavigationMenuView { 
boolean mShiftingMode; 
}

Alternativamente, puede crear una Clase y acceder a este método desde allí. Vea la respuesta original aquí

NOTA : Este es un HOTFIX basado en Reflection, actualícelo una vez que la biblioteca de asistencia de Google se actualice con una llamada de función directa.



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow