機器人：OnItemClick

Question

後更換在GridView的陣列圖像I具有看起來大致是這樣的（每個圖像將在端部的不同）網格視圖：

當用戶點擊在任何圖像數組，我想那個形象改成這樣：

如果他們再次單擊它更改爲：

然後再次單擊返回到：

這裏是我到目前爲止的代碼，只需創建與Imageadapter一個GridView：

public class GridScroll extends Activity { 
@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 

    GridView gridview = (GridView) findViewById(R.id.gridview); 
    gridview.setAdapter(new ImageAdapter(this)); 
    gridview.setOnItemClickListener(new OnItemClickListener() { 
     public void onItemClick(AdapterView<?> parent, View v, int position, long id) { 
      // CHANGE IMAGE HERE 
      Toast.makeText(GridScroll.this, "" + position, Toast.LENGTH_SHORT).show(); 


     } 
    }); 
} 

}

和：

public View getView(int position, View convertView, ViewGroup parent) { 
    ImageView imageView; 
    if (convertView == null) { // if it's not recycled, initialize some attributes 
     imageView = new ImageView(mContext); 
     imageView.setLayoutParams(new GridView.LayoutParams(85, 85)); 
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
     imageView.setPadding(8, 8, 8, 8); 
    } else { 
     imageView = (ImageView) convertView; 
    } 

    imageView.setImageResource(mThumbIds[position]); 
    return imageView; 
} 

// references to our images 
private Integer[] mThumbIds = { 
     R.drawable.lifestyle_5,R.drawable.lifestyle_6, 
     R.drawable.lifestyle_7,R.drawable.lifestyle_8, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.lifestyle_1,R.drawable.lifestyle_2, 
     R.drawable.lifestyle_3,R.drawable.lifestyle_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.lifestyle_1,R.drawable.lifestyle_2, 
     R.drawable.lifestyle_3,R.drawable.lifestyle_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.lifestyle_1,R.drawable.lifestyle_2, 
     R.drawable.lifestyle_3,R.drawable.lifestyle_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 
     R.drawable.icon_4, R.drawable.icon_4, 

}; 

Answer 1

要做到這一點，我們需要做兩件事情：

1.更改項目的繪製被點擊時。 在onItemClick(...)中，更改傳遞給您的視圖的drawable。該視圖將與您在適配器的getView(...)中創建的視圖相同。

2.確保該項目在下一次出現在屏幕上時顯示正確的繪圖。 要做到這一點，跟蹤每個項目的狀態。每當您在getView(...)中查看該項目時，都會爲其狀態分配正確的繪圖。

---

這裏是一個例子。我假設ImageAdapter是ArrayAdapter的子類。如果沒有，那麼你將需要修改這段代碼來處理你正在做的事情。

把這些地方：

private static final int WHITE = 0; 
private static final int TEAL = 1; 
private static final int MAROON = 2; 
private List<Integer> mStates = new ArrayList<Integer>(); 

這正好在你的ImageAdapter：

// Map each state to its graphics. 
private Map<Integer, Integer> mStateResources = new HashMap<Integer, Integer>(); 
mStateResources.put(WHITE, R.drawable.white); 

public void add(...) { 
    super.add(...); 

    // The new item will start as white. 
    mStates.add(WHITE); 
} 

public View getView(int position, View convertView, ViewGroup parent) { 
    //ImageView image = ... 

    // Set the correct image for the state of this item. 
    int state = mStates.get(position); 
    int resId = mStateResources.get(state); 
    image.setImageResource(resId); 
} 

在你OnItemClickListener：

public void onItemClick(AdapterView<?> parent, View v, int position, long id) { 
    // Change the image and state for this item. 
    int nextState; 
    switch(mStates.get(position)) { 
    case WHITE: 
     nextState = TEAL; 
     break; 
    case TEAL: 
     nextState = MAROON; 
     break; 
    case MAROON: 
     nextState = WHITE; 
     break; 
    } 

    // Set the new state and image for this item. 
    mStates.put(position, nextState); 
    int resId = mStateResources.get(nextState); 
    image.setImageResource(resId); 
}