如何使 TextView 具有全圆形背景，无论文本长度如何

Question

我正在尝试制作一个通知计数指示器，其中

TextView

将显示存在的通知数量。 TextView 将放置在带有铃铛图标的

ImageView

之上。问题是，当我使用可绘制资源设置 TextView 的背景时，我会得到数字较小的数字的圆形形状，例如 1。但是当 TextView 中显示较大的数字时，它将不再具有圆形形状。我如何使 TextView 具有带有彩色背景的圆形形状，无论文本及其长度如何？

当它显示数字“1”时，它几乎是圆形的。

但是当我输入数字“99”时，它只有圆角边缘。它不是完全圆的。

这是我用于 TextView 的可绘制资源的代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#FF173C" />

    <size android:height="10dp" android:width="10dp"/>
    <corners
        android:bottomLeftRadius="2000dp"
        android:bottomRightRadius="2000dp"
        android:topLeftRadius="2000dp"
        android:topRightRadius="2000dp" />

    <padding android:right="5dp" android:left="5dp"/>

</shape>

然后我在 TextView 中使用它，如下所示：

  <TextView
     android:id="@+id/notification_count"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="1"
     android:background="@drawable/bg_notification"
     android:textColor="@android:color/white"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

Answer 1

您可以使用

TextView

 来包裹 

app:layout_constraintDimensionRatio = "1"

宽度的内容并限制高度，使其等于宽度

但是当文本很短（1个字符）时就会出现问题，因为现在宽度会变短；因此文本的一部分将被隐藏，您可以通过分别使用

app:layout_constraintWidth_min

和

app:layout_constraintHeight_min

限制最小宽度/高度来解决此问题。

<TextView
    android:id="@+id/notification_count"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:background="@drawable/bg_notification"
    android:gravity="center"
    android:padding="8dp"
    android:text="3"
    app:layout_constraintWidth_min="40dp"
    app:layout_constraintHeight_min="40dp"
    app:layout_constraintDimensionRatio="1"
    android:textColor="@android:color/white"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"  />

预览：

Answer 2

您可以向 TextView 本身添加填充，以便文本不会扭曲整体视图。

<TextView
            android:id="@+id/notification_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="181"
            android:background="@drawable/bg_notification"
            android:textColor="@android:color/white"
            android:padding="8dp" />

将形状 XML 更改为：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="32dp"
        android:height="32dp" />

    <solid android:color="#FF173C" />

</shape>

这应该可行！

Answer 3

徽章通常不超过 99 个，许多大型应用程序也这样做，因此请尝试手动调整它们的大小。

<TextView
 ...
 android:layout_width="35dp"
 android:layout_height="35dp"
 android:text="99"
 ...
  />