像 Google 一样的操作栏通知计数图标（徽章）
Posted
技术标签:
【中文标题】像 Google 一样的操作栏通知计数图标（徽章）【英文标题】：Actionbar notification count icon (badge) like Google has 【发布时间】：2013-07-15 19:28:06 【问题描述】：是否有 android 标准徽章或方法来显示操作栏通知图标，其计数类似于 Google 示例？
如果不是，那么最好的制作方法是什么？ 我是android新手，请帮忙。
【问题讨论】：
我已更新我的答案以链接到完整的通知图标实现。 【参考方案1】：我不确定这是否是最好的解决方案，但这是我需要的。
如果您知道为了更好的性能或质量需要更改哪些内容，请告诉我。就我而言，我有一个按钮。
我的菜单上的自定义项 - main.xml
<item
android:id="@+id/badge"
android:actionLayout="@layout/feed_update_count"
android:icon="@drawable/shape_notification"
android:showAsAction="always">
</item>
自定义形状可绘制（背景正方形） - shape_notification.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:color="#22000000" android:/>
<corners android:radius="5dp" />
<solid android:color="#CC0001"/>
</shape>
我的视图布局 - feed_update_count.xml
<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/notif_count"
android:layout_
android:layout_
android:minWidth="32dp"
android:minHeight="32dp"
android:background="@drawable/shape_notification"
android:text="0"
android:textSize="16sp"
android:textColor="@android:color/white"
android:gravity="center"
android:padding="2dp"
android:singleLine="true">
</Button>
MainActivity - 设置和更新我的视图
static Button notifCount;
static int mNotifCount = 0;
@Override
public boolean onCreateOptionsMenu(Menu menu)
MenuInflater inflater = getSupportMenuInflater();
inflater.inflate(R.menu.main, menu);
View count = menu.findItem(R.id.badge).getActionView();
notifCount = (Button) count.findViewById(R.id.notif_count);
notifCount.setText(String.valueOf(mNotifCount));
return super.onCreateOptionsMenu(menu);
private void setNotifCount(int count)
mNotifCount = count;
invalidateOptionsMenu();
【讨论】：
太棒了！但是如果你使用 AppCompat，你应该在代码中设置 ActionLayout：MenuItem item = menu.findItem(R.id.badge); MenuItemCompat.setActionView(item, R.layout.feed_update_count); notifCount = (Button) MenuItemCompat.getActionView(item);
supportInvalidateOptionsMenu() 如果您的目标是低于 11 的 API 级别，则需要使用而不是 invalidateOptionsMenu()
+1 帮了大忙！但是：您不需要菜单项 XML 中的 android:icon="..."。 android:actionLayout="..." 就足够了。对于布局 XML 中的Button，您可以使用自闭合标签<Button ... />，因为该标签不能有内容。您需要关闭 <shape> 标记（同样：自动关闭）。而且您不需要invalidateOptionsMenu()。对我来说，这甚至不起作用，因为徽章总是再次从 XML 膨胀。所以，整个setNotifCount(...) 是没用的。只需拨打徽章上的setText(...)。并且您可以将getActionView() 直接转换为Button。
另外，如果您使用 AppCompat，您应该更改徽章 xml 菜单
@Webster notifCount.setOnClickListener(...);都在里面【参考方案2】：
编辑 从支持库（或 androidx）的版本 26 开始，您不再需要实现自定义 OnLongClickListener 来显示工具提示。简单地称之为：
TooltipCompat.setTooltipText(menu_hotlist, getString(R.string.hint_show_hot_message));
我将分享我的代码，以防有人想要这样的东西：
layout/menu/menu_actionbar.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
...
<item android:id="@+id/menu_hotlist"
android:actionLayout="@layout/action_bar_notifitcation_icon"
android:showAsAction="always"
android:icon="@drawable/ic_bell"
android:title="@string/hotlist" />
...
</menu>
布局/action_bar_notifitcation_icon.xml
注意 style 和 android:clickable 属性。这些使布局成为按钮的大小，并在触摸时使背景变为灰色。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center"
android:clickable="true"
style="@android:style/Widget.ActionButton">
<ImageView
android:id="@+id/hotlist_bell"
android:src="@drawable/ic_bell"
android:layout_
android:layout_
android:gravity="center"
android:layout_margin="0dp"
android:contentDescription="bell"
/>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/hotlist_hot"
android:layout_
android:minWidth="17sp"
android:textSize="12sp"
android:textColor="#ffffffff"
android:layout_
android:gravity="center"
android:text="@null"
android:layout_alignTop="@id/hotlist_bell"
android:layout_alignRight="@id/hotlist_bell"
android:layout_marginRight="0dp"
android:layout_marginTop="3dp"
android:paddingBottom="1dp"
android:paddingRight="4dp"
android:paddingLeft="4dp"
android:background="@drawable/rounded_square"/>
</RelativeLayout>
drawable-xhdpi/ic_bell.png
一张 64x64 像素的图片，四边有 10 像素宽的填充。你应该有 8 像素宽的填充，但我发现大多数默认项目都比这略小。当然，您需要为不同的密度使用不同的尺寸。
drawable/rounded_square.xml
这里，#ff222222（颜色 #222222 带有 alpha #ff（完全可见））是我的操作栏的背景颜色。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="2dp" />
<solid android:color="#ffff0000" />
<stroke android:color="#ff222222" android:/>
</shape>
com/ubergeek42/WeechatAndroid/WeechatActivity.java
在这里，我们使它可点击和更新！我创建了一个在 onLongClick 上提供 Toast 创建的抽象监听器，代码取自 the sources of ActionBarSherlock。
private int hot_number = 0;
private TextView ui_hot = null;
@Override public boolean onCreateOptionsMenu(final Menu menu)
MenuInflater menuInflater = getSupportMenuInflater();
menuInflater.inflate(R.menu.menu_actionbar, menu);
final View menu_hotlist = menu.findItem(R.id.menu_hotlist).getActionView();
ui_hot = (TextView) menu_hotlist.findViewById(R.id.hotlist_hot);
updateHotCount(hot_number);
new MyMenuItemStuffListener(menu_hotlist, "Show hot message")
@Override
public void onClick(View v)
onHotlistSelected();
;
return super.onCreateOptionsMenu(menu);
// call the updating code on the main thread,
// so we can call this asynchronously
public void updateHotCount(final int new_hot_number)
hot_number = new_hot_number;
if (ui_hot == null) return;
runOnUiThread(new Runnable()
@Override
public void run()
if (new_hot_number == 0)
ui_hot.setVisibility(View.INVISIBLE);
else
ui_hot.setVisibility(View.VISIBLE);
ui_hot.setText(Integer.toString(new_hot_number));
);
static abstract class MyMenuItemStuffListener implements View.OnClickListener, View.OnLongClickListener
private String hint;
private View view;
MyMenuItemStuffListener(View view, String hint)
this.view = view;
this.hint = hint;
view.setOnClickListener(this);
view.setOnLongClickListener(this);
@Override abstract public void onClick(View v);
@Override public boolean onLongClick(View v)
final int[] screenPos = new int[2];
final Rect displayFrame = new Rect();
view.getLocationOnScreen(screenPos);
view.getWindowVisibleDisplayFrame(displayFrame);
final Context context = view.getContext();
final int width = view.getWidth();
final int height = view.getHeight();
final int midy = screenPos[1] + height / 2;
final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
Toast cheatSheet = Toast.makeText(context, hint, Toast.LENGTH_SHORT);
if (midy < displayFrame.height())
cheatSheet.setGravity(Gravity.TOP | Gravity.RIGHT,
screenWidth - screenPos[0] - width / 2, height);
else
cheatSheet.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, height);
cheatSheet.show();
return true;
【讨论】：
非常有用且具有描述性。谢谢！那是我真正需要的。只是添加一些可能有用的主题。如果您必须使用MenuItemCompat.getActionView 而不是menu.findItem(R.id.menu_hotlist).getActionView(); 来解决兼容性问题，则必须使用app:actionLayout="@layout/action_bar_notifitcation_icon" 而不是android:actionLayout="@layout/action_bar_notifitcation_icon"。 MenuItem.getActionView 与 API 级别
注意样式和 android:clickable 属性。这些使布局成为按钮的大小，并在触摸时使选定的背景着色。非常有用！
它就像一个魅力。 tnx兄弟。但在我的情况下，我使用默认工具栏，我应该使用 "app:actionLayout="@layout/action_bar_notifitcation_icon" 代替，否则我总是得到 null.tnx 再次
作为提示，Android 有一个可绘制的通知。因此，您可以将 TextView 的背景设置为 @android:drawable/ic_notification_overlay"，而不是创建自定义形状。
原生：android:actionLayout; AppCompat：app:actionLayout 在您的菜单项中。【参考方案3】：
只是添加。如果有人想实现一个实心圆形气泡，代码如下（命名为bage_circle.xml）：
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="9dp"
android:innerRadius="0dp"
>
<solid
android:color="#F00"
/>
<stroke
android:
android:color="#FFF" />
<padding
android:top="2dp"
android:bottom="2dp"/>
</shape>
您可能需要根据需要调整厚度。
编辑：
这是按钮的布局（命名为badge_layout.xml）：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_>
<com.joanzapata.iconify.widget.IconButton
android:layout_
android:layout_
android:textSize="24sp"
android:textColor="@color/white"
android:background="@drawable/action_bar_icon_bg"
android:id="@+id/badge_icon_button"/>
<TextView
android:id="@+id/badge_textView"
android:layout_
android:layout_
android:layout_alignTop="@id/badge_icon_button"
android:layout_alignRight="@id/badge_icon_button"
android:layout_alignEnd="@id/badge_icon_button"
android:text="10"
android:paddingEnd="8dp"
android:paddingRight="8dp"
android:paddingLeft="8dp"
android:gravity="center"
android:textColor="#FFF"
android:textSize="11sp"
android:background="@drawable/badge_circle"/>
</RelativeLayout>
在菜单中创建项目：
<item
android:id="@+id/menu_messages"
android:showAsAction="always"
android:actionLayout="@layout/badge_layout"/>
在onCreateOptionsMenu 中获取对菜单项的引用：
itemMessages = menu.findItem(R.id.menu_messages);
badgeLayout = (RelativeLayout) itemMessages.getActionView();
itemMessagesBadgeTextView = (TextView) badgeLayout.findViewById(R.id.badge_textView);
itemMessagesBadgeTextView.setVisibility(View.GONE); // initially hidden
iconButtonMessages = (IconButton) badgeLayout.findViewById(R.id.badge_icon_button);
iconButtonMessages.setText("fa-envelope");
iconButtonMessages.setTextColor(getResources().getColor(R.color.action_bar_icon_color_disabled));
iconButtonMessages.setOnClickListener(new View.OnClickListener()
@Override
public void onClick(View view)
if (HJSession.getSession().getSessionId() != null)
Intent intent = new Intent(getThis(), HJActivityMessagesContexts.class);
startActivityForResult(intent, HJRequestCodes.kHJRequestCodeActivityMessages.ordinal());
else
showLoginActivity();
);
收到消息通知后，设置计数：
itemMessagesBadgeTextView.setText("" + count);
itemMessagesBadgeTextView.setVisibility(View.VISIBLE);
iconButtonMessages.setTextColor(getResources().getColor(R.color.white));
此代码使用Iconify-fontawesome。
compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'
【讨论】：
能否提供上述操作栏的代码。看起来还不错。 您能详细说明一下吗？一些代码会很有用 @NiteshKhatri 很抱歉这么晚才提供代码。我以为这很容易。但是您的 cmets 获得了如此多的支持，这意味着其他开发人员也很难做到。 iconify 是一个很棒的库！ 很好，但是数字，文字出现在圆的中间（半径）的左侧。如何解决它【参考方案4】：我不喜欢基于ActionView 的解决方案，
我的想法是：
-
使用
TextView 创建一个布局，TextView 将由
应用
当你需要画一个MenuItem:
2.1。膨胀布局
2.2。调用measure() & layout()（否则view 将是0px x 0px，对于大多数用例来说太小了）
2.3。设置TextView的文字
2.4。制作视图的“屏幕截图”
2.6。根据2.4创建的位图设置MenuItem的图标
利润！
所以，结果应该类似于
-
创建布局
这是一个简单的例子
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/counterPanel" android:layout_ android:layout_ android:background="@drawable/ic_menu_gallery"> <RelativeLayout android:id="@+id/counterValuePanel" android:layout_ android:layout_ > <ImageView android:id="@+id/counterBackground" android:layout_ android:layout_ android:background="@drawable/unread_background" /> <TextView android:id="@+id/count" android:layout_ android:layout_ android:text="1" android:textSize="8sp" android:layout_centerInParent="true" android:textColor="#FFFFFF" /> </RelativeLayout> </FrameLayout>
@drawable/unread_background是那个绿色的TextView的背景，
@drawable/ic_menu_gallery 在这里并不是必须的，它只是在 IDE 中预览布局的结果。
将代码添加到onCreateOptionsMenu/onPrepareOptionsMenu
@Override
public boolean onCreateOptionsMenu(Menu menu)
getMenuInflater().inflate(R.menu.menu_main, menu);
MenuItem menuItem = menu.findItem(R.id.testAction);
menuItem.setIcon(buildCounterDrawable(count, R.drawable.ic_menu_gallery));
return true;
实现 build-the-icon 方法：
private Drawable buildCounterDrawable(int count, int backgroundImageId)
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.counter_menuitem_layout, null);
view.setBackgroundResource(backgroundImageId);
if (count == 0)
View counterTextPanel = view.findViewById(R.id.counterValuePanel);
counterTextPanel.setVisibility(View.GONE);
else
TextView textView = (TextView) view.findViewById(R.id.count);
textView.setText("" + count);
view.measure(
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.setDrawingCacheEnabled(true);
view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);
return new BitmapDrawable(getResources(), bitmap);
完整代码在这里：https://github.com/cvoronin/ActionBarMenuItemCounter
【讨论】：
camelCaseCoder，当你想改变counter image的位置到右上角时，你可以例如在counterValuePanel的布局属性中添加android:layout_gravity="top|right" 了解您为什么不喜欢基于 actionview 的解决方案会很有帮助。是复杂性还是性能？【参考方案5】：好的，@AndrewS 解决方案可以使用 v7 appCompat 库：
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:someNamespace="http://schemas.android.com/apk/res-auto" >
<item
android:id="@+id/saved_badge"
someNamespace:showAsAction="always"
android:icon="@drawable/shape_notification" />
</menu>
.
@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
super.onCreateOptionsMenu(menu, inflater);
menu.clear();
inflater.inflate(R.menu.main, menu);
MenuItem item = menu.findItem(R.id.saved_badge);
MenuItemCompat.setActionView(item, R.layout.feed_update_count);
View view = MenuItemCompat.getActionView(item);
notifCount = (Button)view.findViewById(R.id.notif_count);
notifCount.setText(String.valueOf(mNotifCount));
private void setNotifCount(int count)
mNotifCount = count;
supportInvalidateOptionsMenu();
其余代码相同。
【讨论】：
如果您在 xml 布局中使用 xmlns:app="schemas.android.com/apk/res-auto"，请使用 app:actionLayout="@layout/shoppingcar_icon" 而不是 android:actionLayout="@layout/shoppingcar_icon" @OscarCalderon，这是真的。在我获得 NPE 之前，在我将android:actionLayout 更改为 app:actionLayout 之后，它就像魅力一样。【参考方案6】：
尝试查看这些问题的答案，尤其是第二个有示例代码的问题：
How to implement dynamic values on menu item in Android
How to get text on an ActionBar Icon?
据我所知，您需要创建自己的自定义 ActionView 实现。另一种方法可能是自定义Drawable。请注意，操作栏的通知计数似乎没有本机实现。
编辑：您正在寻找的答案，代码：Custom Notification View 和 sample implementation
【讨论】：
tnx 回复，但我不明白如何显示数字，而不是第一个链接上的图标。你能帮忙吗？ 您阅读过其他链接吗？他们提供了一些选择。此外，您可以将文本放入Drawables 中，如以下两个链接所示：***.com/questions/6691818/… 和 ***.com/questions/3972445/…
我对你的答案越来越深入......我有这个代码 Drawable 创建自定义 XML 属性，然后为您的自定义 Drawable 上面有文本，因此您可以在 XML 中创建整个内容并根据需要进行调整。或者，如果这太难了，您可以在 Java 中添加 Drawable。【参考方案7】：
当你使用工具栏时：
....
private void InitToolbar()
toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
toolbartitle = (TextView) findViewById(R.id.titletool);
toolbar.inflateMenu(R.menu.show_post);
toolbar.setOnMenuItemClickListener(this);
Menu menu = toolbar.getMenu();
MenuItem menu_comments = menu.findItem(R.id.action_comments);
MenuItemCompat
.setActionView(menu_comments, R.layout.menu_commentscount);
View v = MenuItemCompat.getActionView(menu_comments);
v.setOnClickListener(new OnClickListener()
@Override
public void onClick(View arg0)
// Your Action
);
comment_count = (TextView) v.findViewById(R.id.count);
并在您的加载数据中调用 refreshMenu()：
private void refreshMenu()
comment_count.setVisibility(View.VISIBLE);
comment_count.setText("" + post_data.getComment_count());
【讨论】：
【参考方案8】：我找到了一个很好的解决方案here，我正在将它与 kotlin 一起使用。
首先，你必须在drawable文件夹中创建item_count.xml：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#f20000" />
<stroke
android:
android:color="#FFF" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
在你的Activity_Main 布局中有些像：
<RelativeLayout
android:id="@+id/badgeLayout"
android:layout_
android:layout_
android:layout_toRightOf="@+id/badge_layout1"
android:layout_gravity="end|center_vertical"
android:layout_marginEnd="5dp">
<RelativeLayout
android:id="@+id/relative_layout1"
android:layout_
android:layout_>
<Button
android:id="@+id/btnBadge"
android:layout_
android:layout_
android:background="@mipmap/ic_notification" />
</RelativeLayout>
<TextView
android:id="@+id/txtBadge"
android:layout_
android:layout_
android:layout_alignRight="@id/relative_layout1"
android:background="@drawable/item_count"
android:text="22"
android:textColor="#FFF"
android:textSize="7sp"
android:textStyle="bold"
android:gravity="center"/>
</RelativeLayout>
你可以修改如下：
btnBadge.setOnClickListener view ->
Snackbar.make(view,"badge click", Snackbar.LENGTH_LONG) .setAction("Action", null).show()
txtBadge.text = "0"
【讨论】：
【参考方案9】：我找到了更好的方法。 如果你想使用这样的东西
使用这个依赖
compile 'com.nex3z:notification-badge:0.1.0'
在drawable中创建一个xml文件并保存为Badge.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#66000000"/>
<size android: android:/>
</shape>
</item>
<item android:bottom="1dp" android:right="0.6dp">
<shape android:shape="oval">
<solid android:color="@color/Error_color"/>
<size android: android:/>
</shape>
</item>
</layer-list>
现在，无论您想在哪里使用该徽章，都可以在 xml 中使用以下代码。 借助此功能，您将能够在图像的右上角或其他任何地方看到该徽章。
<com.nex3z.notificationbadge.NotificationBadge
android:id="@+id/badge"
android:layout_toRightOf="@id/Your_ICON/IMAGE"
android:layout_alignTop="@id/Your_ICON/IMAGE"
android:layout_marginLeft="-16dp"
android:layout_marginTop="-8dp"
android:layout_
android:layout_
app:badgeBackground="@drawable/Badge"
app:maxTextLength="2"
></com.nex3z.notificationbadge.NotificationBadge>
现在终于在 yourFile.java 上使用这 2 个简单的东西.. 1) 定义
NotificationBadge mBadge;
2) 你的循环或任何计算这个数字的东西使用这个：
mBadge.setNumber(your_LoopCount);
这里，mBadge.setNumber(0) 不会显示任何内容。
希望对您有所帮助。
【讨论】：
以上是关于像 Google 一样的操作栏通知计数图标（徽章）的主要内容，如果未能解决你的问题，请参考以下文章
如何在 react-native 中更新 Tab Navigator 中徽章计数器的状态
重新安装应用后 Xamarin.iOS 应用图标上的徽章计数不正确