android - studio - Navegación Ver elementos del menú con contador a la derecha

navigation view menu

Question

El nuevo NavigationView en la nueva Biblioteca de soporte de diseño funciona realmente bien.

Usan " elementos de menú " para mostrar las opciones.

Pero, ¿cómo puedo mostrar un contador a la derecha del elemento del menú?

Como en esta foto:

O como en la aplicación GMail .

Answer 1

A partir de la versión 23 de appcompat-v7, NavigationView admite vistas de acción, por lo que es muy fácil implementar el contador usted mismo.

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

2. Referencia en el menú del cajón xml, es decir, menu/drawer.xml :

   <item
       ...
       app:actionLayout="@layout/menu_counter" />

Tenga en cuenta que debe usar el espacio de nombres de la app , no intente usar android .

Alternativamente, puede establecer manualmente la vista de acción con el método MenuItem.setActionView() .

3. Buscar elemento de menú y establecer 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 deberá usar MenuItemCompat si debe admitir las versiones de Android 2.x.

Answer 2

En cuanto a la fuente de NavigationView , actualmente no admiten ninguna representación personalizada de los elementos del menú (consulte NavigationMenuPresenter y NavigationMenuAdapter ). Espero que expongan más funcionalidades tan pronto como quiera establecer una fuente personalizada en los elementos del menú, pero no puedo hacerlo sin usar la reflexión.

Answer 3

Hay una gran biblioteca que puede hacer eso: https://github.com/mikepenz/MaterialDrawer .

Answer 4

Mi solución alternativa fue pasar una SpannableString con un fondo diferente como nuevo título del MenuItem.

Sabía que no es la mejor solución y no está alineada correctamente, pero funciona bastante bien como contador. 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, here puede encontrar una buena respuesta para redondear las esquinas.

Ejemplo:

Answer 5

Paso 1 : Identifique el elemento del grupo y agregue "aplicación: 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 elemento del menú del cajón de navegación e inicialice el elemento 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: se puede llamar a initializeCountDrawer () donde sea necesario. También se puede usar para actualizar el recuento o el valor de la insignia en el elemento del 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");
}