Android玉石短剑之GridView之精挑细选

来源：互联网发布：淘宝可以看手机评估吗? 编辑：程序博客网时间：2024/04/28 06:20

传送门 ☞ Android兵器谱 ☞ 转载请注明 ☞ http://blog.csdn.net/leverage_1229

玉石短剑
奔到大殿，陈家洛捡起三柄玉剑，每人手中拿了一把，低声道：“玉器可以辟邪。”这时脚步声已到殿外。。。阿里和其余勇士捉到了一个桑拉巴的手下，迫着他带路，攻进了神峰。在大殿上，他们的刀剑都被磁山收了去，桑拉巴的武士拿玉刀玉剑来杀他们。然而阿里和他的勇士学会了本事，虽然空手，仍是一个个的和他们一起战死。

今天我们学习如何利用Android平台“玉石短剑”GridView来实现“九宫格”的图片效果，并提供对GridView中各张图片的单选和复选功能。采用“九宫格”展示图像的情景很常见，像电子相册、写真集、主屏桌面、功能菜单项等。下面给出该情景的案例：

一、案例技术要点

1.创建两个GridView控件分别用于展示支持单选和复选功能的“九宫格”图片。

2.为这两个GridView控件提供图片资源适配器ImageAdapter，使用isMultiSelect变量标示是单选还是复选模式

3.为GridView中各项设置监听OnItemClickListener，用于实时记录各张图片的选择状态。另外，单选状态需要记录上一次选中的图片位置。

// 记录各张图片的Idprivate 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.java

package 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.xml

package 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);            }        });    }}

三、案例效果展示