即使在android中选择了正确的名称，为什么我的cardview显示错误的颜色？

Question

我有两列，第一列中的所有图像和第二列中的所有图像都带有名称。图片和名字以键值对的形式存储在HashMap中。其中键是图像，值是它们的正确名称。但是，有一个问题，名称会被打乱，以便用户可以单击正确的名称。所以，我想要实现的是，当我单击图像卡片视图时，它的背景颜色应该变成绿色[它确实改变了]，然后当我单击该图像的正确名称时，正确的名称也应该变成绿色，如果错误的话单击名片后名片背景应变为红色。目前，即使像这样选择正确的名称，我也会得到红色

下面是我的片段的代码PractiseFragment.kt

package com.example.visuallithuanian.ui.activities.fragments


import com.example.visuallithuanian.adapter.PractiseAdapter
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.LinearLayoutManager
import com.example.visuallithuanian.Utils.shuffleList
import com.example.visuallithuanian.constants.ImageStore
import com.example.visuallithuanian.databinding.FragmentPractiseBinding

class PractiseFragment : Fragment() {
    lateinit var binding: FragmentPractiseBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        // Inflate the layout for this fragment

        binding = FragmentPractiseBinding.inflate(layoutInflater,container,false)


        val layoutManager = LinearLayoutManager(requireContext(),LinearLayoutManager.VERTICAL,false)
        binding.recyclerViewPractise.layoutManager = layoutManager

        // Shuffle the list of image names
        val shuffledImageNames = ImageStore.imagesNamesMap.values.toList().shuffleList()
        val shuffledImageResources = ImageStore.imagesNamesMap.keys.toList().shuffleList()


        val adapter = PractiseAdapter(shuffledImageResources,shuffledImageNames)
        binding.recyclerViewPractise.adapter = adapter


        return binding.root

    }

}

以下是该片段的 xml 文件，名为 fragment_practise.xml

  <RelativeLayout 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="@color/nana"
    xmlns:tools="http://schemas.android.com/tools">

    <!-- RecyclerView to display the image cards -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewPractise"
        android:layout_width="match_parent"
        tools:listitem="@layout/item_practise_cards"
        android:layout_marginTop="100dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="20dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp" />

</RelativeLayout>

下面是适配器类的代码视频，PractiseAdapter.kt

  package com.example.visuallithuanian.adapter

import android.annotation.SuppressLint
import android.graphics.Color
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import android.widget.Toast
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.R
import com.example.visuallithuanian.Utils.shuffleList


class PractiseAdapter(
    private val imageResources: List<Int>,
    private val imageNames: List<String>
) : RecyclerView.Adapter<PractiseAdapter.PractiseViewHolder>() {

    private val shuffledIndexes: List<Int> = imageResources.indices.shuffled()
    private var selectedImagePosition = -1
    private var selectedNamePosition = -1
    private var correctNameIndex = -1

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PractiseViewHolder {
        val view =
            LayoutInflater.from(parent.context).inflate(R.layout.item_practise_cards, parent, false)
        return PractiseViewHolder(view)
    }

    override fun getItemCount(): Int = imageResources.size

    override fun onBindViewHolder(holder: PractiseViewHolder, @SuppressLint("RecyclerView") position: Int) {
        val shuffledIndex = shuffledIndexes[position]
        val imageResource = imageResources[shuffledIndex]
        val imageName = imageNames[shuffledIndex]

        holder.imageViewPractise.setImageResource(imageResource)
        holder.textViewPractise.text = imageName

        // Set the background color of the image card based on selection
        holder.cardImagePractise.setCardBackgroundColor(
            if (selectedImagePosition == position) Color.GREEN else Color.WHITE
        )

        // Set the background color of the name card based on selection and correctness
        holder.cardTextPractise.setCardBackgroundColor(
            when {
                selectedNamePosition == position -> {
                    if (imageName == imageNames[correctNameIndex] && correctNameIndex == shuffledIndex) {
                        Color.GREEN // Correct name selected
                    } else {
                        Color.RED // Wrong name selected
                    }
                }
                else -> Color.WHITE // Default color
            }
        )

        holder.cardImagePractise.setOnClickListener {
            // Set the selected image position and reset the selected name position
            selectedImagePosition = position
            selectedNamePosition = -1
            correctNameIndex = imageNames.indexOf(imageName)
            notifyDataSetChanged()
        }

        holder.cardTextPractise.setOnClickListener {
            if (selectedImagePosition != -1) {
                // Check if the correct name is selected
                val correctImageName = imageNames[selectedImagePosition]
                if (imageName == correctImageName) {
                    Toast.makeText(
                        it.context,
                        "Correct name selected!",
                        Toast.LENGTH_SHORT
                    ).show()
                } else {
                    Toast.makeText(
                        it.context,
                        "Wrong name selected!",
                        Toast.LENGTH_SHORT
                    ).show()
                }
                selectedNamePosition = position
                notifyDataSetChanged()
            } else {
                Toast.makeText(
                    it.context,
                    "Please select an image card first.",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    class PractiseViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val cardImagePractise: CardView = itemView.findViewById(R.id.cardImagePractise)
        val cardTextPractise: CardView = itemView.findViewById(R.id.cardTextPractise)
        val imageViewPractise: ImageView = itemView.findViewById(R.id.imageViewPractise)
        val textViewPractise: TextView = itemView.findViewById(R.id.textViewPractise)
    }
}

下面是Adapter类的xml布局文件，item_practise_cards.xml

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:columnCount="2"
    android:rowCount="4"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:padding="8dp">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardImagePractise"
        android:layout_width="150dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        app:cardCornerRadius="10dp"
        android:foreground="?android:attr/selectableItemBackground">

        <ImageView
            android:id="@+id/imageViewPractise"
            android:layout_width="100dp"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="10dp"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardTextPractise"
        android:layout_width="150dp"
        android:layout_height="120dp"
        android:layout_gravity="center"
        android:layout_margin="4dp"
        app:cardCornerRadius="10dp"
        android:foreground="?android:attr/selectableItemBackground"
        android:focusable="true"
        tools:ignore="UsingOnClickInXml">

        <TextView
            android:id="@+id/textViewPractise"
            android:layout_width="150dp"
            android:gravity="center"
            android:layout_height="150dp"
            android:textStyle="bold"
            android:text="Random Name"
            android:textSize="18sp" />
    </androidx.cardview.widget.CardView>
</GridLayout>

下面是我在 Hahmap 中声明了所有图像名称键值对的单例。它的名字是ImageStore.kt

package com.example.visuallithuanian.constants

import com.example.visuallithuanian.R

object ImageStore {

    val imagesNamesMap= hashMapOf(
        R.drawable.africa to "Africa",
        R.drawable.asia to "Asia",
        R.drawable.europe to "Europe",
        R.drawable.antartica to "Antarctica"
    )

}

我希望名片非洲的背景颜色是绿色而不是红色。

Answer 1

我认为你把它弄得太复杂了，这给了错误的空间。尝试将

PractiseAdpter

简化如下：

class PractiseAdapter(
    private val imageResources: List<Int>,
    private val imageNames: List<String>
) : RecyclerView.Adapter<PractiseAdapter.PractiseViewHolder>() {

    private var selectedImageResource = -1
    private var selectedImageName = ""

    ...

    override fun onBindViewHolder(
        holder: PractiseViewHolder,
        @SuppressLint("RecyclerView") position: Int
    ) {
        val imageResource = imageResources[position]
        val imageName = imageNames[position]

        holder.imageViewPractise.setImageResource(imageResource)
        holder.textViewPractise.text = imageName

        holder.cardImagePractise.setOnClickListener {
            // Set the selected image position and reset the selected name position
            selectedImageResource = imageResources[position]
            selectedImageName = ""
            notifyDataSetChanged()
        }

        // Set the background color of the image card based on selection
        holder.cardImagePractise.setCardBackgroundColor(
            if (selectedImageResource == imageResources[position]) Color.GREEN else Color.WHITE
        )

        holder.cardTextPractise.setOnClickListener {
            if (selectedImageResource == -1) {
                Toast.makeText(
                    it.context,
                    "Please select an image card first.",
                    Toast.LENGTH_SHORT
                ).show()
            } else {
                selectedImageName = imageNames[position]
            }
            notifyDataSetChanged()
        }

        val nameColor = if (imageNames[position] == selectedImageName) {
            if (ImageStore.imagesNamesMap[selectedImageResource] == selectedImageName) {
                Toast.makeText(
                    holder.itemView.context,
                    "Correct name selected!",
                    Toast.LENGTH_SHORT
                ).show()
                Color.GREEN
            } else {
                Toast.makeText(
                    holder.itemView.context,
                    "Wrong name selected!",
                    Toast.LENGTH_SHORT
                ).show()
                Color.RED
            }
        } else {
            Color.WHITE
        }

        holder.textViewPractise.setBackgroundColor(nameColor)
    }

    ...
}

简单来说，直接记住选择的图片资源和选择的名称即可，不需要记住它们的索引。然后，使用

ImageStore.imagesNamesMap

匹配所选图像和所选名称。