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

Question

我是开发人员。我需要实现如下所示的设计。我已经有功能性应用程序，但想知道如何解决这个问题？特别是，我对如何在选项卡下显示"new"项目的数量感兴趣。我知道该怎么做 - 用红点创建新图标，并在有新东西可用时显示它们。

但我不知道如何让那些圆形漂浮在标题顶部并在里面显示数字。有人对寻找什么有建议吗？ sample ？路线？

关于分离 Activity 的第二个问题。我应该控制组合这样的按钮并在 Activity 中充气吗？否则我可能会创建选项卡式 Activity ，但我不确定是否可以对其进行样式设置以使其看起来像这样。

Answer 1

将您的徽章设为 TextView , 允许您通过调用 setText() 将数值设置为您喜欢的任何值.设置TextView的背景作为 XML <shape>可绘制，您可以使用它创建带边框的实心或渐变圆。 XML 可绘制对象将缩放以适应 View ，因为它使用或多或少的文本调整大小。

res/drawable/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/drawable/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>

创建可缩放背景后，您只需将其添加到 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>

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