在文本视图的背景中，在片段中的每个图像上绘制圆圈答案

【问题标题】：Draw Circle in the background of Text View, over each image in Fragment在文本视图的背景中，在片段中的每个图像上绘制圆圈
【发布时间】：2015-07-09 07:39:11
【问题描述】：

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

用例：

我在一个 Fragment 中有六个 ImageView。
用户可以滚动到这些 ImageView 中的任何一个。
当用户点击任何 ImageView 时，我们需要显示他/她点击该 ImageView 的次数
人们建议使用带有可绘制背景的 TextView 来解决此问题。
每个 ImageView 都附加了一个 TextView，当用户还没有点击它时，它是不可见的。

我正在尝试在每个 ImageView 上放置一个 TextView - 类似这样，我不确定这是否是最佳做法：

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

这是我的片段 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>

这是我的drawable 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>

这样的结果真的很尴尬，红色的背景已经覆盖了我的整个图像。
我还将我的最终目标作为附件附加到这篇文章中。

【问题讨论】：

我试图关注这个stackoverflow.com/questions/21178193/… 但它没有帮助.. 可能我错过了一些非常重要的东西。

标签： java android xml android-layout android-fragments

【解决方案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"
        />

我需要将这些文本视图保留在它们所附加的每个 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"
/>

你友好的 Gol...lum

【讨论】：

【解决方案2】：

我不会关注如何使徽章可见性隐藏或显示，因为这确实是一项微不足道的任务。

让我们谈谈设计。

为了实现您的目标，我对您的设计进行了几个修复（实际上是几个）。

这是布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollLayout"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/offerimg1"
        android:src="@drawable/ic_launcher"
        android:background="#0fff"
    />
    <TextView
        android:id="@+id/textofferimg1"
        android:background="@drawable/badge"
        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"
    />

    <!-- Do the same for all the others -->

</RelativeLayout>

这是你的形状 (/res/drawable/badge.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
        <solid android:color="#f00"/>
</shape>

这是你想要的结果：

我使用了默认的启动器图标，因为我没有您的图片。
另请注意，mipmap 文件夹只能用于启动器图标，不能用于应用程序图形。

不过，我的建议是您使用另一个 TextView 来显示价格，而不是 ImageView。
因此，您可以轻松更新价格。

这是布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scrollLayout"
    android:background="#000"
    >
    <TextView
        android:id="@+id/offerimg1"
        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"
    />
    <TextView
        android:id="@+id/textofferimg1_count"
        android:background="@drawable/badge"
        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"
    />

    <!-- All the others -->

</RelativeLayout>

这是附加形状 (/res/drawable/badge_price.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
        <solid android:color="#fff"/>
</shape>

只有形状的颜色会改变

这是结果（为了更好看，我做了黑色背景）

【讨论】：

在您的帮助下，我能够实现我的目标，非常感谢，您花时间以最全面的方式回复。
我需要将这些文本视图保留在它们所附加的每个 Imageview 的右下角。使用 layout_marginLeft 和 layout_marginRight 来保持它们正确对齐是否真的可行。我问这个只是因为，应用程序可能用于不同的屏幕尺寸，这会影响其在图像上的位置。这只是一个想法，请提出您的建议。
将它们对齐到底部和右侧...根据您显示的图像，我将徽章对齐到右上角。无需将alignTop 更改为alignBottom。

【解决方案3】：

在 ImageView 上使用 setOnClickListener 并在 Textview 上显示点击次数。

image_view.setOnClickListener(new OnClickListener() {

 @Override
 public void onClick(View v) {
      count++;
     TextView.setText(String.valueOf(count));
 }});

【讨论】：

【解决方案4】：

为了使用圈子，你可以关注这个

android:shape="oval"

在形状标签内

【讨论】：

【解决方案5】：

你的第一个 ImageView 填满你的父母，

<ImageView
    android:layout_width="fill_parent"

虽然你的第二个只是包装它的内容，我想这就是你想要的？所以将它应用到所有的 ImageViews。

<ImageView
    android:layout_width="wrap_content"

您还应该知道，如果您将一个 View 放在另一个 View 之上并覆盖它，就像您在此处使用 TextView 所做的那样，

 android:layout_alignLeft="@+id/offerimg1"
 android:layout_alignTop="@+id/offerimg1"
 android:layout_alignRight="@+id/offerimg1"
 android:layout_alignBottom="@+id/offerimg1"

您将隐藏第一个视图（在本例中为 ImageView），因为您用红色填充了 TextView。

【讨论】：