如何使 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 本身添加填充，这样文本就不会扭曲整体视图。

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

您可以使用app:layout_constraintDimensionRatio = "1"将TextView的宽度 wrap_content 并约束高度使其等于宽度

但是当文本很短（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 3

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

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