ListView Image Click 在滚动时更改列表中的其他图像

Question

我有一个 ListView，它在相对布局中有一个图像和一个文本，在线性布局中有两个文本。我已将图像设置为在 ListView 中单击时更改为文本。但问题是当滚动列表视图时，其他图像也会更改为文本视图..

我在其他帖子上看到在 GetView 上 setOnClickListener 是错误的，我们可以使用 setOnItemClickListener 代替，但我不知道如何实现它？请帮助..

下面是我的适配器class

public class WordAdapter extends ArrayAdapter<Word>  {

/** Resource ID for the background color for this list of words */
private int mColorResourceId;

/**
 * Create a new {@link WordAdapter} object.
 *
 * @param context is the current context (i.e. Activity) that the adapter is being created in.
 * @param words is the list of {@link Word}s to be displayed.
 * @param colorResourceId is the resource ID for the background color for this list of words
 */
public WordAdapter(Context context, ArrayList<Word> words, int colorResourceId) {
    super(context, 0, words);
    mColorResourceId = colorResourceId;

}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // Check if an existing view is being reused, otherwise inflate the view
    View listItemView = convertView;
    if (listItemView == null) {
        listItemView = LayoutInflater.from(getContext()).inflate(
                R.layout.list_item, parent, false);

    }

    // Get the {@link Word} object located at this position in the list
    Word currentWord = getItem(position);

    // Find the TextView in the list_item.xml layout with the ID miwok_text_view.
    TextView miwokTextView = (TextView) listItemView.findViewById(R.id.miwok_text_view);
    // Get the Miwok translation from the currentWord object and set this text on
    // the Miwok TextView.
    miwokTextView.setText(currentWord.getMiwokTranslationId());

    // Find the TextView in the list_item.xml layout with the ID default_text_view.
    TextView defaultTextView = (TextView) listItemView.findViewById(R.id.default_text_view);
    // Get the default translation from the currentWord object and set this text on
    // the default TextView.
    defaultTextView.setText(currentWord.getDefaultTranslationId());

   final TextView onClickTextView = (TextView) listItemView.findViewById(R.id.miwok_text_view_on_click);

    onClickTextView.setText((currentWord.getTextOnClickId()));

    // Find the ImageView in the list_item.xml layout with the ID image.
    final ImageView imageView = (ImageView) listItemView.findViewById(R.id.image);
    // Check if an image is provided for this word or not
    if (currentWord.hasImage()) {
        // If an image is available, display the provided image based on the resource ID
        imageView.setImageResource(currentWord.getImageResourceId());
        // Make sure the view is visible
        imageView.setVisibility(View.VISIBLE);
    } else {
        // Otherwise hide the ImageView (set visibility to GONE)
        imageView.setVisibility(View.GONE);
    }

   // Set the theme color for the list item
    View textContainer = listItemView.findViewById(R.id.text_container);
    // Find the color that the resource ID maps to
    int color = ContextCompat.getColor(getContext(), mColorResourceId);
    // Set the background color of the text container View
    textContainer.setBackgroundColor(color);

    // Return the whole list item layout (containing 2 TextViews) so that it can be shown in
    // the ListView.

    // ImageView imageView = (ImageView) listItemView.findViewById(R.id.list_item);

    imageView.setTag(new Integer(position));
    imageView.setOnClickListener(new ImageView.OnClickListener() {

        Boolean flag =false;

        @Override
        public void onClick(View view) {

               // Toast.makeText(getContext(), "ImageView clicked for the row = "+view.getTag().toString(), Toast.LENGTH_SHORT).show();
             if(flag){

                 imageView.setAlpha(255);
                 onClickTextView.setVisibility(View.INVISIBLE);
                 flag = false;
             }else{
                 imageView.setAlpha(0);
                 onClickTextView.setVisibility(View.VISIBLE);
                 flag =true;
                }

            }

    });

    return listItemView;
}
}

Answer 1

因为 View 在 ListView 中被重用。单击一个项目后，视图项目中的图像将更改为文本，当您向下滚动时重复使用相同的视图项目时，它会保留旧状态。这就是为什么您会看到其他图片也更改为文字的原因。

因此，为了解决这个问题，请在您的 Word class 中创建一个变量，它确定视图项目处于什么状态（图像或文本）。我们称它为 isImage，它是一个布尔值

然后在getView方法中，根据它的当前值，初始化你的view

if(currentWord.isImage){
    imageView.setAlpha(255);
    onClickTextView.setVisibility(View.INVISIBLE);
}else{
    imageView.setAlpha(0);
    onClickTextView.setVisibility(View.VISIBLE);
}
// add a tag to determine the position of the view, when the view is clicked.
imageView.setTag(position)

并在 imageView 中点击监听器

public void onClick(View view) {

    // Toast.makeText(getContext(), "ImageView clicked for the row = "+view.getTag().toString(), Toast.LENGTH_SHORT).show();
    int position = (int) view.getTag()
    Word word = getItem(position)
        // using the new variable, do the required UI changes
        if(word.isImage){
             currentWord.isImage = false;
               }else{
                 word.isImage = true;
                }
                notifyDataSetChanged();

        }

我还在 Word class 中声明了 isImage 变量如下：

    public boolean isImage = true;

Answer 2

try to change this :

imageView.setTag(new Integer(position));
imageView.setOnClickListener(new ImageView.OnClickListener() {

    Boolean flag =false;

    @Override
    public void onClick(View view) {

           // Toast.makeText(getContext(), "ImageView clicked for the row = "+view.getTag().toString(), Toast.LENGTH_SHORT).show();
         if(flag){

             imageView.setAlpha(255);
             onClickTextView.setVisibility(View.INVISIBLE);
             flag = false;
         }else{
             imageView.setAlpha(0);
             onClickTextView.setVisibility(View.VISIBLE);
             flag =true;
            }

        }

});

to:

imageView.setOnClickListener(new ImageView.OnClickListener() {
        @Override
        public void onClick(View view) {
            if(currentWord.isFlag){
                currentWord.isFlag = false;
            }else{
                currentWord.isFlag = true;
            }
            notifyDataSetChanged();
        }

    });

    if(currentWord.isFlag)
    {

        imageView.setAlpha(0);
        onClickTextView.setVisibility(View.VISIBLE);
    }
    else
    {
        imageView.setAlpha(255);
        onClickTextView.setVisibility(View.INVISIBLE);
    }

在您的 Word 中创建一个 isFlag 变量 class
public boolean isFlag = false;

并且每当您初始化 Word 类型列表时，然后设置 setFlag(false) 的值；

这件事发生在你身上，因为列表视图总是在滚动期间刷新项目，所以你也必须在你的列表中使用标志

ListView Image Click 在滚动时更改列表中的其他图像

ListView Image Click changes other images in the list when scrolled

android

listview

android-arrayadapter

onitemclicklistener

onclicklistener