Elementos del menú de NavigationView con el contador a la derecha
El nuevo NavigationView en la nueva biblioteca de soporte de diseño funciona realmente bien.
Utilizan " elementos de menú " para mostrar las opciones.
- La suspensión de soporte de Android v23.1.0 se desplaza
- ¿Cómo desmarcar los elementos seleccionados en la vista de navegación?
- NavigationView onClick de xml provoca errores
- NavigationView cómo manejar contenido de encabezado dinámico
- NavigationView diapositiva desde la derecha
Pero ¿cómo puedo mostrar un contador a la derecha del elemento de menú?
Como en esta foto:
O como en la aplicación de GMail .
- Cómo inflar android NavigationView con otro menú dinámicamente durante onClick?
- Cómo poner el botón Cerrar sesión de Facebook al final de la vista de navegación
- ¿Cómo personalizar el fondo del elemento y el color del texto del elemento dentro de NavigationView?
- Cómo establecer el comportamiento de comprobación compartida en todos los grupos en NavigationView?
- Error de lanzamiento de NavigationView: No se encontró ningún identificador de recurso para el atributo 'menu' en el paquete
- ¿Agregar MenuItem a NavigationView con el icono y el título?
- DrawerLayout, NavigationView y android: Theme.Material.Light no es compatible?
- Cómo obtener divisores en el menú de NavigationView sin títulos?
A partir de la versión 23 de appcompat-v7 NavigationView
admite las vistas de acción, por lo que es muy fácil de implementar contra usted mismo.
-
Crear diseño de contador, es decir,
menu_counter.xml
:<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center_vertical" android:textAppearance="@style/TextAppearance.AppCompat.Body2" />
-
Referencia en el menú de su cajón xml, es decir,
menu/drawer.xml
:<item ... app:actionLayout="@layout/menu_counter" />
Tenga en cuenta que debe utilizar el espacio de nombres de la app
, no intente utilizar android
.
También puede establecer manualmente la vista de acción con el método MenuItem.setActionView()
.
-
Buscar elemento de menú y establecer el contador:
private void setMenuCounter(@IdRes int itemId, int count) { TextView view = (TextView) navigationView.getMenu().findItem(itemId).getActionView(); view.setText(count > 0 ? String.valueOf(count) : null); }
Tenga en cuenta que tendrá que utilizar MenuItemCompat si tiene que admitir versiones de Android 2.x.
Mi solución estaba pasando un SpannableString con un fondo diferente como nuevo título del MenuItem.
Sé que no es la mejor solución y no está bien alineado, pero funciona como un contador bastante bien. Algo como esto:
NavigationView navigation = (NavigationView)findViewById(R.id.navigation); Menu menuNav = navigation.getMenu(); MenuItem element = menuNav.findItem(R.id.item5); String before = element.getTitle().toString(); String counter = Integer.toString(5); String s = before + " "+counter+" "; SpannableString sColored = new SpannableString( s ); sColored.setSpan(new BackgroundColorSpan( Color.GRAY ), s.length()-(counter.length()+2), s.length(), 0); sColored.setSpan(new ForegroundColorSpan( Color.WHITE ), s.length()-(counter.length()+2), s.length(), 0); element.setTitle(sColored);
Para mejorar el contador, aquí puedes encontrar una buena respuesta para ajustar las esquinas redondeadas
Ejemplo:
En cuanto a la fuente de NavigationView
, actualmente no admiten ninguna representación personalizada de los elementos de menú (consulte NavigationMenuPresenter
y NavigationMenuAdapter
). Esperemos que expongan más funcionalidades pronto como quiero establecer una fuente personalizada en los elementos del menú, pero no puedo sin usar la reflexión.
Hay una gran biblioteca que puede hacer eso – https://github.com/mikepenz/MaterialDrawer .
Paso 1 : Identifique el elemento de grupo y agregue "app: actionViewClass = android.widget.TextView" como se indica a continuación:
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <group android:checkableBehavior="single"> <item android:id="@+id/nav_recorder" app:actionViewClass="android.widget.TextView" android:icon="@drawable/ic_menu_gallery" android:title="Gallery" /> <item android:id="@+id/nav_night_section" app:actionViewClass="android.widget.TextView" android:icon="@drawable/ic_menu_slideshow" android:title="Slideshow" /> </group>
Paso 2: Declare el ítem de menú del Cajón de Navegación e inicialice el ítem con el valor de la insignia
//Create these objects above OnCreate()of your main activity TextView recorder,nightSection; //These lines should be added in the OnCreate() of your main activity recorder =(TextView) MenuItemCompat.getActionView(navigationView.getMenu(). findItem(R.id.nav_recorder)); recordSection=(TextView) MenuItemCompat.getActionView(navigationView.getMenu(). findItem(R.id.nav_night_section)); //This method will initialize the count value initializeCountDrawer();
Paso 3: initializeCountDrawer () se puede llamar donde sea necesario. También se puede utilizar para actualizar el valor de recuento o insignia en el elemento de menú del cajón de navegación.
private void initializeCountDrawer(){ //Gravity property aligns the text recorder.setGravity(Gravity.CENTER_VERTICAL); recorder.setTypeface(null, Typeface.BOLD); recorder.setTextColor(getResources().getColor(R.color.colorAccent)); recorder.setText("99+"); slideshow.setGravity(Gravity.CENTER_VERTICAL); slideshow.setTypeface(null,Typeface.BOLD); slideshow.setTextColor(getResources().getColor(R.color.colorAccent)); //count is added slideshow.setText("7"); }
- ¿Cómo acceder a localhost desde un emulador Genymotion android?
- Android ¿Cuál es la diferencia entre Android Support Repository vs Android Support Library vs Repositorio de Google vs Google Play Services