Android GridView子元素item按擊互動設計：背景顔色改變

《Android GridView子元素按擊互動設計：背景顔色改變》

效果圖：

大緻的需求和ListView相仿，就是要求使用者點選GridView中的子元素時候，要有一定的互動響應（背景顔色改變表明使用者的操作）。重點是在GridView的擴充卡中，子元素的布局檔案中，把android:background屬性配置成一個響應的selector，在selector中分别處理android:state_pressed事件在true和false兩種狀态下的情況。

首先寫一個MainActivity：

package zhangphil.bg_change;

import java.util.ArrayList;
import java.util.HashMap;

import android.support.v7.app.ActionBarActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {

	private final String IMAGE_TAG = "image", TEXT_TAG = "text";

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

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

		// 資料集
		ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();
		for (int i = 0; i < 19; i++) {
			HashMap<String, Object> map = new HashMap<String, Object>();
			map.put(IMAGE_TAG, R.drawable.ic_launcher);
			map.put(TEXT_TAG, String.valueOf(i));
			data.add(map);
		}

		SimpleAdapter adapter = new SimpleAdapter(this, data, R.layout.item,
				new String[] { IMAGE_TAG, TEXT_TAG }, new int[] { R.id.image,
						R.id.text });

		gridview.setAdapter(adapter);

		// 添加點選事件
		final Context context = this;
		gridview.setOnItemClickListener(new OnItemClickListener() {
			public void onItemClick(AdapterView<?> parent, View v,
					int position, long id) {
				Toast.makeText(context, String.valueOf(position),
						Toast.LENGTH_SHORT).show();
			}
		});
	}
}
           

MainActivity需要的布局檔案activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gridview"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:padding="10dip"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dip"
    android:horizontalSpacing="10dip"
    android:stretchMode="columnWidth" />           

在為GridView添加子元素時候，資料集中需要的item.xml，該XML檔案中的item_selector将對互動時間做出響應（使用者長按、點選的背景顔色改變）：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/item_selector" />

</FrameLayout>           

item_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/item_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/item_normal" android:state_pressed="false"/>
</selector>           

item_selector需要的兩個檔案item_normal.xml 和 item_pressed.xml：

item_normal

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#00000000" />

    <corners
        android:radius="5dp" />
    
    <stroke android:width="1px" android:color="#CCCCCC" />

</shape>           

item_pressed

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#5501D1FF" />

    <corners android:radius="5dp" />

    <stroke
        android:width="1px"
        android:color="#CCCCCC" />

</shape>