将新项目计数添加到按钮上的图标 - Android

Question

我是开发人员.我需要实现如下所示的设计.我已经有功能的应用程序,但想知道如何处理这个？特别是,我对如何在标签下显示"新"项数量感兴趣.我知道怎么做 - 用红点创建新图标,只在有新东西时显示它们.

但是我不知道如何让这些圆圈漂浮在标题之上并在里面显示数字.有人建议过什么吗？样品？路线？

关于分离活动的第二个问题 我应该控制组合这样的按钮,只是在活动上充气吗？否则我可能会创建选项卡式活动,但我不确定是否可以设置它以使其看起来像这样.

Answer 1

制作徽章TextView,允许您通过调用将数值设置为您喜欢的任何值setText().将背景设置TextView为XML <shape>drawable,使用该背景可以创建带边框的实心或渐变圆.XML drawable将缩放以适应视图,因为它使用更多或更少的文本进行调整.

RES /绘制/ badge_circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

但是,你必须看一下椭圆/圆形如何与大的3-4位数字进行对比.如果不希望出现这种影响,请尝试使用下面的圆角矩形方法.对于小数字,当半径汇聚在一起时,矩形仍然看起来像一个圆圈.

RES /绘制/ badge_circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners
    android:radius="10dip"/>
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

创建可缩放的背景后,您只需将其添加到a的背景中TextView,如下所示:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:text="10"
  android:textColor="#FFF"
  android:textSize="16sp"
  android:textStyle="bold"
  android:background="@drawable/badge_circle"/>

最后,这些TextView徽章可以放在您的布局中相应的按钮/标签上.我可能会通过将每个按钮及其徽章分组放在一个RelativeLayout容器中来完成此操作,如下所示:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <Button
    android:id="@+id/myButton"
    android:layout_width="65dip"
    android:layout_height="65dip"/>
  <TextView
    android:id="@+id/textOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/myButton"
    android:layout_alignRight="@id/myButton" 
    android:text="10"
    android:textColor="#FFF"
    android:textSize="16sp"
    android:textStyle="bold"
    android:background="@drawable/badge_circle"/>
</RelativeLayout>

希望这些信息足以让您指向正确的方向!

Answer 2

Android ViewBadger

一种简单的方法,可以在运行时"标记"任何给定的Android视图,而无需在布局中满足它.

.jar在libs文件夹中添加文件

点击下载示例

请参阅github上的示例

简单的例子:

View target = findViewById(R.id.target_view);
BadgeView badge = new BadgeView(this, target);
badge.setText("1");
badge.show();