新增项目计数按钮图标 - 机器人机器人、项目、按钮图标

2023-09-12 02:35:56 作者:血色安徒生

我是开发商。我需要实现如下图所示的设计。我已经有功能的应用程序,但不知道如何平衡的办法呢?格外,我感兴趣的是如何显示的选项卡下的新建项目的数量。我知道该怎么做 - 是创造新的图标,红点,只是显示他们时,新的东西可

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 <形状> 绘制,使用它可以创建一个实体或渐变圆边框。一个XML绘制将扩展到适合的观点,因为它有更多或更少的文字调整大小。

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 /绘制/ 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 /绘制/ 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!