Android GridView宫格视图（一） 运用--BaseAdapter

GridView宫格视图实践

①　 新建工程
②　 在res/drawable目录下添加名称为a.png---p.png的图片
③　 修改main.xml布局，添加一个GridView、一个ImageView

1. <?xml version="1.0" encoding="utf-8"?>
2. <AbsoluteLayout
3.     android:id="@+id/widget0"
4.     android:layout_width="fill_parent"
5.     android:layout_height="fill_parent"
6.     xmlns:android="http://schemas.android.com/apk/res/android">
7. <GridView
8.     android:id="@+id/grid"
9.     android:layout_width="fill_parent"
10.     android:padding="30dip"
11.     android:columnWidth="52px"
12.     android:layout_height="210px"
13.     android:numColumns="5">
14.     <!-- GridView设置为五列 边距为30pid-->
15. </GridView>
16. <ImageView
17.     android:id="@+id/ImageView_Big"
18.     android:layout_width="wrap_content"
19.     android:layout_height="wrap_content"
20.     android:layout_x="95px"
21.     android:layout_y="250px">
22. </ImageView>
23. </AbsoluteLayout>

复制代码

④　 GridView的定义与实例化

1. /*定义类对象*/
2. private GridView my_gridview;
3. /*从xml中获取UI资源对象*/
4. my_gridview = (GridView) findViewById(R.id.grid);

复制代码

⑤　 GridView的图像内容设置与ImageAdapter

1. /*新建一个自定义的ImageAdapter*/
2. myImageViewAdapter = new ImageAdapter(this);
3. /*为GridView对象设置一个ImageAdapter*/
4. my_gridview.setAdapter(myImageViewAdapter);

复制代码

⑥　 内部类 ImageAdapter，实现了BaseAdapter

1. private class myImageAdapter extends BaseAdapter{
2. @Override
3. public int getCount() {
4. // TODO Auto-generated method stub
5. return 0;
6. }
7. @Override
8. public Object getItem(int position) {
9. // TODO Auto-generated method stub
10. return null;
11. }
12. @Override
13. public long getItemId(int position) {
14. // TODO Auto-generated method stub
15. return 0;
16. }
17. @Override
18. public View getView(int position,
19.                                 View convertView, ViewGroup parent) {
20. // TODO Auto-generated method stub
21. return null;
22. }
23. }

复制代码

⑦　GridView的图片Items点击事件处理

1. /*为GridView添加图片Items点击事件监听器*/
2. my_gridview.setOnItemClickListener(this);
3. @Override
4. public void onItemClick(AdapterView<?> arg0,
5.                                  View arg1, int arg2, long arg3) {
6. // TODO Auto-generated method stub
7. /*点击GridView中图片Items事件处理*/
8. }

复制代码

⑧　GridView移动后选中图片Items的事件处理

1. /*为GridView添加图片Items移动选中事件监听器*/
2. my_gridview.setOnItemSelectedListener(this);
3. @Override
4. public void onItemSelected(AdapterView<?> arg0,
5.                                         View arg1, int arg2,long arg3) {
6. // TODO Auto-generated method stub
7. /*GridView中的图片移动焦点选中时事件处理*/
8. }
9. /*未选中GridView中的图片Items事件处理*/
10. @Override
11. public void onNothingSelected(AdapterView<?> arg0) {
12. // TODO Auto-generated method stub
13. }

-----------------------------具体代码如下--------------------------------

复制代码

⑨　修改mainActivity.java来实现图片点击和图片移动选中的效果

1. package zyf.GridViewTest;
2. /*导入要使用的包*/
3. import android.app.Activity;
4. import android.app.AlertDialog;
5. import android.content.Context;
6. import android.content.DialogInterface;
7. import android.content.DialogInterface.OnClickListener;
8. import android.os.Bundle;
9. import android.view.View;
10. import android.view.ViewGroup;
11. import android.widget.AdapterView;
12. import android.widget.BaseAdapter;
13. import android.widget.GridView;
14. import android.widget.ImageView;
15. public class GridViewTest extends Activity implements
16.                                       GridView.OnItemClickListener,   
17.                                       GridView.OnItemSelectedListener {
18. /** Called when the activity is first created. */
19. /*定义类对象*/
20. private GridView my_gridview;
21. private ImageView big_imageView;
22. private ImageAdapter myImageViewAdapter;
25. /*内部类，实现一个图片适配器*/
26. public class ImageAdapter extends BaseAdapter {
27. /*myContext为上下文*/
28. private Context myContext;
29. /*GridView用来加载图片的ImageView*/
30. private ImageView the_imageView;
31. // 这是图片资源ID的数组
32. private Integer[] mImageIds = {
33.                R.drawable.a, R.drawable.b,R.drawable.c, R.drawable.d,
34.                R.drawable.e, R.drawable.f,R.drawable.g, R.drawable.h,
35.                R.drawable.i, R.drawable.j,R.drawable.k, R.drawable.l,
36.                R.drawable.m, R.drawable.n,R.drawable.o, R.drawable.p
37.                 };
38. /*构造方法*/
39. public ImageAdapter(Context myContext) {
40. // TODO Auto-generated constructor stub
41. this.myContext = myContext;
42. /*传入一个Context，本例中传入的是GridViewTest */
43. }
44. /*返回资源ID数组长度*/
45. @Override
46. public int getCount() {
47. // TODO Auto-generated method stub
48. return mImageIds.length;
49. }
50. /*得到Item*/
51. @Override
52. public Object getItem(int position) {
53. // TODO Auto-generated method stub
54. return position;
55. }
56. /*获取Items的ID*/
57. @Override
58. public long getItemId(int position) {
59. // TODO Auto-generated method stub
60. return position;
61. }
62. 
     
64. //处理gridview的每个item
65. /*获取要显示的View对象*/
66. @Override
67. public View getView(int position,
68.                                   View convertView, ViewGroup parent) {
69. // TODO Auto-generated method stub
70. /*创建一个ImageView*/
71. the_imageView = new ImageView(myContext);
72. // 设置图像源于资源ID。
73. the_imageView.setImageResource(mImageIds[position]);
74. /*使ImageView与边界适应*/
75. the_imageView.setAdjustViewBounds(true);
77. /*设置背景图片的风格*/
78. the_imageView.setBackgroundResource(
79.                                        android.R.drawable.picture_frame);
80. /*返回带有多个图片ID的ImageView*/
81. return the_imageView;
82. }
84. /*自定义获取对应位置的图片ID*/
85. public Integer getcheckedImageIDPostion(int theindex) {
86. return mImageIds[theindex];
87. }
88. }
91. @Override
92. public void onCreate(Bundle savedInstanceState) {
93. super.onCreate(savedInstanceState);
94. /*设置主屏布局*/
95. setContentView(R.layout.main);
96. /*从xml中获取UI资源对象*/
97. my_gridview = (GridView) findViewById(R.id.grid);
98. big_imageView =
99.                        (ImageView) findViewById(R.id.ImageView_Big);
100. /*新建一个自定义的ImageAdapter*/
101. myImageViewAdapter = new ImageAdapter(this);
102. /*为GridView对象设置一个ImageAdapter*/
103. my_gridview.setAdapter(myImageViewAdapter);
104. /*为GridView添加图片Items点击事件监听器*/
105. my_gridview.setOnItemClickListener(this);
106. /*为GridView添加图片Items移动选中事件监听器*/
107. my_gridview.setOnItemSelectedListener(this);
108. }
109. @Override
110. public void onItemClick(AdapterView<?> arg0,
111.                                 View arg1, int arg2, long arg3) {
112. /*点击GridView中图片Items后显示一个AlterDialog提示框*/
113. new AlertDialog.Builder(this)
114.    .setTitle("图片浏览")
115.        /*获得对应的图片并显示*/
116.        .setIcon(myImageViewAdapter.getcheckedImageIDPostion(arg2))
117.        /*添加一个按钮*/
118.    .setPositiveButton("返回", new OnClickListener() {
119. @Override
120. public void onClick(DialogInterface dialog,
121.                                                                 int which) {
122. }
123. /*显示提示框*/
124. }).show();
125. }
126. @Override
127. public void onItemSelected(AdapterView<?> arg0,
128.                                         View arg1, int arg2,long arg3) {
129. // TODO Auto-generated method stub
130. /*GridView中的图片移动焦点选中时，
131.          *下面的大图ImageView显示相应的大图片*/
132. big_imageView.setImageResource(myImageViewAdapter
133. .getcheckedImageIDPostion(arg2));
134. }
135. /*未选中GridView中的图片Items事件处理*/
136. @Override
137. public void onNothingSelected(AdapterView<?> arg0) {
138. // TODO Auto-generated method stub
139. }
140. }

复制代码

⑩　结果

2009-5-23 14:39 上传

下载附件 (127.64 KB)