java - 在 TextView 的背景中，在 fragment 中的每个图像上绘制圆圈

Question

我是 Android 新手，我正在尝试向用户显示一些通知。
即:她/他为特定项目选择了多少件。

用例:

1. 我的 Fragment 中有六个 ImageView。
2. 用户可以滚动到这些 ImageView 中的任何一个。
3. 当用户点击任何 ImageView 时，我们需要显示她/他点击该 ImageView 的次数
4. 人们建议可以通过使用带有可绘制背景的 TextView 来解决这个问题。
   每个 ImageView 都附加有一个 TextView，当用户尚未单击时，该 TextView 是不可见的。

我试图在每个 ImageView 上放置一个 TextView - 像这样，我不确定这是否是最佳实践:

注意: TextView 中的 android:text 只是一个占位符，我们将使用 Java 代码动态设置文本。

这是我的 fragment xml:

<RelativeLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollLayout">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg1"
        android:src="@mipmap/zari"
        android:background="#00ffffff"
        android:padding="0dp" />
    <TextView
        android:id="@+id/textofferimg1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg1"
        android:layout_alignTop="@+id/offerimg1"
        android:layout_alignRight="@+id/offerimg1"
        android:layout_alignBottom="@+id/offerimg1"
        android:text="3"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:paddingTop="100dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:layout_alignParentStart="true" />


    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg2"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg1"
        android:background="#00ffffff"
        android:layout_alignParentEnd="false" />
    <TextView
        android:id="@+id/textofferimg2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg2"
        android:layout_alignTop="@+id/offerimg2"
        android:layout_alignRight="@+id/offerimg2"
        android:layout_alignBottom="@+id/offerimg2"
        android:text="20"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:paddingTop="100dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:layout_alignParentRight="false" />


    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg3"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg2"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg3"
        android:layout_alignTop="@+id/offerimg3"
        android:layout_alignRight="@+id/offerimg3"
        android:layout_alignBottom="@+id/offerimg3"
        android:text="32"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:minWidth="15dp"
        android:textSize="10dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg4"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg3"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg4"
        android:layout_alignTop="@+id/offerimg4"
        android:layout_alignRight="@+id/offerimg4"
        android:layout_alignBottom="@+id/offerimg4"
        android:layout_margin="1dp"
        android:text="36"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp"
        android:layout_alignParentStart="false" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg5"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg4"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg5"
        android:layout_alignTop="@+id/offerimg5"
        android:layout_alignRight="@+id/offerimg5"
        android:layout_alignBottom="@+id/offerimg5"
        android:layout_margin="1dp"
        android:text="37"
        android:textColor="#ffffff"
        android:gravity="right"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:textSize="10dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp"
        android:layout_alignParentEnd="false" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg6"
        android:src="@mipmap/zari"
        android:layout_below="@id/offerimg5"
        android:background="#00ffffff" />
    <TextView
        android:id="@+id/textofferimg6"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignLeft="@+id/offerimg6"
        android:layout_alignTop="@+id/offerimg6"
        android:layout_alignRight="@+id/offerimg6"
        android:layout_alignBottom="@+id/offerimg6"
        android:layout_margin="1dp"
        android:text="83"
        android:textColor="#ffffff"
        android:gravity="right"
        android:textSize="10dp"
        android:paddingRight="10dp"
        android:paddingBottom="20dp"
        android:minWidth="15dp"
        android:background="@drawable/bg_red"
        android:paddingTop="100dp" />
</RelativeLayout>

这是我的可绘制bd_red.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
        <shape>
            <corners android:radius="3dp"/>
            <solid android:color="#F00"/>
        </shape>
    </item>
</layer-list>

结果真的很尴尬，红色背景覆盖了我的整个图像。
我还将我的最终目标作为本文的附件附上。

Answer 1

由于它不是答案，我无法在评论中附加图像，因此我不得不将其发布在这里。我需要一些有关 margin_left 和 margin_top 的说明。

我能够实现我的目标，并且我接受了@der-gol-lum给出的答案。这是我的最终结果。

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg1"
        android:src="@mipmap/zari"
        android:background="#00ffffff"
        android:padding="0dp"
        android:layout_alignParentEnd="false" />
    <TextView
        android:id="@+id/offer1"
        android:background="@drawable/badge_price"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:gravity="center"
        android:text="£ 10"
        android:textStyle="bold"
        android:textColor="#88f"
        android:textSize="20sp"
        android:minWidth="15dp"
        android:layout_marginLeft="270dp"
        android:layout_marginTop="85dp"
        />
    <TextView
        android:id="@+id/textofferimg1_count"
        android:background="@drawable/bg_red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/offerimg1"
        android:layout_alignRight="@id/offerimg1"
        android:gravity="center"
        android:text="3"
        android:textStyle="bold"
        android:textColor="#fff"
        android:textSize="10sp"
        android:minWidth="15dp"
        android:layout_marginLeft="340dp"
        android:layout_marginTop="80dp"
        />

我需要将这些 TextView 保留在它们所附加的每个 ImageView 的右下角(附加图像)，使用layout_marginLeft和layout_marginRight以使它们保持右下对齐是否真的可行。我问这个只是因为应用程序可能会在不同的屏幕尺寸下使用，这可能会影响其在图像上的位置。这只是一个想法，请大家提出建议。

谢谢，沙申克

[编辑]

让我做一些优化。
我没有提供巨大的边距，而是只是调整了对齐方式。
以及各自的推荐。

<TextView
    android:id="@+id/offer1"
    android:background="@drawable/badge_price"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_alignBottom="@id/offerimg1"
    android:layout_alignRight="@id/offerimg1"
    android:layout_margins="8dp"
    android:gravity="center"
    android:text="£ 10"
    android:textStyle="bold"
    android:textColor="#88f"
    android:textSize="20sp"
    android:minWidth="15dp"
/>
<TextView
    android:id="@+id/textofferimg1_count"
    android:background="@drawable/bg_red"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/offer1"
    android:layout_alignRight="@id/offer1"
    android:gravity="center"
    android:text="3"
    android:textStyle="bold"
    android:textColor="#fff"
    android:textSize="10sp"
    android:minWidth="15dp"
/>

你友好的咕噜...