如何在工具栏MenuItem图标上添加徽章

Art*_*tem 15 android badge android-toolbar

我试图找到自己的答案,但找不到它.

我需要在工具栏的MenuItem图标上制作徽章,如下所示:

在此输入图像描述

我该怎么做?

Far*_*med 24

这是一步一步的功能:

添加menu.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto">

         <item
              android:id="@+id/actionNotifications"
              android:icon="@drawable/ic_info_outline_white_24dp"
              android:menuCategory="secondary"
              android:orderInCategory="1"
              android:title="Cart"
              app:actionLayout="@layout/notification_layout"
              app:showAsAction="always" />
    </menu>
Run Code Online (Sandbox Code Playgroud)

然后添加notification_layout.xml,此布局将用作通知图标布局

     <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        style="@android:style/Widget.ActionButton"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

     <ImageView
         android:id="@+id/hotlist_bell"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_margin="0dp"
         android:contentDescription="Notification Icon"
         android:gravity="center"
         android:src="@drawable/ic_info_outline_white_24dp" />

     <TextView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/txtCount"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="@dimen/x5dp"
         android:layout_marginLeft="@dimen/x10dp"
         android:layout_marginRight="0dp"
         android:background="@drawable/pointer_"
         android:gravity="center"
         android:minWidth="17sp"
         android:text="0"
         android:textColor="#ffffffff"
         android:textSize="12sp" />
    </RelativeLayout>
Run Code Online (Sandbox Code Playgroud)

现在在Activity里面

 @Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.menu, menu);

    final View notificaitons = menu.findItem(R.id.actionNotifications).getActionView();

    txtViewCount = (TextView) notificaitons.findViewById(R.id.txtCount);
    updateHotCount(count++);
    txtViewCount.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            updateHotCount(count++);
        }
    });
    notificaitons.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
    //    TODO
        }
    });


    return true;
}
Run Code Online (Sandbox Code Playgroud)

您可以在活动内部将以下函数(取自stackoverflow)更新为计数器:

    public void updateHotCount(final int new_hot_number) {
    count = new_hot_number;
    if (count < 0) return;
    runOnUiThread(new Runnable() {
        @Override
        public void run() {
            if (count == 0)
                txtViewCount.setVisibility(View.GONE);
            else {
                txtViewCount.setVisibility(View.VISIBLE);
                txtViewCount.setText(Integer.toString(count));
                // supportInvalidateOptionsMenu();
            }
        }
    });
}      
Run Code Online (Sandbox Code Playgroud)

  • 那么,如何将菜单项对齐到工具栏的左侧?(如上图) (2认同)

ʍѳђ*_*ઽ૯ท 3

我认为有可能:

<ImageView
        android:id="@+id/counterBackground"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/unread_background" /> <!-- your icon -->

    <TextView
        android:id="@+id/count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        android:textSize="8sp"
        android:layout_centerInParent="true"
        android:textColor="#FFFFFF" />
Run Code Online (Sandbox Code Playgroud)

然后将该图标用作 .also background,您还需要删除/禁用默认图标。

您可能想看一下:

从导航抽屉操作栏中删除应用程序图标不起作用

删除导航抽屉图标并使用应用程序图标打开

/sf/answers/2041263311/

另外,在 中 android-sdk/platforms/android-22/data/res,应该有该图标。您只需要找到它并将其用于您的目的(例如,添加它ImageView并将其添加为background

看一下: /sf/answers/2449978401/