像Google一样的Actionbar通知计数图标（徽章）

是否有一个Android标准徽章或方法来显示操作栏通知图标与谷歌的例子计数？

如果没有，那么最好的办法是什么？
我是新来的机器人，请帮助。

Answer 1

我不确定这是否是最好的解决scheme，但这是我所需要的。

请告诉我，如果你知道什么是需要改变更好的性能或质量。 就我而言，我有一个button。

我的菜单上的自定义项目 – 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:width="2dp"/> <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_width="wrap_content" android:layout_height="wrap_content" 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(); } 

Answer 2

我只是分享我的代码，以防有人想要这样的事情：

• 布局/菜单/ 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

  注意风格和android：可点击的属性。 这些使得布局成为button的大小，并且在被触摸时使背景变灰。

   <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="fill_parent" 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_width="wrap_content" android:layout_height="wrap_content" 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_width="wrap_content" android:minWidth="17sp" android:textSize="12sp" android:textColor="#ffffffff" android:layout_height="wrap_content" 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> 

• 可绘制-xhdpi / ic_bell.png

  64×64像素的图像，从四面八方填充10个像素。 你应该有8个像素宽的填充，但我发现大多数默认项目比这稍微小一些。 当然，你会想要使用不同的密度不同的密度。

• 绘制/ rounded_square.xml

  在这里，＃ff222222（颜色＃222222与阿尔法#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:width="2dp"/> </shape> 

• COM / ubergeek42 / WeechatAndroid / WeechatActivity.java

  在这里，我们使它可以点击和更新！ 我创build了一个在onLongClick上提供Toast创build的抽象监听器，代码是从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; } } 

Answer 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:width="1dip" android:color="#FFF" /> <padding android:top="2dp" android:bottom="2dp"/> </shape> 

您可能需要根据您的需要调整厚度。

编辑：这里是button的布局（将其命名为badge_layout.xml ）：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <com.joanzapata.iconify.widget.IconButton android:layout_width="44dp" android:layout_height="44dp" 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_width="wrap_content" android:layout_height="wrap_content" 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> 

在菜单中创build项目：

 <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.+' 

Answer 4

我不喜欢基于ActionView的解决scheme，我的想法是：

1. 用TextView创build一个布局， TextView将被应用程序填充

2. 当你需要画一个MenuItem ：

   2.1。 充气布局

   2.2。 调用measure()和layout() （否则view将是0px x 0px，对于大多数用例而言太小）

   2.3。 设置TextView的文本

   2.4。 制作视图的“截图”

   2.6。 根据2.4创build的位图设置MenuItem的图标

3. 利润！

所以，结果应该是这样的

1. 这里创build布局就是一个简单的例子

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/counterPanel" android:layout_width="32dp" android:layout_height="32dp" android:background="@drawable/ic_menu_gallery"> <RelativeLayout android:id="@+id/counterValuePanel" android:layout_width="wrap_content" android:layout_height="wrap_content" > <ImageView android:id="@+id/counterBackground" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/unread_background" /> <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" /> </RelativeLayout> </FrameLayout> 

@drawable/unread_background是绿色TextView的背景， @drawable/ic_menu_gallery在这里并不是真正需要的，只是在IDE中预览布局的结果。

2. 将代码添加到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; } 

3. 实现构build图标方法：

    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

Answer 5

好的，对于@AndrewS解决scheme来使用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(); } 

其余的代码是一样的。

Answer 6

试着看看这些问题的答案，尤其是第二个有示例代码的问题：

如何在Android中的菜单项上实现dynamic值

如何获取ActionBar图标上的文本？

从我所看到的，您将需要创build自己的自定义ActionView实现。 替代可能是一个自定义Drawable 。 请注意，似乎没有本地执行操作栏的通知计数。

编辑：你正在寻找的答案，与代码： 自定义通知视图与示例实现

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

并在你的load数据中调用refreshMenu（）：

 private void refreshMenu() { comment_count.setVisibility(View.VISIBLE); comment_count.setText("" + post_data.getComment_count()); }