右侧带有计数器的 NavigationView 菜单项

Question

新的 NavigationView 在新的 Design Support Library 中非常有用。

他们使用“菜单项”来显示选项。

但是如何在菜单项的右边显示一个计数器？

像这张图：

或在 GMail 应用程序中点赞。

Answer 1

查看 NavigationView 的源代码，它们目前不支持菜单项的任何自定义呈现（参见 NavigationMenuPresenter 和 NavigationMenuAdapter）。希望他们能尽快公开更多功能，因为我想在菜单项上设置自定义字体，但如果不使用反射就无法做到。

Answer 2

我的解决方法是传递一个具有不同背景的 SpannableString 作为 MenuItem 的新标题。

我知道这不是最好的解决方案，也不是 right-aligned 但它作为一个计数器工作得很好。像这样：

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

为了改进计数器，here你可以找到一个很好的答案来设置圆角

示例：

Answer 3

appcompat-v7 23版本开始NavigationView支持action views，自己实现counter很容易

创建柜台布局，即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" />

在抽屉菜单中引用它 xml，即 menu/drawer.xml:

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

注意应该使用app命名空间，不要尝试使用android.

或者，您可以使用 MenuItem.setActionView() 方法手动设置操作视图。

查找菜单项并设置计数器：

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

请注意，如果您必须支持 Android 2.x 版本，则需要使用 MenuItemCompat。

Answer 4

第 1 步：确定组项并添加“app:actionViewClass=android.widget.TextView”，如下所示：

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

第 2 步：声明 Navigation Drawer 菜单项并使用徽章值初始化该项目

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

第 3 步：可以在任何需要的地方调用 initializeCountDrawer()。它还可用于更新导航抽屉菜单项中的计数或徽章值。

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

Answer 5

我也想为计数器添加一个徽章图标。该徽章将呈药丸状，并能够使用不同的颜色来区分重要徽章和不重要徽章。

为此，我创建了自定义视图 Badge

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

徽章布局

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

徽章样式

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

徽章的可绘制对象

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

对于每个能够显示徽章的菜单项，您需要将 app:actionViewClass="com.example.ui.Badge" 添加到您的导航菜单。

徽章 class 使您能够以编程方式设置徽章的文本和重要性。

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

右侧带有计数器的 NavigationView 菜单项

NavigationView menu items with counter on the right

android

navigation-drawer

material-design

navigationview

androiddesignsupport