像Google一样的Actionbar通知计数图标(徽章)

Question

是否有Android标准徽章或方法来显示带有Google示例的计数的操作栏通知图标？

如果没有,那么最好的方法是什么呢？
我是android的新手,请帮忙.

Answer 1

我不确定这是否是最好的解决方案,但这是我需要的.

如果您知道需要更改哪些内容以获得更好的性能或质量,请告诉我.就我而言,我有一个按钮.

我的菜单上的自定义项 - main.xml

<item
    android:id="@+id/badge"
    android:actionLayout="@layout/feed_update_count"
    android:icon="@drawable/shape_notification"
    android:showAsAction="always">
</item>

自定义形状drawable(背景方块) - 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

编辑从支持库(或androidx)的版本26开始,您不再需要实现自定义OnLongClickListener来显示工具提示.简单地称之为:

TooltipCompat.setTooltipText(menu_hotlist, getString(R.string.hint_show_hot_message));

我会分享我的代码,以防有人想要这样的东西:

• 布局/菜单/ 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:可点击的属性.这些使布局成为按钮的大小,并在触摸时使背景变灰.

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

  一个64x64像素的图像,从各个方向都有10个像素宽的填充.你应该有8个像素宽的填充,但我发现大多数默认项目略小于此.当然,您需要针对不同的密度使用不同的尺寸.

• 绘制/ rounded_square.xml

  这里,#ff222222(颜色#222222,带alpha #ff(完全可见))是我的Action Bar的背景颜色.

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

  在这里,我们使它可点击和可更新!我创建了一个抽象侦听器,它在onLongClick上提供Toast创建,代码取自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>

您可能需要根据需要调整厚度.

编辑: 这是按钮的布局(名称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>

在菜单中创建项目:

<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基于解决方案,我的想法是:

1. 创建一个布局TextView,TextView将由应用程序填充

2. 当你需要画一个MenuItem:

   2.1.膨胀布局

   2.2.call measure()&layout()(否则view将是0px x 0px,对于大多数用例来说太小了)

   2.3.设置TextView文本

   2.4.制作视图的"屏幕截图"

   2.6.MenuItem根据2.4上创建的位图设置图标

3. 利润!

所以,结果应该是这样的

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

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

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

其余的代码是一样的.