将新项目计数添加到按钮上的图标 - Android [英] Add new item count to icon on button - Android

问题描述

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

I'm developer. I need to implement design shown below. I already have functional app but wonder how to even approach this? Particulary, I'm interested in how to show Number of "New" items under tabs. What I KNOW how to do - is create new icons with red dots and just display them when new stuff available.

但我不知道如何使这些圆形漂浮在标题顶部并在里面显示数字.有人对寻找什么有什么建议吗?样品?路线?

But I have no idea how to make those round circles float on top of title AND show number inside. Does anybody have suggestion on what too look for? Samples? Directions?

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

Second question about separating activities. Should I make control to combine buttons like this and just inflate it on activities? Otherwise I may create tabbed activity but I'm not sure if it's possible to style it to make it look like this.

推荐答案

使您的徽章成为 TextView，允许您通过调用 setText()<将数值设置为您喜欢的任何值/代码>.将 TextView 的背景设置为 XML drawable，您可以使用它创建带边框的实心或渐变圆.XML drawable 会随着文本或多或少调整大小而缩放以适应视图.

Make your badge a TextView, allowing you to set the numeric value to anything you like by calling setText(). Set the background of the TextView as an XML <shape> drawable, with which you can create a solid or gradient circle with a border. An XML drawable will scale to fit the view as it resizes with more or less text.

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 位大数字.如果这种效果不受欢迎，请尝试如下所示的圆角矩形方法.对于小数字，当半径汇聚在一起时，矩形仍然看起来像一个圆.

You'll have to take a look at how the oval/circle scales with large 3-4 digit numbers, though. If this effect is undesirable, try a rounded rectangle approach like below. With small numbers, the rectangle will still look like a circle as the radii converge together.

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 的背景中，如下所示:

With the scalable background created, you simply add it to the background of a TextView, like so:

<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 容器中来做到这一点，如下所示:

Finally, these TextView badges can be placed in your layout on top of the appropriate buttons/tabs. I would probably do this by grouping each button with its badge in a RelativeLayout container, like so:

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

希望这些信息至少能让您指明正确的方向！

Hopefully that's enough information to at least get you pointed in the right direction!

这篇关于将新项目计数添加到按钮上的图标 - Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！