android GridView实现图库预览图，多选模式下右上角打勾

看到有初学者有这样的需求： GridView实现图库预览图，多选模式下右上角打勾。（4.0图库的预览图多选时，多了个蓝色边框，其实是蓝色背景）

       GridView在自己实际开发中也没用到过，就想试着实现下，写个demo供初学者参考,高手略过。

       先来个效果图吧：

       实现起来不复杂，就2个文件。 首先看看GridView继承关系：

       

java.lang.Object
↳	android.view.View
	↳	android.view.ViewGroup
		↳	android.widget.AdapterView<T extends android.widget.Adapter>
			↳	android.widget.AbsListView
				↳	android.widget.GridView

     我们知道ListView有单选模式和多选模式[AbsListView.setChoiceMode(AbsListView.CHOICE_MODE_SINGLE/AbsListView.CHOICE_MODE_MULTIPLE_MODAL)]

     那么GridView也支持多选模式。

     废话不多说，相信你也知道！贴代码吧

主布局文件：main.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.   
6.     <GridView  
7.         android:id="@+id/gridview"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:columnWidth="75dip"  
11.         android:gravity="center"  
12.         android:horizontalSpacing="2dip"  
13.         android:numColumns="4"  
14.         android:verticalSpacing="2dip" />  
15.   
16. </LinearLayout>  

主Activity：HomeActivity

[java]  view plain copy

1. package com.xyz.gridview;  
2.   
3. import java.util.HashMap;  
4. import java.util.Map;  
5. import java.util.Set;  
6.   
7. import android.app.Activity;  
8. import android.content.Context;  
9. import android.os.Bundle;  
10. import android.view.ActionMode;  
11. import android.view.LayoutInflater;  
12. import android.view.Menu;  
13. import android.view.MenuItem;  
14. import android.view.View;  
15. import android.view.ViewGroup;  
16. import android.widget.AbsListView.LayoutParams;  
17. import android.widget.AbsListView.MultiChoiceModeListener;  
18. import android.widget.BaseAdapter;  
19. import android.widget.Checkable;  
20. import android.widget.FrameLayout;  
21. import android.widget.GridView;  
22. import android.widget.ImageView;  
23. import android.widget.ListAdapter;  
24. import android.widget.TextView;  
25.   
26. public class HomeActivity extends Activity implements MultiChoiceModeListener {  
27.   
28.     private GridView mGridView;  
29.     private GridAdapter mGridAdapter;  
30.     private TextView mActionText;  
31.     private static final int MENU_SELECT_ALL = 0;  
32.     private static final int MENU_UNSELECT_ALL = MENU_SELECT_ALL + 1;  
33.     private Map<Integer, Boolean> mSelectMap = new HashMap<Integer, Boolean>();  
34.   
35.     private int[] mImgIds = new int[] { R.drawable.img_1, R.drawable.img_2,  
36.             R.drawable.img_3, R.drawable.img_4, R.drawable.img_5,  
37.             R.drawable.img_6, R.drawable.img_7, R.drawable.img_8,  
38.             R.drawable.img_9, R.drawable.img_1, R.drawable.img_2,  
39.             R.drawable.img_3, R.drawable.img_4, R.drawable.img_5,  
40.             R.drawable.img_6, R.drawable.img_7 };  
41.   
42.     /** Called when the activity is first created. */  
43.     @Override  
44.     public void onCreate(Bundle savedInstanceState) {  
45.         super.onCreate(savedInstanceState);  
46.         setContentView(R.layout.main);  
47.   
48.         mGridView = (GridView) findViewById(R.id.gridview);  
49.         mGridView.setChoiceMode(GridView.CHOICE_MODE_MULTIPLE_MODAL);  
50.         mGridAdapter = new GridAdapter(this);  
51.         mGridView.setAdapter(mGridAdapter);  
52.         mGridView.setMultiChoiceModeListener(this);  
53.     }  
54.   
55.     /** Override MultiChoiceModeListener start **/  
56.     @Override  
57.     public boolean onCreateActionMode(ActionMode mode, Menu menu) {  
58.         // TODO Auto-generated method stub  
59.         View v = LayoutInflater.from(this).inflate(R.layout.actionbar_layout,  
60.                 null);  
61.         mActionText = (TextView) v.findViewById(R.id.action_text);  
62.         mActionText.setText(formatString(mGridView.getCheckedItemCount()));  
63.         mode.setCustomView(v);  
64.         getMenuInflater().inflate(R.menu.action_menu, menu);  
65.         return true;  
66.     }  
67.   
68.     @Override  
69.     public boolean onPrepareActionMode(ActionMode mode, Menu menu) {  
70.         // TODO Auto-generated method stub  
71.         menu.getItem(MENU_SELECT_ALL).setEnabled(  
72.                 mGridView.getCheckedItemCount() != mGridView.getCount());  
73.         return true;  
74.     }  
75.   
76.     @Override  
77.     public boolean onActionItemClicked(ActionMode mode, MenuItem item) {  
78.         // TODO Auto-generated method stub  
79.         switch (item.getItemId()) {  
80.         case R.id.menu_select:  
81.             for (int i = 0; i < mGridView.getCount(); i++) {  
82.                 mGridView.setItemChecked(i, true);  
83.                 mSelectMap.put(i, true);  
84.             }  
85.             break;  
86.         case R.id.menu_unselect:  
87.             for (int i = 0; i < mGridView.getCount(); i++) {  
88.                 mGridView.setItemChecked(i, false);  
89.             }  
90.             mSelectMap.clear();  
91.             break;  
92.         }  
93.         return true;  
94.     }  
95.   
96.     @Override  
97.     public void onDestroyActionMode(ActionMode mode) {  
98.         // TODO Auto-generated method stub  
99.         mGridAdapter.notifyDataSetChanged();  
100.     }  
101.   
102.     @Override  
103.     public void onItemCheckedStateChanged(ActionMode mode, int position,  
104.             long id, boolean checked) {  
105.         // TODO Auto-generated method stub  
106.         mActionText.setText(formatString(mGridView.getCheckedItemCount()));  
107.         mSelectMap.put(position, checked);  
108.         mode.invalidate();  
109.     }  
110.   
111.     /** Override MultiChoiceModeListener end **/  
112.   
113.     private String formatString(int count) {  
114.         return String.format(getString(R.string.selection), count);  
115.     }  
116.   
117.     private class GridAdapter extends BaseAdapter {  
118.   
119.         private Context mContext;  
120.   
121.         public GridAdapter(Context ctx) {  
122.             mContext = ctx;  
123.         }  
124.   
125.         @Override  
126.         public int getCount() {  
127.             // TODO Auto-generated method stub  
128.             return mImgIds.length;  
129.         }  
130.   
131.         @Override  
132.         public Integer getItem(int position) {  
133.             // TODO Auto-generated method stub  
134.             return Integer.valueOf(mImgIds[position]);  
135.         }  
136.   
137.         @Override  
138.         public long getItemId(int position) {  
139.             // TODO Auto-generated method stub  
140.             return position;  
141.         }  
142.   
143.         @Override  
144.         public View getView(int position, View convertView, ViewGroup parent) {  
145.             // TODO Auto-generated method stub  
146.             GridItem item;  
147.             if (convertView == null) {  
148.                 item = new GridItem(mContext);  
149.                 item.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,  
150.                         LayoutParams.FILL_PARENT));  
151.             } else {  
152.                 item = (GridItem) convertView;  
153.             }  
154.             item.setImgResId(getItem(position));  
155.             item.setChecked(mSelectMap.get(position) == null ? false  
156.                     : mSelectMap.get(position));  
157.             return item;  
158.         }  
159.     }  
160.   
161. }  

 

     上面用到 GridItem是自己封装的一个类：GridItem.java

[java]  view plain copy

1. package com.xyz.gridview;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.util.Log;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.widget.Checkable;  
9. import android.widget.ImageView;  
10. import android.widget.RelativeLayout;  
11.   
12. public class GridItem extends RelativeLayout implements Checkable {  
13.   
14.     private Context mContext;  
15.     private boolean mChecked;  
16.     private ImageView mImgView = null;  
17.     private ImageView mSelcetView = null;  
18.   
19.     public GridItem(Context context) {  
20.         this(context, null, 0);  
21.     }  
22.   
23.     public GridItem(Context context, AttributeSet attrs) {  
24.         this(context, attrs, 0);  
25.     }  
26.   
27.     public GridItem(Context context, AttributeSet attrs, int defStyle) {  
28.         super(context, attrs, defStyle);  
29.         // TODO Auto-generated constructor stub  
30.         mContext = context;  
31.         LayoutInflater.from(mContext).inflate(R.layout.grid_item, this);  
32.         mImgView = (ImageView) findViewById(R.id.img_view);  
33.         mSelcetView = (ImageView) findViewById(R.id.select);  
34.     }  
35.   
36.     @Override  
37.     public void setChecked(boolean checked) {  
38.         // TODO Auto-generated method stub  
39.         mChecked = checked;  
40.         setBackgroundDrawable(checked ? getResources().getDrawable(  
41.                 R.drawable.background) : null);  
42.         mSelcetView.setVisibility(checked ? View.VISIBLE : View.GONE);  
43.     }  
44.   
45.     @Override  
46.     public boolean isChecked() {  
47.         // TODO Auto-generated method stub  
48.         return mChecked;  
49.     }  
50.   
51.     @Override  
52.     public void toggle() {  
53.         // TODO Auto-generated method stub  
54.         setChecked(!mChecked);  
55.     }  
56.   
57.     public void setImgResId(int resId) {  
58.         if (mImgView != null) {  
59.             mImgView.setBackgroundResource(resId);  
60.         }  
61.     }  
62.   
63. }  

    这个类引用的一个布局：grid_item.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent" >  
5.   
6.     <ImageView  
7.         android:id="@+id/img_view"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:scaleType="fitXY" />  
11.   
12.     <ImageView  
13.         android:id="@+id/select"  
14.         android:layout_width="wrap_content"  
15.         android:layout_height="wrap_content"  
16.         android:layout_alignParentRight="true"  
17.         android:layout_alignParentTop="true"  
18.         android:background="@drawable/icon_choice"  
19.         android:visibility="gone" />  
20.   
21. </RelativeLayout>  

     就这么多啦。左上角的勾，就是控制 ImageView 显示与不显示的问题。

     源码路径：http://download.csdn.net/detail/zhouyuanjing/4916510

    转自：http://blog.csdn.net/zhouyuanjing/article/details/8372686 感谢作者