Fork me on GitHub

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;
  23. /*内部类,实现一个图片适配器*/
  24. public class ImageAdapter extends BaseAdapter {
  25. /*myContext为上下文*/
  26. private Context myContext;
  27. /*GridView用来加载图片的ImageView*/
  28. private ImageView the_imageView;
  29. // 这是图片资源ID的数组
  30. private Integer[] mImageIds = {
  31.                R.drawable.a, R.drawable.b,R.drawable.c, R.drawable.d,
  32.                R.drawable.e, R.drawable.f,R.drawable.g, R.drawable.h,
  33.                R.drawable.i, R.drawable.j,R.drawable.k, R.drawable.l,
  34.                R.drawable.m, R.drawable.n,R.drawable.o, R.drawable.p
  35.                 };
  36. /*构造方法*/
  37. public ImageAdapter(Context myContext) {
  38. // TODO Auto-generated constructor stub
  39. this.myContext = myContext;
  40. /*传入一个Context,本例中传入的是GridViewTest */
  41. }
  42. /*返回资源ID数组长度*/
  43. @Override
  44. public int getCount() {
  45. // TODO Auto-generated method stub
  46. return mImageIds.length;
  47. }
  48. /*得到Item*/
  49. @Override
  50. public Object getItem(int position) {
  51. // TODO Auto-generated method stub
  52. return position;
  53. }
  54. /*获取Items的ID*/
  55. @Override
  56. public long getItemId(int position) {
  57. // TODO Auto-generated method stub
  58. return position;
  59. }

  60.  
  61. //处理gridview的每个item
  62. /*获取要显示的View对象*/
  63. @Override
  64. public View getView(int position,
  65.                                   View convertView, ViewGroup parent) {
  66. // TODO Auto-generated method stub
  67. /*创建一个ImageView*/
  68. the_imageView = new ImageView(myContext);
  69. // 设置图像源于资源ID。
  70. the_imageView.setImageResource(mImageIds[position]);
  71. /*使ImageView与边界适应*/
  72. the_imageView.setAdjustViewBounds(true);
  73. /*设置背景图片的风格*/
  74. the_imageView.setBackgroundResource(
  75.                                        android.R.drawable.picture_frame);
  76. /*返回带有多个图片ID的ImageView*/
  77. return the_imageView;
  78. }
  79. /*自定义获取对应位置的图片ID*/
  80. public Integer getcheckedImageIDPostion(int theindex) {
  81. return mImageIds[theindex];
  82. }
  83. }
  84. @Override
  85. public void onCreate(Bundle savedInstanceState) {
  86. super.onCreate(savedInstanceState);
  87. /*设置主屏布局*/
  88. setContentView(R.layout.main);
  89. /*从xml中获取UI资源对象*/
  90. my_gridview = (GridView) findViewById(R.id.grid);
  91. big_imageView =
  92.                        (ImageView) findViewById(R.id.ImageView_Big);
  93. /*新建一个自定义的ImageAdapter*/
  94. myImageViewAdapter = new ImageAdapter(this);
  95. /*为GridView对象设置一个ImageAdapter*/
  96. my_gridview.setAdapter(myImageViewAdapter);
  97. /*为GridView添加图片Items点击事件监听器*/
  98. my_gridview.setOnItemClickListener(this);
  99. /*为GridView添加图片Items移动选中事件监听器*/
  100. my_gridview.setOnItemSelectedListener(this);
  101. }
  102. @Override
  103. public void onItemClick(AdapterView<?> arg0,
  104.                                 View arg1, int arg2, long arg3) {
  105. /*点击GridView中图片Items后显示一个AlterDialog提示框*/
  106. new AlertDialog.Builder(this)
  107.    .setTitle("图片浏览")
  108.        /*获得对应的图片并显示*/
  109.        .setIcon(myImageViewAdapter.getcheckedImageIDPostion(arg2))
  110.        /*添加一个按钮*/
  111.    .setPositiveButton("返回", new OnClickListener() {
  112. @Override
  113. public void onClick(DialogInterface dialog,
  114.                                                                 int which) {
  115. }
  116. /*显示提示框*/
  117. }).show();
  118. }
  119. @Override
  120. public void onItemSelected(AdapterView<?> arg0,
  121.                                         View arg1, int arg2,long arg3) {
  122. // TODO Auto-generated method stub
  123. /*GridView中的图片移动焦点选中时,
  124.          *下面的大图ImageView显示相应的大图片*/
  125. big_imageView.setImageResource(myImageViewAdapter
  126. .getcheckedImageIDPostion(arg2));
  127. }
  128. /*未选中GridView中的图片Items事件处理*/
  129. @Override
  130. public void onNothingSelected(AdapterView<?> arg0) {
  131. // TODO Auto-generated method stub
  132. }
  133. }
复制代码

⑩ 结果
图片1.png 
posted @ 2011-02-28 21:21 Greenwood 阅读(...) 评论(...) 编辑 收藏