在 Android Kotlin 中创建自定义计数徽章

Question

嘿，我是自定义事物的新手，我想创建自定义徽章。它看起来像圆 个位数 如果超过 两位数 我需要曲线有点像矩形直到三位数。例如，我正在添加图像。它会是什么样子。

个位数图像

两位数图像

三位数图像

有谁知道这样怎么做吗？

添加了一些代码

<RelativeLayout
        android:id="@+id/badgeView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@drawable/count_badge_circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/time"
        tools:ignore="ContentDescription">

        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

    </RelativeLayout>

badge_rectangle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="30dp" />
    <solid android:color="@color/aqua" />
    <padding
        android:bottom="3dp"
        android:left="7dp"
        android:right="7dp"
        android:top="3dp" />
</shape>

badge_circle

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false">

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

    <solid android:color="@color/aqua" />

    <padding
        android:bottom="5dp"
        android:left="7dp"
        android:right="7dp"
        android:top="5dp" />
</shape>

代码来自 activity

if (count >= 10) {
    binding.badgeView.background =
        ContextCompat.getDrawable(binding.root.context, R.drawable.count_badge_rectangle)
} else {
    binding.badgeView.background =
        ContextCompat.getDrawable(binding.root.context, R.drawable.count_badge_circle)
}
binding.count.text = count.toString()

将代码更改为@Zain 推荐代码并将文本更改为 14sp 后看起来不太好

count_badge_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/aqua" />
    <stroke
        android:width="2dp"
        android:color="@color/white" />
    <corners
        android:bottomLeftRadius="120dp"
        android:bottomRightRadius="120dp"
        android:topLeftRadius="120dp"
        android:topRightRadius="120dp" />
</shape>

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EAFCF7"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="14sp"
        tools:text="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="14sp"
        tools:text="22" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="18sp"
        tools:text="223" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:background="@drawable/count_badge_circle"
        android:gravity="center"
        android:minWidth="40dp"
        android:padding="8dp"
        android:textColor="#fff"
        android:textSize="18sp"
        tools:text="2238" />

</LinearLayout>

输出

我要这个尺码你的尺码太大了

Answer 1

您需要在可绘制对象中进行的更改：

为外白圈添加一个罢工
当边相等时，用角将矩形变成圆形

应用这个：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#27D1C9" />
    <stroke
        android:width="2dp"
        android:color="#fff" />
    <corners
        android:bottomLeftRadius="120dp"
        android:bottomRightRadius="120dp"
        android:topLeftRadius="120dp"
        android:topRightRadius="120dp" />

</shape>

演示：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:background="#EAFCF7"
    android:gravity="center">

  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="2dp"
        android:text="2"
        android:textColor="#fff"
        android:textSize="14sp" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="2dp"
        android:text="22"
        android:textColor="#fff"
        android:textSize="14sp" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="3dp"
        android:text="223"
        android:textColor="#fff"
        android:textSize="14sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:background="@drawable/rounded_rect2"
        android:gravity="center"
        android:minWidth="24dp"
        android:padding="4dp"
        android:text="2238"
        android:textColor="#fff"
        android:textSize="14sp" />

</LinearLayout>

在 Android Kotlin 中创建自定义计数徽章

Create Custom Count badge in Android Kotlin

java

android

kotlin

android-layout

badge