添加新的项目数到button上的图标 – Android

我是开发者。 我需要实现如下所示的devise。 我已经有function的应用程序,但不知道如何甚至接近这一点? 特别是,我感兴趣的是如何显示标签下的“新”项目的数量。 我知道该怎么做 – 用红点创build新的图标,只在有新东西可用时显示。

但是我不知道如何让这些圆圈在标题和显示数字之上浮动。 有人有什么build议吗? 样品? 路线?

关于分离活动的第二个问题 我应该把控制结合到这样的button,并只是夸大其活动? 否则,我可能会创build选项卡式活动,但我不确定是否可以将其设置为使其看起来像这样。

顶部导航的部分

Related of "添加新的项目数到button上的图标 – Android"

使您的徽章成为TextView ,允许您通过调用setText()将数值设置为任何您喜欢的值。 将TextView的背景设置为XML <shape>可绘制的,使用它可以创build带有边框的实心或渐变圆。 一个XML可绘制的将缩放以适应视图,因为它resize或多或less的文本。

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> 

尽pipe如此,你将不得不看看椭圆形/圆形如何用3-4位数字进行缩放。 如果这种效果不理想,请尝试下面的圆angular矩形方法。 如果数目较小,则半径会聚在一起,矩形仍然看起来像一个圆圈。

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> 

在创build可缩放的背景之后,只需将其添加到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徽章可以放置在您的布局上适当的button/选项卡上。 我可能会这样做,通过在RelativeLayout容器中将每个button与其徽章进行分组,如下所示:

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

希望这是足够的信息,至less让你指出正确的方向!

不要使用椭圆形,你可以使用环形来绘制一个完美的实心圆。

请在这里看到我的答案。

在这里输入图像说明

Android ViewBadger

一个简单的方法来在运行时“标记”任何给定的Android视图,而不必在布局中迎合它。

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

点击下载示例

请参阅github上的示例

简单的例子:

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

最简单的黑客只给TextView风格。

  <TextView android:id="@+id/fabCounter" style="@style/Widget.Design.FloatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_centerVertical="true" android:layout_marginEnd="10dp" android:padding="5dp" android:text="10" android:textColor="@android:color/black" android:textSize="14sp" /> 

结果