如何使 TextView 具有完整的圆形背景，无论它显示多长的文本

Posted 2023-03-17

【中文标题】如何使 TextView 具有完整的圆形背景，无论它显示多长的文本

【英文标题】：How to make a TextView have a fully round background, no matter what length text it displays

【发布时间】：2021-08-12 02:09:52

【问题描述】：

我正在尝试制作一个通知计数指示器，其中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: android:/>
    <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_
     android:layout_
     android:text="1"
     android:background="@drawable/bg_notification"
     android:textColor="@android:color/white"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent" />

【问题讨论】：

能否附上一些代码和截图？

好的，给我一分钟

【参考方案1】：

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

<TextView
            android:id="@+id/notification_count"
            android:layout_
            android:layout_
            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:
        android: />

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

</shape>

应该可以！

【讨论】：

您是否尝试过从形状中删除填充和大小？并且还为您的 TextView 使用更大的填充值？

是的，我试过了。如果它适用于一位数。它不适用于两位或三位数字。

我更新了我的答案，我在一个示例项目中尝试过它，它似乎工作得很好，直到 3 位数值，超过它看起来有点像椭圆而不是圆形。如果您的值不会那么高，则可以使用它们，否则，您应该可以从这一点进行一些调整。试一次！

您还可以动态增加垂直填充比水平填充高一点，以补偿较大的值（这将是水平宽度，这就是扭曲形状的原因）。

我尝试了更新的代码。它工作正常。谢谢

【参考方案2】：

您可以包装TextView 的宽度并限制高度，使其等于使用app:layout_constraintDimensionRatio = "1" 的宽度

但是当文本很短（1个字符）时会出现一个问题，因为现在的宽度会很短；因此部分文本将被隐藏，您可以通过分别使用 app:layout_constraintWidth_min 和 app:layout_constraintHeight_min 限制最小宽度/高度来解决此问题。

<TextView
    android:id="@+id/notification_count"
    android:layout_
    android:layout_
    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"  />

预览：

【讨论】：

额外的属性正是我所需要的。谢谢

【参考方案3】：

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

<TextView
 ...
 android:layout_
 android:layout_
 android:text="99"
 ...
  />