Android GridView子元素item按击交互设计：背景颜色改变

深碍√TFBOYSˉ_ 2023-10-16 21:41 22阅读 0赞

《Android GridView子元素按击交互设计：背景颜色改变》

效果图：

![Center][]

大致的需求和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>

[Center]: https://img-blog.csdn.net/20150527163134976?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdwaGls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center