如何在DrawerLayout的NavigationView中设置未读通知计数?

31

我使用Android Design Support LibraryDrawerLayout中创建了一个NavigationView

 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/drawer_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true">

     <!-- other views -->

     <android.support.design.widget.NavigationView
         android:id="@+id/navigation"
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_gravity="start"
         app:menu="@menu/my_navigation_items" />
 </android.support.v4.widget.DrawerLayout>

我的导航项.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/bookmarks_drawer"
            android:icon="@drawable/ic_drawer_bookmarks"
            android:title="@string/bookmarks" />
        <item
            android:id="@+id/alerts_drawer"
            android:icon="@drawable/ic_drawer_alerts"
            android:title="@string/alerts" />
        <item
            android:id="@+id/settings_drawer"
            android:icon="@drawable/ic_drawer_settings"
            android:title="@string/settings" />
    </group> 
</menu>
现在,我想为NavigationView的每个项目设置未读通知计数器,就像下面的图片一样:

unread notification counter

如何在NavigationView的项目上设置未读通知计数器?

1
通过阅读反编译的 NavigationView 代码(找不到原始代码...),似乎没有办法使用 NavigationView 实现这个功能。你需要自己实现。 - Zharf
这是您问题的最佳示例:http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/ - impathuri
1
@SatishPathuri,我在询问如何使用NavigationView来实现这个功能?在您提供的链接中没有使用NavigationView - Priyank Patel
这个回答解决了你的问题吗?NavigationView菜单项右侧带有计数器 - Prince
5个回答

68

更新的答案:

使用支持库23.1.1或更高版本的app:actionLayout将支持以下自定义布局。

创建您的自定义计数器布局,如下所示。

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
    android:id="@+id/navigation_drawer_item_1"
    android:icon="@drawable/ic_menu_1"
    android:title="@string/navigation_drawer_item_1"
    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

之前的答案(对于较旧的版本):

可以通过以下代码在 NavigationView 中使用 ListView 解决问题...

<android.support.design.widget.NavigationView
    android:id="@+id/my_courses_nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="150dp" > <!-- Give layout margin top according to "headerLayout" height -->

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            android:cacheColorHint="@android:color/transparent"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp" />

    </FrameLayout>
</android.support.design.widget.NavigationView>

在您的活动设置列表项中,如下所示...

    private final String[] mMenuTitles = { getResources().getString(R.string.bookmarks), getResources().getString(R.string.alerts), getResources().getString(R.string.settings)  };
    private final int[] mMenuIconId = { R.drawable.ic_drawer_bookmarks, R.drawable.ic_drawer_alerts, R.drawable.ic_drawer_settings };


    ListView mDrawerList = (ListView) findViewById(R.id.left_drawer);
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    private ArrayList<SlideMenuItem> drawerItemList = new ArrayList<SlideMenuItem>();           
    for( int i = 0; i < mMenuTitles.length; i++ ) {
        SlideMenuItem item = new SlideMenuItem();
        item.setTitle(mMenuTitles[i]);
        item.setIconID(mMenuIconId[i]);
        // item..setUnread(5) //set or update unread count & notify dataset changed to adapter
        drawerItemList.add(item);
    }

    MenuAdapter mMenuAdapter = new MenuAdapter( MyCoursesActivity.this, R.layout.drawer_list_item, drawerItemList);
    mDrawerList.setAdapter(mMenuAdapter);

导航抽屉中ListView的单击监听器...

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        try {
            mDrawerLayout.closeDrawers();
            SlideMenuItem item =  (SlideMenuItem) parent.getItemAtPosition(position);
            switch (item.getIconId()) {

                case R.drawable.ic_drawer_bookmarks: {

                }
                break;
                case R.drawable.ic_drawer_alerts: {

                }
                break;
                case R.drawable.ic_drawer_settings: {

                }
                break;                  
                default: {
                }
                break;
            }
        } catch (Exception e) {             
        }

    }
}

MenuAdapter..java

public class MenuAdapter extends ArrayAdapter<SlideMenuItem> {

private Activity activity;
private List<SlideMenuItem> itemList;
private SlideMenuItem item;
private int row;

public MenuAdapter(Activity act, int resource, List<SlideMenuItem> arrayList) {
    super(act, resource, arrayList);
    this.activity = act;
    this.row = resource;
    this.itemList = arrayList;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) {
    View view = convertView;
    ViewHolder holder;
    if (view == null) {
        LayoutInflater inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = inflater.inflate(row, null);

        holder = new ViewHolder();
        holder.tvTitle = (TextView) view.findViewById(R.id.menu_title);
        holder.imgView = (ImageView) view.findViewById(R.id.menu_icon);
        holder.tvUnread = (TextView) view.findViewById(R.id.unread_count);
        view.setTag(holder);
    } else {
        holder = (ViewHolder) view.getTag();
    }

    if ((itemList == null) || ((position + 1) > itemList.size()))
        return view;

    item = itemList.get(position);

    holder.tvTitle.setText(item.getTitle());
    holder.imgView.setImageResource(item.getIconId());
    if( item.getUnreadCount() > 0 ) {
        holder.tvUnread.setVisibility(View.VISIBLE);
        holder.tvUnread.setText(item.getUnread());
        if( MyCoursesActivity.DRAWER_MENU_ALERTS_POSITION == position ) {
            holder.tvUnread.setBackgroundResource(R.drawable.round_unread_count_bg_red);    
        }
        else {
            holder.tvUnread.setBackgroundResource(R.drawable.round_unread_count_bg_green);
        }
    }
    else {
        holder.tvUnread.setVisibility(View.GONE);
    }
    return view;
}

public class ViewHolder {

    public TextView tvTitle;
    public ImageView imgView;
    public TextView tvUnread;
}

}

抽屉列表项.xml

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

<RelativeLayout
android:id="@+id/drawar_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/menu_icon"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:gravity="center_vertical"
    android:src="@drawable/ic_drawer" />

<TextView
    android:id="@+id/menu_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toLeftOf="@+id/unread_count"
    android:layout_toRightOf="@+id/menu_icon"
    android:minHeight="?attr/listPreferredItemHeightSmall"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:text="About Us"
    android:gravity="center_vertical"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:textColor="@android:color/black" />

<TextView
    android:id="@+id/unread_count"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_alignParentRight="true"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:gravity="center" 
    android:text="99+"
    android:textColor="@android:color/white"
    android:textSize="10sp"
    android:visibility="gone" />

SlideMenuItem.java

public class SlideMenuItem {

private Bitmap icon;
private String title;
private String unread;
private int iconID;

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}

public Bitmap getIcon() {
    return icon;
}

public void setIcon(Bitmap icon) {
    this.icon = icon;
}

public int getIconId() {
    return iconID;
}

public void setIconID(int icon) {
    this.iconID = icon;
}

public String getUnread() {
    return unread;
}

public int getUnreadCount() {
    int count = Flinnt.INVALID;
    try {
        if( null != unread ) {
            count = Integer.parseInt(unread);
        }
    } catch (Exception e) {
    }
    return count;
}

public void setUnread(String unread) {
    this.unread = unread;
}

}

完美的答案,这应该被保护。 - Sauron
我需要更多的按钮来点赞。只有一个不够。回答太棒了! - burntblark
很好的答案(上面更新的部分)。只有一点需要注意,我不得不将TextView包装在RelativeLayout中,并在TextView上设置android:layout_centerInParent="true"才能在使用drawable背景时垂直居中。通过这种方法,我只需调用actionView?.findViewById(R.id.text_view)即可获取对TextView的引用。 - Daniel Nugent
运行完美,感谢解决方案!它为我节省了很多时间! - hetsgandhi
更新后的答案已从此处复制:https://dev59.com/d10a5IYBdhLWcg3wPGiQ - Prince

8
我在这个网站上找到了一个易于实现的解决方案:https://android.jlelse.eu/android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9,请按照以下步骤操作: 步骤1:创建一个Android Studio项目,选择“导航抽屉活动”而不是空活动。 步骤2:将“actionViewClass”属性添加到导航抽屉菜单中(即menu/youractivityname_drawer.xml)。
<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_camera"
        android:icon="@drawable/ic_menu_camera"
        android:title="Import" />
    <item
        android:id="@+id/nav_gallery"
        app:actionViewClass="android.widget.TextView"
        android:icon="@drawable/ic_menu_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/nav_slideshow"
        app:actionViewClass="android.widget.TextView"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="Slideshow" />
    <item
        android:id="@+id/nav_manage"
        android:icon="@drawable/ic_menu_manage"
        android:title="Tools" />
</group>

步骤 3: 声明导航抽屉菜单项并用徽章值初始化该菜单项。在您的主 Activity 中,声明导航抽屉菜单项如下所示:

//Create these objects above OnCreate()of your main activity
TextView slideshow,gallery;

//These lines should be added in the OnCreate() of your main activity
 NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
 navigationView.setNavigationItemSelectedListener(this);

gallery=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().
        findItem(R.id.nav_gallery));

slideshow=(TextView) MenuItemCompat.getActionView(navigationView.getMenu().
        findItem(R.id.nav_slideshow));

//This method will initialize the count value
initializeCountDrawer();

步骤5:在需要的地方初始化initializeCountDrawer()。它还可以用于更新导航抽屉菜单项中的计数或徽章值。

private void initializeCountDrawer(){

   //Gravity property aligns the text
   gallery.setGravity(Gravity.CENTER_VERTICAL);
   gallery.setTypeface(null, Typeface.BOLD);
   gallery.setTextColor(getResources().getColor(R.color.colorAccent));
   gallery.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");
}

来源: https://android.jlelse.eu/android-adding-badge-or-count-to-the-navigation-drawer-84c93af1f4d9

本文介绍如何在Android应用程序的导航抽屉中添加徽章或计数。这可以帮助用户快速了解未读消息或待处理任务的数量。要实现此功能,需要使用自定义布局和适当的Java代码来显示和更新徽章或计数。

6

NavigationView旨在提供一种简单的实现符合Material设计指南的基本导航抽屉的方式。

如果您想要更多功能的导航抽屉(例如带有文本导航项和可选标题的导航抽屉),则需要为导航抽屉创建自己的布局。


2
我建议您删除NavigationView,将导航抽屉元素作为片段添加,即在DarawerLayout文件中。
<android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout

<fragment
    android:id = "@+id/fragment_navigation_drawer"
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:layout_gravity = "start"
    android:layout= "@layout/fragment_navigation_drawer"
    android:name="com.your_package.NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

然后创建一个片段类,并创建一个资源文件用于该类,其中包含抽屉的元素,即:

public class NavigationDrawerFragment extends Fragment {
...

@Override
public View onCreateView(final LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
...

您可以将此片段添加到您的主活动中,即:
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    navigationDrawerFragment = (NavigationDrawerFragment)
            getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
    navigationDrawerFragment.setUp(R.id.fragment_navigation_drawer,mDrawerLayout, toolbar);

"set up"方法位于片段中,这就是你初始化它的地方。

public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {

    containerView = getActivity().findViewById(fragmentId);
    mDrawerLayout = drawerLayout;
    mActionBarDrawerToggle = new ActionBarDrawerToggle(
            getActivity(), mDrawerLayout, toolbar,
            R.string.navigation_drawer_open, R.string.navigation_drawer_close
    ) {
        @Override
        public void onDrawerOpened(View drawerView) {
            super.onDrawerOpened(drawerView);

            }
            getActivity().invalidateOptionsMenu();

        }

        @Override
        public void onDrawerClosed(View drawerView) {
            super.onDrawerClosed(drawerView);


        }

}

在抽屉的布局文件中,添加要设置未读通知的元素,然后添加一个相对布局,其方向设置为垂直,即:
<RelativeLayout
    android:layout_below="@+id/drawer_layout_unread_notif"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="fill_parent">

在这个垂直相对布局中,添加另一个元素的相对布局。这将是您添加“警报”部分的位置,就像您发布的图像中一样。这个相对布局应该是水平的,即:
<RelativeLayout
        android:layout_below="@+id/drawer_items_1"
        android:orientation="horizontal"
        android:background="@drawable/drawer_selector"
        android:clickable="true"
        android:layout_width="match_parent"
        android:id="@+id/drawer_items_2"
        android:layout_height="48dp">

        <ImageView
            android:src="@drawable/ic_notification"
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical"/>

        <TextView
            android:text="Notifications"
            android:textColor="@color/primary_text"
            android:layout_marginLeft="72dp"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical"
            android:padding="8dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:background="@color/red"
            android:layout_marginRight="10dp"
            android:id="@+id/drawer_notifications"
            android:layout_alignParentRight="true"
            android:padding="8dp"
            android:layout_centerVertical="true"
            android:textColor="@color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


    </RelativeLayout>

在刚才的代码中,最后一个textview元素将包含您要添加的未读通知计数器。在xml中,它的颜色设置为红色。从这里开始,在导航抽屉片段类中使用其ID(在oncreateview中)引用它并填充它。

希望这可以帮到您!


0

我相信这个支持是在设计库的第23版中添加的。

在您的菜单XML文件中,使用app XML前缀设置actionLayout

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.user.myapplication.MainActivity" >
    <item android:id="@+id/menu_one"
        android:checkable="true"
        android:title="Unread items"
        app:actionLayout="@layout/unread_items"
        />
</menu>

然后,让菜单包含的布局计算未读项目,可能使用自定义视图或片段来获取数据。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接