web-dev-qa-db-fra.com

Eléments de menu NavigationView avec compteur à droite

Le nouveau NavigationView dans le nouveau Design Support Library fonctionne vraiment bien.

Ils utilisent "menu-items" pour afficher les options.

Mais comment puis-je afficher un compteur à la droite de l'élément de menu?

comme sur cette image:

enter image description here

Ou comme dans l'application GMail.

androidnavigation-drawermaterial-designandroiddesignsupportnavigationview
63
chrisonline

À partir de la version 23 de appcompat-v7, NavigationView prend en charge les vues d'action. Il est donc très facile d'implémenter vous-même un compteur.

  1. Créer une disposition de compteur, c'est-à-dire 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. Référencez-le dans votre menu tiroir xml, c'est-à-dire menu/drawer.xml:

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

Notez que vous devez utiliser app espace de noms, n'essayez pas d'utiliser Android.

Sinon, vous pouvez définir manuellement la vue d'action avec la méthode MenuItem.setActionView().

  1. Rechercher un élément de menu et définir le compteur:

    private void setMenuCounter(@IdRes int itemId, int count) {
    TextView view = (TextView) navigationView.getMenu().findItem(itemId).getActionView();
    view.setText(count > 0 ? String.valueOf(count) : null);
}

Notez que vous devrez utiliser MenuItemCompat si vous devez prendre en charge les versions Android 2.x.

125
Alex Vasilkov

Ma solution de contournement consistait à passer un SpannableString avec un arrière-plan différent comme nouveau titre du MenuItem.

Je sais que ce n’est pas la meilleure solution et elle n’est pas alignée à droite, mais elle fonctionne assez bien comme un compteur. Quelque chose comme ça:

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

Pour améliorer le compteur, ici vous pouvez trouver une bonne réponse pour définir les angles arrondis

Exemple:

enter image description here

9
marco

En regardant la source pour NavigationView, ils ne prennent actuellement en charge aucun rendu personnalisé des éléments de menu (voir NavigationMenuPresenter et NavigationMenuAdapter). Espérons qu'ils exposent plus de fonctionnalités dès que je veux définir une police personnalisée sur les éléments de menu, mais je ne peux pas utiliser la réflexion.

5
Jin

Étape 1: Identifiez l'élément du groupe et ajoutez “app: actionViewClass = Android.widget.TextView” comme indiqué ci-dessous:

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

Étape 2: Déclarez l'élément de menu du tiroir de navigation et initialisez l'élément avec la valeur du badge

//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();

Étape 3: initializeCountDrawer () peut être appelé à tout moment. Il peut également être utilisé pour mettre à jour la valeur du nombre ou du badge dans l'élément de menu du tiroir de navigation.

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");
}
2
Dharma Sai Seerapu

Il existe une excellente bibliothèque qui peut le faire - https://github.com/mikepenz/MaterialDrawer .

1
Loša