Android
Vista inferior de la navegación
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:
- Agregue en su
build.gradle
la dependencia :
compile 'com.android.support:design:25.1.0'
- 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"/>
- 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>
- 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
paraapp:itemIconTint
yapp: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
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.