GridView Android单击以更改背景

Question

enter static final String[] times = new String[] {
        "00:00","00:15","00:30","00:45",
        "01:00","01:15","01:30","01:45",
        "02:00","02:15","02:30","02:45",
        "03:00","03:15","03:30","03:45",
        "04:00","04:15","04:30","04:45",
        "05:00","05:15","05:30","05:45",
        "06:00","06:15","06:30","06:45",
        "07:00","07:15","07:30","07:45",
        "08:00","08:15","08:30","08:45",
        "09:00","09:15","09:30","09:45",
        "10:00","10:15","10:30","10:45",
        "11:00","11:15","11:30","11:45",
        "12:00","12:15","12:30","12:45",
        "13:00","13:15","13:30","13:45",
        "14:00","14:15","14:30","14:45",
        "15:00","15:15","15:30","15:45",
        "16:00","16:15","16:30","16:45",
        "17:00","17:15","17:30","17:45",
        "18:00","18:15","18:30","18:45",
        "19:00","19:15","19:30","19:45",
        "20:00","20:15","20:30","20:45",
        "21:00","21:15","21:30","21:45",
        "22:00","22:15","22:30","22:45",
        "23:00","23:15","23:30","23:45",
};
List<String> timeList;
Context mContext;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_grid_test);
    mContext = this;
    items = new int[times.length];
    for (int i=0;i<times.length;i++) {
        items[i] = 0;
    }
    timeList  = new ArrayList<>(Arrays.asList(times));

    gridView = (GridView) findViewById(R.id.gridview);

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            R.layout.grid_block, times);

    gridView.setAdapter(adapter);
    gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
                                int position, long id) {
            Log.v(TAG, "pos is " + position + " id " + id);
            Toast.makeText(mContext, ((TextView) v.findViewById(R.id.text1)).getText(), Toast.LENGTH_SHORT).show();
            int status = items[position];
            if (status == 0) {
                items[position] = 1;
                v.setBackgroundColor(getResources().getColor(R.color.green));
            }
            if (status == 1) {
                items[position] = 0;                           v.setBackgroundColor(getResources().getColor(R.color.white));
            }
        }
    });

    }

I am trying to make the background green when clicked and when click again change it back to white. ie select and unselected indicator. However for some weird reason it seems to change the color of more than one item? Any help appreciated

Answer 1

What happens is that your adapter is recycling Grid Views to save memory (avoid creating a view for each element in your list) and CPU usage (avoid inflating from xml for each element in your list). Thus when you scroll your gridview, it dynamically tries to use views already inflated.

When you have made changes from your initial configuration of a view (eg changed the colour) you will have to revert that change in the " public View getView(int position, View convertView, ViewGroup parent) " of your Adapter code, which is responsible for the recycling of views. If you don't do that it will create clones of views with different colour, the strange behaviour that you report.

Please note that when you override "getView" code you don't want to inflate a new view each time because you will defeat the purpose of adapter and its advantages that I mentioned above.

Code should look similar to this:

//convertView is the view that may be suitable to play the role of new View
public View getView(int position, View convertView, ViewGroup parent) {    
    View itemView = null;

    if (convertView == null) {
        LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        itemView = inflater.inflate(R.layout.grid_block, null);
    } else {
        itemView = convertView;
        itemView.setBackgroundColor(getResources().getColor(R.color.white));
    }
    return itemView;
}

Answer 2

创建一个SparseBooleanArray并在其中存储选择状态。然后在OnClick上更新选择，然后在getview方法中检查布尔数组中的值并更新背景。