如何制作像 Gmail 中的首字母缩写图标？

Question

我想做的事：

我拥有的：

我想制作一个带有缩写的圆形图标。在我的场景中，首字母缩写可以包含一两个字母。就像你可以看到我的解决方案适用于两个字母，但不适用于一个字母。对于这两种情况我该如何解决？

XML 文件中有我的代码：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textSize="20dp"
    android:textAllCaps="true"
    android:textColor="@color/white"
    android:background="@drawable/shape_rounded_blue_button"
    android:layout_gravity="center_horizontal"
    android:gravity="center" 
    local:MvxBind="Text Initials"/>

还有 shape_rounded_blue_button：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/blue"/>
<corners android:radius="30dp" />
</shape>

Answer 1

因为我想实现同样的事情，所以我在 GitHub 上做了一些研究并找到了这个库： https: //github.com/amulyakhare/TextDrawable

它完全可以满足您的需求，并且具有自动着色等一些简洁的功能。您可以将它与 an 一起使用ImageView并创建一个可绘制对象，例如如下所示：

val drawable = TextDrawable.builder()
        .beginConfig()
        .width(bubbleSize)
        .height(bubbleSize)
        .endConfig()
        .buildRound("FH", MATERIAL.getColor("FH"))
theImageView.setImageDrawable(drawable)

看起来像这样：

您的文本将自动在气泡内居中，因此包含一两个字符没有问题。

Answer 2

您需要在res>drawabledrawable下创建一个资源文件并将其另存为：bg_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"> 
        <solid android:color="#424242"/> 
        <size android:width="120dp" android:height="120dp"/>
</shape> 

现在icon_container在您的layout.xml文件中将其设置为：

<RelativeLayout
    android:id="@+id/icon_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="@dimen/icon_width_height"
        android:layout_height="@dimen/icon_width_height"
        android:src="@drawable/bg_circle" /> 
    <TextView 
        android:id="@+id/icon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/white"
        android:textSize="@dimen/icon_text" />
</RelativeLayout>

有关完整的代码实现，请访问使用文本和随机颜色实现类似 Gmail 的图标