使用GridView时，多张图片被选中的效果

今天上午逛论坛时，发现了一位同学问起GridView的问题，他想实现多张图片被选中的效果。看得出这位同学刚学Android没多久，让我想起了两年前的自己。正好今天不太忙，索性就把这个简单的demo写了一下，希望能够帮助到刚学android没多久的同学，话不多说，开工！

下面是demo中用到的两个xml文件：

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <GridView        android:id="@+id/gridview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:horizontalSpacing="20dp"        android:numColumns="4"        android:scrollbars="none"        android:verticalSpacing="20dp" >    </GridView></RelativeLayout>

android:horizontalSpacing 和 android:verticalSpacing 这两个属性是指定gridview中的每一项之间的横向间距和纵向间距，避免拥挤在一起

android:numColumns 这个属性是指定每一行显示视图的个数

item.xml

<?xml version="1.0" encoding="UTF-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content">    <ImageView         android:id="@+id/image"        android:layout_width="130dp"        android:layout_height="100dp"        android:src="@drawable/ic_launcher"        android:scaleType="fitXY"></ImageView>"    <ImageView         android:id="@+id/isselected"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:layout_alignParentTop="true"        android:src="@drawable/selected"/></RelativeLayout>

下面是两份java代码，因为一般项目中，从网络接口或者本地文件解析的数据源都会封装成一个个实体类，所以下面的Entity即是封装的实体类。

Entity.java:

package com.example.gridviewdemo;public class Entity {private int imageUri;//读取图片的地址private boolean isSelected;//是否被选中状体的标示符public Entity(int imageUri,boolean isSelected) {this.imageUri = imageUri;this.isSelected = isSelected;}public int getImageUri() {return imageUri;}public void setImageUri(int imageUri) {this.imageUri = imageUri;}public boolean isSelected() {return isSelected;}public void setSelected(boolean isSelected) {this.isSelected = isSelected;}}

MainActivity.java

package com.example.gridviewdemo;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.ImageView;public class MainActivity extends Activity {ArrayList<Entity> dataList;//用来装载数据源的列表GridView gridView;GridAdapter adapter;//自定义的适配器@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();initView();}/** * 初始化数据 */private void initData(){/** * 这里，我们假设已经从网络或者本地解析好了数据，所以直接在这里模拟了10个实体类，直接装进列表中 */dataList = new ArrayList<Entity>();for(int i=-0;i<10;i++){Entity entity = new Entity(R.drawable.picture, false);dataList.add(entity);}}/** * 初始化view视图 */private void initView(){gridView = (GridView)findViewById(R.id.gridview);adapter = new GridAdapter();gridView.setAdapter(adapter);gridView.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view,int position, long id) {/** * 根据position参数，可以获得跟GridView的子View相绑定的实体类，然后根据它的isSelected状态，来判断是否显示选中效果。 * 至于选中效果的规则，下面适配器的代码中会有说明 */if(dataList.get(position).isSelected()){dataList.get(position).setSelected(false);}else{dataList.get(position).setSelected(true);}/** * 通知适配器，绑定的数据发生了改变，应当刷新视图 */adapter.notifyDataSetChanged();}});}/** * 继承BaseAdapter，实现的一个适配器，用来绑定数据源和gridview */class GridAdapter extends BaseAdapter{@Overridepublic int getCount() {int count = 0;if(dataList!=null){count = dataList.size();}return count;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn null;}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {/** * 这里解析Gridview的子view的布局，然后根据绑定实体类的属性，来显示图片和选中状态 * 其实这里写的不太规范，在真正的项目中，这里的视图解析应该用到ViewHolder来做视图缓存，达到性能优化的目的。 * 因为写的匆忙，就先不做ViewHolder的示范了，不过做项目时要注意。 */convertView = LayoutInflater.from(getApplicationContext()).inflate(R.layout.item, null);ImageView image = (ImageView)convertView.findViewById(R.id.image);ImageView selectImage = (ImageView)convertView.findViewById(R.id.isselected);image.setImageResource(dataList.get(position).getImageUri());if(dataList.get(position).isSelected()){selectImage.setVisibility(View.VISIBLE);}else{selectImage.setVisibility(View.GONE);}return convertView;}}}

至此一个简单的小demo就完成了，我把项目的源代码也传上来，大家可以下载源代码直接调试。

Demo下载地址：http://download.csdn.net/detail/pringlee2011/5895687

更多相关文章

随机推荐