Question

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

使用案例

我在片段中有六个ImageView。
用户可以滚动到任何这些ImageView。
当用户点击任何ImageView时，我们需要显示他/她点击该ImageView的次数
人们建议可以通过使用具有可绘制背景的TextView来解决它每个ImageView都附有一个TextView，当用户尚未点击时，它是不可见的。

我试图在每个ImageView上放置一个TextView - 就像这样，我不确定这是不是最好的做法：

注意： android：TextView中的文本只是一个占位符，我们将动态地使用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>

这个结果非常尴尬，红色背景覆盖了我的整个图像我也将我的最终目标作为对这篇文章的附件。

This is my objective

This is what I am getting out of this code.

This is when I removed drawable background from the first image.

Answer 1

由于它不是答案，我无法在评论中附加图片，因此我必须在此处发布。我需要对margin_left和margin_top进行一些澄清。

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

enter image description here

    <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以保持它们在右下方对齐是否真的可行。我问这个只是因为，app可能会在不同的屏幕尺寸中使用，这可能会影响它在图像上的位置。这只是一个想法，请提出你的建议。

谢谢，沙善

<强> [编辑]

让我做一些优化。
我没有给出巨大的余量，而是只使用了对齐方式和各自的推荐。

<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

Answer 2

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

<ImageView
    android:layout_width="fill_parent"

而你的第二个只是包含它的内容，我想这就是你想要的？因此将其应用于所有ImageViews。

<ImageView
    android:layout_width="wrap_content"

你也应该知道，如果你把一个视图放在另一个视图的顶部，覆盖它，就像你在这里使用TextViews一样，

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

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

Answer 3

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

image_view.setOnClickListener(new OnClickListener() {

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

Answer 4

要使用圈子，您可以按照

进行操作

android:shape="oval"

在形状标记

中

Answer 5

我不会专注于如何隐藏或展示徽章的可见性，因为它真的是一项微不足道的任务。

让我们谈谈设计。

为了达到目标，我为您的设计做了几个修复（几个，真的）。

这是布局：

<?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>

这是您追求的结果：

enter image description here

我使用了默认的启动器图标，因为我没有你的图像另请注意， 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>

只有形状的颜色会发生变化

这是结果（为了更好地看到它，我做了一个黑色的背景）

enter image description here

在文本视图的背景中绘制圆形，在Fragment中的每个图像上

5 个答案: