Android玉石短剑之GridView之精挑细选
传送门 ☞ Android兵器谱 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229
玉石短剑
奔到大殿，陈家洛捡起三柄玉剑，每人手中拿了一把，低声道：“玉器可以辟邪。”这时脚步声已到殿外。。。阿里和其余勇士捉到了一个桑拉巴的手下，迫着他带路，攻进了神峰。在大殿上，他们的刀剑都被磁山收了去，桑拉巴的武士拿玉刀玉剑来杀他们。然而阿里和他的勇士学会了本事，虽然空手，仍是一个个的和他们一起战死。
今天我们学习如何利用Android平台“玉石短剑”GridView来实现“九宫格”的图片效果，并提供对GridView中各张图片的单选和复选功能。采用“九宫格”展示图像的情景很常见，像电子相册、写真集、主屏桌面、功能菜单项等。下面给出该情景的案例：
一、案例技术要点
1.创建两个GridView控件分别用于展示支持单选和复选功能的“九宫格”图片。
2.为这两个GridView控件提供图片资源适配器ImageAdapter，使用isMultiSelect变量标示是单选还是复选模式
3.为GridView中各项设置监听OnItemClickListener，用于实时记录各张图片的选择状态。另外，单选状态需要记录上一次选中的图片位置。
// 记录各张图片的Id private ArrayList<Integer> imageIds = new ArrayList<Integer>(); // 记录各张图片的选择状态 private HashMap<Integer, Boolean> imageStatues = new HashMap<Integer, Boolean>();
4.利用LayerDrawable类构建叠加图层，将标示勾选与否的图片置于显示各张图片的视图控件的左上方。
Drawable[] drawArr = new Drawable[2]; drawArr[0] = new BitmapDrawable(imageBmp); drawArr[1] = new BitmapDrawable(selectedBmp); LayerDrawable layerDrawable = new LayerDrawable(drawArr); layerDrawable.setLayerInset(0, 0, 0, 0, 0); layerDrawable.setLayerInset(1, 0, 0, 60, 60);
二、案例代码陈列
工程包目录
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="cn.lynn.gridview"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="15" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".GridViewMainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>strings.xml<resources>
<string name="app_name">Android单复选九宫格GridView</string>
</resources>main.xml<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
<GridView
android:id="@+id/radioGridView"
android:layout_width="210dp"
android:layout_height="210dp"
android:gravity="center"
android:numColumns="3" />
<GridView
android:id="@+id/checkGridView"
android:layout_width="210dp"
android:layout_height="210dp"
android:gravity="center"
android:numColumns="3" />
</LinearLayout>ImageAdapter.javapackage cn.lynn.gridview;
import java.util.ArrayList;
import java.util.HashMap;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
public class ImageAdapter extends BaseAdapter {
private Context context;
// 记录各张图片的Id
private ArrayList<Integer> imageIds = new ArrayList<Integer>();
// 记录各张图片的选择状态
private HashMap<Integer, Boolean> imageStatues = new HashMap<Integer, Boolean>();
// 记录上一次选中的图片位置，-1表示未选中任何图片
private int lastPosition = -1;
// 表示当前适配器是否允许多选
private boolean isMultiSelect;
// 声明图片资源数组
private int[] imageResIds = { R.drawable.item1, R.drawable.item2,
R.drawable.item3, R.drawable.item4, R.drawable.item5,
R.drawable.item6, R.drawable.item7, R.drawable.item8,
R.drawable.item9 };
public ImageAdapter(Context context, boolean isMultiSelect) {
this.context = context;
this.isMultiSelect = isMultiSelect;
// 采集图片资源
for (int i = 0; i < imageResIds.length; i++) {
imageIds.add(imageResIds[i]);
}
for (int i = 0; i < imageIds.size(); i++) {
// 初始化各图片状态均为未选中
imageStatues.put(i, false);
}
}
@Override
public int getCount() {
return imageIds.size();
}
@Override
public Object getItem(int position) {
return position;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = null;
if (convertView == null) {
imageView = new ImageView(context);
imageView.setLayoutParams(new GridView.LayoutParams(50, 50));
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageDrawable(makeBmp(imageIds.get(position), imageStatues.get(position)));
return imageView;
}
private LayerDrawable makeBmp(int id, boolean isSelect) {
Bitmap imageBmp = ((BitmapDrawable) context.getResources().getDrawable(id)).getBitmap();
// 根据isSelect来选取勾选的图片
Bitmap selectedBmp = null;
if (isSelect) {
selectedBmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.checkbox_pressed);
} else {
selectedBmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.checkbox_normal);
}
// 生成叠加图
Drawable[] drawArr = new Drawable[2];
drawArr[0] = new BitmapDrawable(imageBmp);
drawArr[1] = new BitmapDrawable(selectedBmp);
LayerDrawable layerDrawable = new LayerDrawable(drawArr);
layerDrawable.setLayerInset(0, 0, 0, 0, 0);
layerDrawable.setLayerInset(1, 0, 0, 60, 60);
return layerDrawable;
}
// 修改选中的状态
public void changeState(int position) {
if (isMultiSelect) { // 多选
// 直接取反
imageStatues.put(position, !imageStatues.get(position));
} else { // 单选
if (lastPosition != -1 && lastPosition != position) {
// 取消上一次的选中状态
imageStatues.put(lastPosition, false);
}
// 直接取反
imageStatues.put(position, !imageStatues.get(position));
lastPosition = position; // 记录本次选中的位置
}
notifyDataSetChanged(); // 通知适配器进行更新
}
}GridViewMainActivity.xmlpackage cn.lynn.gridview;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
public class GridViewMainActivity extends Activity {
// 单选网格视图
private GridView radioGridView;
// 多选网格视图
private GridView checkGridView;
// 用于单选网格视图的内容适配器
private ImageAdapter radioImageAdapter;
// 用于多选网格视图的内容适配器
private ImageAdapter checkImageAdapter;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
radioGridView = (GridView) this.findViewById(R.id.radioGridView);
radioImageAdapter = new ImageAdapter(this, false);
radioGridView.setAdapter(radioImageAdapter);
// 设置点击图片事件监听
radioGridView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
radioImageAdapter.changeState(position);
}
});
checkGridView = (GridView) findViewById(R.id.checkGridView);
checkImageAdapter = new ImageAdapter(this, true);
checkGridView.setAdapter(checkImageAdapter);
// 设置点击图片事件监听
checkGridView.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
checkImageAdapter.changeState(position);
}
});
}
}
三、案例效果展示
