NavigationView Menüpunkte mit Zähler auf der rechten Seite

Das neue Navigationsansicht im Neuen Design-Support-Bibliothek funktioniert wirklich super.

Sie benutzen “Menüpunkte“, um die Optionen anzuzeigen.

Aber wie kann ich eine anzeigen Zähler zum Rechts des Menüpunktes?

Wie auf diesem Bild:

Oder wie im Google Mail App.

Ab Version 23 von appcompat-v7 NavigationView unterstützt Aktionsansichten, daher ist es ganz einfach, Zähler selbst zu implementieren.

1. Zählerlayout erstellen, dh 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. Verweisen Sie darauf in Ihrer Schubladenmenü-XML, dh menu/drawer.xml:

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

Beachten Sie, dass Sie verwenden sollten app Namespace, versuchen Sie nicht zu verwenden android.

Alternativ können Sie die Aktionsansicht mit manuell einstellen MenuItem.setActionView() Methode.

3. Menüpunkt finden und Zähler setzen:

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

Beachten Sie, dass Sie verwenden müssen MenuItemCompat wenn Sie Android 2.x-Versionen unterstützen müssen.

Mein Workaround bestand darin, einen SpannableString mit einem anderen Hintergrund als neuen Titel des MenuItems zu übergeben.

Ich weiß, ist nicht die beste Lösung und es ist nicht rechtsbündig, aber es funktioniert ganz gut als Zähler. Etwas wie das:

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

Um den Zähler zu verbessern, finden Sie hier eine gute Antwort, um die Ecken abgerundet zu setzen

Beispiel:

Betrachtet man die Quelle für NavigationView, sie unterstützen derzeit kein benutzerdefiniertes Rendering der Menüelemente (siehe NavigationMenuPresenter und NavigationMenuAdapter). Hoffentlich stellen sie bald mehr Funktionalitäten zur Verfügung, da ich eine benutzerdefinierte Schriftart für die Menüelemente festlegen möchte, dies jedoch ohne Reflexion nicht kann.

Ich wollte auch ein Abzeichen-Symbol für die Zähler haben. Dieses Abzeichen wäre pillenförmig und hätte die Fähigkeit, verschiedene Farben zu haben, um zwischen wichtigen Abzeichen und unwichtigen Abzeichen zu unterscheiden.

Um dies zu erreichen, habe ich ein benutzerdefiniertes Ansichtsabzeichen erstellt

class Badge @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0,
    defStyleRes: Int = 0
) : LinearLayout(context, attrs, defStyle, defStyleRes) {
    private val badgeText: TextView
    private var important: Boolean

    init {
        inflate(context, R.layout.badge, this)
        badgeText = findViewById(R.id.badge)
        important = false
        isImportant(important)
        adjustVisibility()
    }

    fun setText(text: String) {
        badgeText.text = text
        adjustVisibility()
    }

    fun isImportant(isImportant: Boolean) {
        if (isImportant) {
            badgeText.backgroundTintList = ColorStateList.valueOf(
                ContextCompat.getColor(
                    context,
                    R.color.nav_badge_important
                )
            )
        } else {
            badgeText.backgroundTintList = ColorStateList.valueOf(
                ContextCompat.getColor(
                    context,
                    R.color.nav_badge_unimportant
                )
            )
        }
    }

    private fun adjustVisibility() {
        if (badgeText.text.isNullOrBlank() && this.visibility == VISIBLE) {
            this.visibility = INVISIBLE
        } else {
            this.visibility = VISIBLE
        }
    }
}

Das Layout für das Abzeichen

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/badge"
        style="@style/BadgeStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Der Stil für das Abzeichen

<resources>
    <style name="BadgeStyle" parent="Widget.AppCompat.TextView">
        <item name="android:textSize">10sp</item>
        <item name="android:background">@drawable/badge_curved</item>
        <item name="android:textColor">@color/white</item>
    </style>
</resources>

Das Drawable für das Abzeichen

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="300dp" />
    <padding
        android:bottom="2dp"
        android:left="8dp"
        android:right="8dp"
        android:top="2dp" />
</shape>

Für jeden Menüpunkt mit der Möglichkeit, ein Abzeichen anzuzeigen, müssen Sie hinzufügen app:actionViewClass="com.example.ui.Badge" zu Ihrem Navigationsmenü.

Die Badge-Klasse gibt Ihnen die Möglichkeit, den Text und die Wichtigkeit des Badges programmgesteuert festzulegen.

private fun setupBadges(navView: NavigationView) {
    val badgesItemOne = navView.menu.findItem(R.id.nav_one).actionView as Badge
    val badgesItemTwo = navView.menu.findItem(R.id.nav_two).actionView as Badge
    val badgesItemThree = navView.menu.findItem(R.id.nav_three).actionView as Badge

    badgesItemOne.setText("6+")
    badgesItemOne.isImportant(true)
    badgesItemTwo.setText("2")
    badgesItemThree.setText("99+")
}

Schritt 1 : Identifizieren Sie das Gruppenelement und fügen Sie „app:actionViewClass=android.widget.TextView“ wie unten angegeben hinzu:

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

Schritt 2: Deklarieren Sie das Menüelement „Navigation Drawer“ und initialisieren Sie das Element mit dem Badge-Wert

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

Schritt 3: initializeCountDrawer() kann aufgerufen werden, wo immer es erforderlich ist. Es kann auch verwendet werden, um die Anzahl oder den Badge-Wert im Menüelement der Navigationsleiste zu aktualisieren.

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