黑马程序员技术交流社区

标题: Android玉石短剑之GridView之精挑细选 [打印本页]
作者: 陈君    时间: 2014-9-19 19:29
标题: Android玉石短剑之GridView之精挑细选
玉石短剑
奔到大殿，陈家洛捡起三柄玉剑，每人手中拿了一把，低声道：“玉器可以辟邪。”这时脚步声已到殿外。。。阿里和其余勇士捉到了一个桑拉巴的手下，迫着他带路，攻进了神峰。在大殿上，他们的刀剑都被磁山收了去，桑拉巴的武士拿玉刀玉剑来杀他们。然而阿里和他的勇士学会了本事，虽然空手，仍是一个个的和他们一起战死。
今天我们学习如何利用Android平台“玉石短剑”GridView来实现“九宫格”的图片效果，并提供对GridView中各张图片的单选和复选功能。采用“九宫格”展示图像的情景很常见，像电子相册、写真集、主屏桌面、功能菜单项等。下面给出该情景的案例：
一、案例技术要点
1.创建两个GridView控件分别用于展示支持单选和复选功能的“九宫格”图片。
2.为这两个GridView控件提供图片资源适配器ImageAdapter，使用isMultiSelect变量标示是单选还是复选模式
3.为GridView中各项设置监听OnItemClickListener，用于实时记录各张图片的选择状态。另外，单选状态需要记录上一次选中的图片位置。
  1. // 记录各张图片的Id
  2. private ArrayList<Integer> imageIds = new ArrayList<Integer>();
  3. // 记录各张图片的选择状态
  4. private HashMap<Integer, Boolean> imageStatues = new HashMap<Integer, Boolean>();
复制代码

4.利用LayerDrawable类构建叠加图层，将标示勾选与否的图片置于显示各张图片的视图控件的左上方。
  1. Drawable[] drawArr = new Drawable[2];
  2. drawArr[0] = new BitmapDrawable(imageBmp);
  3. drawArr[1] = new BitmapDrawable(selectedBmp);
  4. LayerDrawable <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a> = new LayerDrawable(drawArr);
  5. <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a>.setLayerInset(0, 0, 0, 0, 0);
  6. <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a>.setLayerInset(1, 0, 0, 60, 60);
复制代码

二、案例代码陈列
工程包目录AndroidManifest.xml
  1. <manifest xmlns:<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>="http://schemas.<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.com/apk/res/<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>"
  2. package="cn.lynn.gridview"
  3. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:versionCode="1"
  4. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:versionName="1.0" >

  6. <uses-sdk
  7. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:minSdkVersion="8"
  8. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:targetSdkVersion="15" />

  10. <application
  11. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:icon="@drawable/ic_launcher"
  12. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:label="@string/app_name" >
  13. <activity
  14. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:name=".<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>MainActivity"
  15. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:label="@string/app_name" >
  16. <intent-filter>
  17. <action <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:name="<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.intent.action.MAIN" />

  19. <category <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:name="<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.intent.category.LAUNCHER" />
  20. </intent-filter>
  21. </activity>
  22. </application>

  24. </manifest>

复制代码

strings.xml
  1. <resources>

  3. <string name="app_name">Android单复选九宫格<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a></string>

  5. </resources>

复制代码

main.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>="http://schemas.<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.com/apk/res/<a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>"
  3. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:layout_width="match_parent"
  4. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:layout_height="match_parent"
  5. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:orientation="vertical"
  6. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:gravity="center" >

  8. <<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>
  9. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:id="@+id/radio<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>"
  10. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:layout_width="210dp"
  11. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:layout_height="210dp"
  12. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:gravity="center"
  13. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:numColumns="3" />

  15. <<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>
  16. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:id="@+id/check<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>"
  17. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:layout_width="210dp"
  18. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:layout_height="210dp"
  19. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:gravity="center"
  20. <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>:numColumns="3" />

  22. </LinearLayout>
复制代码

ImageAdapter.java
  1. package cn.lynn.gridview;

  3. import java.util.ArrayList;
  4. import java.util.HashMap;

  6. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.content.Context;
  7. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.graphics.Bitmap;
  8. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.graphics.BitmapFactory;
  9. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.graphics.drawable.BitmapDrawable;
  10. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.graphics.drawable.Drawable;
  11. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.graphics.drawable.LayerDrawable;
  12. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.view.View;
  13. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.view.ViewGroup;
  14. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.widget.BaseAdapter;
  15. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.widget.<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>;
  16. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.widget.ImageView;

  18. public class ImageAdapter extends BaseAdapter {

  20. private Context context;
  21. // 记录各张图片的Id
  22. private ArrayList<Integer> imageIds = new ArrayList<Integer>();
  23. // 记录各张图片的选择状态
  24. private HashMap<Integer, Boolean> imageStatues = new HashMap<Integer, Boolean>();

  26. // 记录上一次选中的图片位置，-1表示未选中任何图片
  27. private int lastPosition = -1;

  29. // 表示当前适配器是否允许多选
  30. private boolean isMultiSelect;

  32. // 声明图片资源数组
  33. private int[] imageResIds = { R.drawable.item1, R.drawable.item2,
  34. R.drawable.item3, R.drawable.item4, R.drawable.item5,
  35. R.drawable.item6, R.drawable.item7, R.drawable.item8,
  36. R.drawable.item9 };

  38. public ImageAdapter(Context context, boolean isMultiSelect) {
  39. this.context = context;
  40. this.isMultiSelect = isMultiSelect;

  42. // 采集图片资源
  43. for (int i = 0; i < imageResIds.length; i++) {
  44. imageIds.add(imageResIds[i]);
  45. }
  46. for (int i = 0; i < imageIds.size(); i++) {
  47. // 初始化各图片状态均为未选中
  48. imageStatues.put(i, false);
  49. }
  50. }

  52. @Override
  53. public int getCount() {
  54. return imageIds.size();
  55. }

  57. @Override
  58. public Object getItem(int position) {
  59. return position;
  60. }

  62. @Override
  63. public long getItemId(int position) {
  64. return position;
  65. }

  67. @Override
  68. public View getView(int position, View convertView, ViewGroup parent) {
  69. ImageView imageView = null;
  70. if (convertView == null) {
  71. imageView = new ImageView(context);
  72. imageView.setLayoutParams(new <a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>.LayoutParams(50, 50));
  73. imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
  74. } else {
  75. imageView = (ImageView) convertView;
  76. }
  77. imageView.setImageDrawable(makeBmp(imageIds.get(position), imageStatues.get(position)));
  78. return imageView;
  79. }

  81. private LayerDrawable makeBmp(int id, boolean isSelect) {
  82. Bitmap imageBmp = ((BitmapDrawable) context.getResources().getDrawable(id)).getBitmap();
  83. // 根据isSelect来选取勾选的图片
  84. Bitmap selectedBmp = null;
  85. if (isSelect) {
  86. selectedBmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.checkbox_pressed);
  87. } else {
  88. selectedBmp = BitmapFactory.decodeResource(context.getResources(), R.drawable.checkbox_normal);
  89. }
  90. // 生成叠加图
  91. Drawable[] drawArr = new Drawable[2];
  92. drawArr[0] = new BitmapDrawable(imageBmp);
  93. drawArr[1] = new BitmapDrawable(selectedBmp);
  94. LayerDrawable <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a> = new LayerDrawable(drawArr);
  95. <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a>.setLayerInset(0, 0, 0, 0, 0);
  96. <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a>.setLayerInset(1, 0, 0, 60, 60);

  98. return <a title="layerDrawable" href="http://www.android-study.com/jiemiansheji/556.html">layerDrawable</a>;
  99. }

  101. // 修改选中的状态
  102. public void changeState(int position) {
  103. if (isMultiSelect) { // 多选
  104. // 直接取反
  105. imageStatues.put(position, !imageStatues.get(position));
  106. } else { // 单选
  107. if (lastPosition != -1 && lastPosition != position) {
  108. // 取消上一次的选中状态
  109. imageStatues.put(lastPosition, false);
  110. }
  111. // 直接取反
  112. imageStatues.put(position, !imageStatues.get(position));
  113. lastPosition = position; // 记录本次选中的位置
  114. }
  115. notifyDataSetChanged(); // 通知适配器进行更新
  116. }
  117. }
复制代码

GridViewMainActivity.xml
  1. package cn.lynn.gridview;

  3. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.app.Activity;
  4. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.os.Bundle;
  5. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.view.View;
  6. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.widget.AdapterView;
  7. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.widget.AdapterView.OnItemClickListener;
  8. import <a title="android" href="http://www.android-study.com/jiemiansheji/556.html">android</a>.widget.<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>;

  10. public class <a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>MainActivity extends Activity {
  11. // 单选网格视图
  12. private <a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a> radio<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>;
  13. // 多选网格视图
  14. private <a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a> check<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>;
  15. // 用于单选网格视图的内容适配器
  16. private ImageAdapter radioImageAdapter;
  17. // 用于多选网格视图的内容适配器
  18. private ImageAdapter checkImageAdapter;

  20. @Override
  21. public void onCreate(Bundle savedInstanceState) {
  22. super.onCreate(savedInstanceState);
  23. setContentView(R.layout.main);

  25. radio<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a> = (<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>) this.findViewById(R.id.radio<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>);
  26. radioImageAdapter = new ImageAdapter(this, false);
  27. radio<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>.setAdapter(radioImageAdapter);
  28. // 设置点击图片事件监听
  29. radio<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>.setOnItemClickListener(new OnItemClickListener() {
  30. @Override
  31. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  32. radioImageAdapter.changeState(position);
  33. }
  34. });

  36. check<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a> = (<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>) findViewById(R.id.check<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>);
  37. checkImageAdapter = new ImageAdapter(this, true);
  38. check<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>.setAdapter(checkImageAdapter);
  39. // 设置点击图片事件监听
  40. check<a title="GridView" href="http://www.android-study.com/jiemiansheji/556.html">GridView</a>.setOnItemClickListener(new OnItemClickListener() {
  41. @Override
  42. public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
  43. checkImageAdapter.changeState(position);
  44. }
  45. });
  46. }

  48. }
复制代码







欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2