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

问题描述 投票：139回答：9

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

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

android notifications icons android-actionbar actionbarsherlock
9个回答
222
投票

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

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

我的菜单上的自定义项 - 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();
}
127
投票

编辑从支持库（或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创建，代码取自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; } }
61
投票

只是补充一下。如果有人想要实现一个填充的圆形气泡，那就是代码（将其命名为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.+'
28
投票

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

  1. 使用TextView创建一个布局，TextView将由应用程序填充
  2. 当你需要画一个MenuItem： 2.1。膨胀布局 2.2。调用measure()和layout()（否则view将为0px x 0px，对于大多数用例来说它太小了） 2.3。设置TextView的文本 2.4。制作视图的“屏幕截图” 2.6。根据2.4上创建的位图设置MenuItem的图标
  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中预览布局的结果。

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

26
投票

好的，对于@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();
}

其余的代码是一样的。

3
投票

尝试查看这些问题的答案，特别是第二个有示例代码的问题：

How to implement dynamic values on menu item in Android

How to get text on an ActionBar Icon?

从我看到，你需要创建自己的自定义ActionView实现。另一种选择可能是定制的Drawable。请注意，Action Bar似乎没有本机实现通知计数。

编辑：您正在寻找的答案，代码：Custom Notification View与sample implementation

2
投票

使用工具栏时：

....
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());
}
1
投票

我发现了一个非常好的解决方案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:width="2dip"
    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_width="40dp"
                    android:layout_height="40dp"
                    android:layout_toRightOf="@+id/badge_layout1"
                    android:layout_gravity="end|center_vertical"
                    android:layout_marginEnd="5dp">

                <RelativeLayout
                        android:id="@+id/relative_layout1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                    <Button
                            android:id="@+id/btnBadge"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:background="@mipmap/ic_notification" />

                </RelativeLayout>

                <TextView
                        android:id="@+id/txtBadge"
                        android:layout_width="18dp"
                        android:layout_height="18dp"
                        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"
    }
0
投票

我发现了更好的方法。如果你想使用这样的东西

enter image description here

使用此依赖项

   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:width="30dp" android:height="40dp"/>
    </shape>
</item>
<item android:bottom="1dp" android:right="0.6dp">
    <shape android:shape="oval">
        <solid android:color="@color/Error_color"/>
        <size android:width="20dp" android:height="20dp"/>
    </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_width="28dp"
    android:layout_height="28dp"
    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)不会显示任何内容。

希望这有帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.