ListView Images change back to original settings when scrolled out of view - Android

问题

I have a ListView that contains multiple ListView items. The ListView items Layout contains an ImageView. I use this ImageView as a button. When the button is clicked it changes the ImageView from a gray image to a green image. But when I scroll the ImageView out of visible view and then back to it, it returns to its original color. When the ImageView is created it can be either green or gray, it depends on a JSON array. So if an image is green and clicked it turns to gray. Then when its out of visible view and returned to visible view it is green again! How can I make the images maintain their new state?

Here is my code,

if(p.getJSON().equals("NO")){
             imageView.setBackgroundResource(R.drawable.gray);
             imageView.setTag(0);
            }//end if equals NO
            if(p.getJSON().equals("YES")){
                imageView.setClickable(false);
                imageView.setBackgroundResource(R.drawable.green);
                imageView.setTag(1);
            }//end if equals yes

         imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View imageView) {
                final int status = (Integer) imageView.getTag();
                if (status == 0){
                imageView.setBackgroundResource(R.drawable.green);
                imageView.setTag(1);
                }
                else{
                    imageView.setBackgroundResource(R.drawable.gray);
                    imageView.setTag(0);
                }

            }//end on click
        });

回答1:

You need to persist the state for the items that you have modified with the button press and then restore that state when your adapter's getView() is called for that item.

There are many ways you can do this: in memory, database, etc. You'll have to pick the method that works best for your purposes.

i.e. - item 3 gets clicked and the image changes from grey to green, store something to represent the state of the image (grey vs. green, a boolean would be great for this exact case) and then persist that data somewhere. Then when getView() gets called again for item 3 (it's about to be displayed again) you set the color of the image based on the data you persisted for item 3.

You could just modify the value in the original JSONArray that backs the ListView, btw.

回答2:

The reason for this behaviour is because you do not persist the state of the items (if they were clicked or not). Each time the list is scrolled, the getView() is called and it executes the following code and the state is reset:

if(p.getJSON().equals("NO") ){
    imageView.setBackgroundResource(R.drawable.gray);
    imageView.setTag(0);
}//end if equals NO
if(p.getJSON().equals("YES")){
    imageView.setClickable(false);
    imageView.setBackgroundResource(R.drawable.green);
    imageView.setTag(1);
}//end if equals yes

What is needed is a way to keep track of the state of each item based on its position. So you could confidently tell: item at position k is "YES" or "NO"!

You need to keep track of the items which have been clicked so that when getView() is called, you can update the state of the based on its current value (not based on JSON value).

1) Maintain a map of items positions which are checked, and corresponding state value ("YES" or "NO").

2) If item is clicked, add its (position, new state) to the map. If it is clicked again, update its state inside the map.

3) Use this map and set the state of the item in the getView(), something like:

Private field:

HashMap<Integer, String> map = new HashMap<Integer, String>();

In your getView():

String state = p.getJSON();
if(map.containsKey(position)) {
    state = map.get(position);    
}
if(state.equals("NO") ){
    imageView.setBackgroundResource(R.drawable.gray);
    imageView.setTag(0);
}//end if equals NO
if(state.equals("YES")){
    imageView.setClickable(false);
    imageView.setBackgroundResource(R.drawable.green);
    imageView.setTag(1);
}//end if equals yes

final int pos = position;
imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View imageView) {
        final int status = (Integer) imageView.getTag();
        if (status == 0){
            imageView.setBackgroundResource(R.drawable.green);
            imageView.setTag(1);
            map.put(pos, "YES")
        }
        else {
            imageView.setBackgroundResource(R.drawable.gray);
            imageView.setTag(0);
            map.put(pos, "NO")
        }
    }//end on click
});

Note: this is just one of the many ways of getting what you want, however the basic idea should be the same..

来源：https://stackoverflow.com/questions/20232964/listview-images-change-back-to-original-settings-when-scrolled-out-of-view-and