更新时间:2023-11-28 18:04:16
使您的徽章成为 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!