Android入门第八篇之GridView(九宫图)

时间:09-09-18 栏目:安卓入门与提高作者:张飞不张，文采横飞评论:119 点击: 60,645 次

本文标签： Android入门

本文来自http://blog.csdn.net/hellogv/

GridView跟ListView都是比较常用的多控件布局，而GridView更是实现九宫图的首选!本文就是介绍如何使用GridView实现九宫图。GridView的用法很多，网上介绍最多的方法就是自己实现一个ImageAdapter继承BaseAdapter，再供GridView使用，类似这种的方法本文不再重复，本文介绍的GridView用法跟前文ListView的极其类似。。。。也算是我偷懒一下，嘻嘻嘻嘻。。。。

先来贴出本文代码运行的结果：

本文需要添加/修改3个文件：main.xml、night_item.xml、JAVA源代码。

main.xml源代码如下，本身是个GirdView，用于装载Item：

<?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:horizontalSpacing="10dp" android:columnWidth="90dp" android:stretchMode="columnWidth" android:gravity="center" />

介绍一下里面的某些属性：

android:numColumns="auto_fit" ，GridView的列数设置为自动

android:columnWidth="90dp"，每列的宽度，也就是Item的宽度
android:stretchMode="columnWidth"，缩放与列宽大小同步
android:verticalSpacing="10dp"，两行之间的边距，如：行一(NO.0~NO.2)与行二(NO.3~NO.5)间距为10dp
android:horizontalSpacing="10dp"，两列之间的边距。

接下来介绍

night_item.xml，这个XML跟前面ListView的ImageItem.xml很类似：

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:paddingBottom="4dip" android:layout_width="fill_parent"> <ImageView android:layout_height="wrap_content" android:id="@+id/ItemImage" android:layout_width="wrap_content" android:layout_centerHorizontal="true"> </ImageView> <TextView android:layout_width="wrap_content" android:layout_below="@+id/ItemImage" android:layout_height="wrap_content" android:text="TextView01" android:layout_centerHorizontal="true" android:id="@+id/ItemText"> </TextView> </RelativeLayout>

最后就是JAVA的源代码了，也跟前面的ListView的JAVA源代码很类似，不过多了“选中”的事件处理：

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.gridview); //生成动态数组，并且转入数据 ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>(); for(int i=0;i<10;i++) { HashMap<String, Object> map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable.icon);//添加图像资源的ID map.put("ItemText", "NO."+String.valueOf(i));//按序号做ItemText lstImageItem.add(map); } //生成适配器的ImageItem <====> 动态数组的元素，两者一一对应 SimpleAdapter saImageItems = new SimpleAdapter(this, //没什么解释 lstImageItem,//数据来源 R.layout.night_item,//night_item的XML实现 //动态数组与ImageItem对应的子项 new String[] {"ItemImage","ItemText"}, //ImageItem的XML文件里面的一个ImageView,两个TextView ID new int[] {R.id.ItemImage,R.id.ItemText}); //添加并且显示 gridview.setAdapter(saImageItems); //添加消息处理 gridview.setOnItemClickListener(new ItemClickListener()); } //当AdapterView被单击(触摸屏或者键盘)，则返回的Item单击事件 class ItemClickListener implements OnItemClickListener { public void onItemClick(AdapterView<?> arg0,//The AdapterView where the click happened View arg1,//The view within the AdapterView that was clicked int arg2,//The position of the view in the adapter long arg3//The row id of the item that was clicked ) { //在本例中arg2=arg3 HashMap<String, Object> item=(HashMap<String, Object>) arg0.getItemAtPosition(arg2); //显示所选Item的ItemText setTitle((String)item.get("ItemText")); } }

声明: 本文由( 张飞不张，文采横飞 )原创编译，转载请保留链接: Android入门第八篇之GridView(九宫图)

上一篇：进程同步与通信归类备忘
下一篇：java多线程之生产者与消费者问题的简单模拟

Android入门第八篇之GridView(九宫图)：目前有119 条留言

0楼
yicw:

这篇不得不顶啊~~~

2009-09-22 21:08 [回复]
0楼
dyllove98:

得顶呀~~

2010-01-03 17:14 [回复]
0楼
redsky200905:

[e01]

2010-01-11 14:42 [回复]
0楼
匿名用户:

[e01]

2010-01-18 12:12 [回复]
0楼
匿名用户:

[e03]

2010-02-01 14:52 [回复]
0楼
匿名用户:

[e09]

2010-02-01 14:52 [回复]
0楼
bq315505460:

我做了一个单击有问题

2010-02-05 22:09 [回复]
0楼
bq315505460:

又不知道哪里错了

2010-02-05 22:09 [回复]
0楼
hellogv:

回复 bq315505460：
。。。。。。。。。。。。。。。。。。。

2010-02-05 22:35 [回复]
0楼
bq315505460:

回复 hellogv：[e03]
问题解决[e04]

2010-02-05 22:53 [回复]
0楼
匿名用户:

[e01]
太谢谢，兄弟已经憋在这里好几天了。就是不知道那个该死的GirdView怎么能把图像和文字捏到一起。谢谢了！！！！
[e06]

2010-02-27 18:28 [回复]
0楼
匿名用户:

good

多谢了

2010-03-01 16:14 [回复]
0楼
匿名用户:

[e03]

2010-03-03 11:25 [回复]
0楼
huangwuyi:

学习了好帖子谢谢啦
[e01]

2010-03-23 17:23 [回复]
0楼
snakeninny:

[e01][e01][e01]
请教一下，第25行的这个参数arg1有什么作用？能举个例子吗？多谢！
另：我的SDK上怎么找不到这个34行函数onItemClick()的解释啊？

2010-03-23 20:57 [回复]
0楼
匿名用户:

nice[e01]

2010-06-02 13:18 [回复]
0楼
匿名用户:

请问如何将ApiDemos中Grid1类找出来的图片。放到你的数组里？
还有这些图片的Title怎么放进你的说的HashMap中？

2010-06-02 14:50 [回复]
0楼
匿名用户:

怎样通过setBackgroundResource取代那个黄色选中框呢。设置取消焦点等都不行

2010-06-11 21:47 [回复]
0楼
匿名用户:

[e01]

2010-06-22 09:34 [回复]
0楼
匿名用户:

这个很有用。真的帮到我了！[e01]

2010-06-26 17:24 [回复]
0楼
ibc789:

[e03]

2010-07-23 12:57 [回复]
0楼
qigaosheng:

前几个例子都不错，运行也正常，为什么这个例子的到了这句
GridView gridview = (GridView) findViewById(R.id.gridview)就报错啊Cannot cast from View to GridView
main.xml和night_item.xml都没错啊为什么啊[e08]

2010-08-27 15:35 [回复]
0楼
shumei080228:

大爱楼主，谢谢啦

2010-10-11 20:41 [回复]
0楼
shumei080228:

[e01]

2010-10-11 20:41 [回复]
0楼
yiranhan:

如果想设置每张图片不一样怎么办呢，请问？

2010-10-18 04:39 [回复]
0楼
nibaotiao:

[e03]

2010-11-03 10:56 [回复]
0楼
MoroseFingerling:

回复 yiranhan：你可以事先定义一个数组专门存放不同的图片然后再循环装入动态数组中，或者你就别用循环，一个个add 放不同的图片。。。。。

2010-11-03 14:38 [回复]
0楼
xtadwrq:

[e01]

2010-11-10 13:16 [回复]
0楼
yahier:

源代码中有GridView gridview = (GridView) findViewById(R.id.gridview); 但是布局文件中没有啊[e07]

2010-11-15 22:20 [回复]
0楼
yahier:

回复 yahier：[e08] 看到了

2010-11-15 22:27 [回复]
0楼
yahier:

程序在哪里做到的排三个之后转行的呢[e07]

2010-11-16 17:05 [回复]
0楼
yahier:

适配器的最后的两个 new String[] {"ItemImage","ItemText"}, new int[] {R.id.ItemImage,R.id.ItemText}); int数组里面的ItemImage怎么显示出来的的呢哪个代码做的呢[e04] [e07][e07]

2010-11-16 17:07 [回复]
0楼
yahier:

回复 MoroseFingerling：嗯先用数组放图片好

2010-11-16 17:12 [回复]
0楼
fly_binbin:

前几个例子都不错，运行也正常，为什么这个例子的到了这句 GridView gridview = (GridView) findViewById(R.id.gridview)就报错啊Cannot cast from View to GridView main.xml和night_item.xml都没错啊为什么啊我的怎么都转换不过去呢？

2010-11-17 09:59 [回复]
0楼
hellogv:

回复 fly_binbin：
看看添加了GridView这个控件了没有，以及这个控件的ID是否gridview

2010-11-17 10:46 [回复]
0楼
fly_binbin:

控件已经添加，因此才郁闷不知道是什么原因！

2010-11-17 13:14 [回复]
0楼
throat:

奇怪，我的按钮居然是一字排开的，一行一个！[e06][e06]

2010-11-18 17:13 [回复]
0楼
pan168:

回复 throat：android:numColumns="auto_fit"这句写了？

2010-11-23 16:52 [回复]
0楼
SnowGeneral:

标签属性的android:layout_centerHorizontal在api中没有见到，请教是从哪里看到的，我从父类中也看了，没有找到，具体的作用有是什么呢？

2010-11-25 08:57 [回复]
0楼
jordan3321:

朋友。你能实现一个dialog加spinner么.可以加qq讨论么。121393221.十分感谢

2010-12-02 15:28 [回复]
0楼
xiaocai607:

这个如果是从sdk上读取图片怎么办啊？楼主可否知道

2010-12-05 16:36 [回复]
0楼
tenseason:

太好了，正在学习，代码非常精简，[e03]

看某些入门的代码，简直就是误人子弟。

2010-12-07 20:47 [回复]
0楼
tenseason:

上面的例子，用上下左右的箭头，上面的text的内容无法更新

2010-12-08 18:11 [回复]
0楼
yzhang2000:

很好！比用BaseAdapter继承一个类来自己实现强太多，其实ListView也可以照此来做，很好用的，还可以自己扩展很多功能。

2010-12-14 15:55 [回复]
0楼
hugengzong:

[e03]

2010-12-16 17:47 [回复]
0楼
HappyYohn:

[e03]

2011-01-13 15:42 [回复]
0楼
ttgzs:

太好了！必须顶！[e01]

2011-02-09 14:11 [回复]
0楼
BboxDj:

[e01][e03]

2011-02-11 17:08 [回复]
0楼
icoo1985:

[e01]楼主的博文写的很好，很标准的教程[e06]

2011-02-25 10:42 [回复]
0楼
hellneighbor:

我在TabHost里面用到这个，然后设置background=“#FFFFFF”，然后，只有这个是白的，中间的间隔无论怎么设置都是灰色的，请问真么将最底层的背景色也给设置成白色的？

2011-03-10 16:04 [回复]
0楼
bujixiansheng:

[e01]

2011-03-10 21:34 [回复]
0楼
liuting3358:

麻烦 import 的包也发一下把[e01]

2011-03-22 16:41 [回复]
0楼
n70joey:

[e01][e01][e01][e01]

2011-04-01 15:33 [回复]
0楼
Y080Y:

[e01]来学习了.

2011-04-09 22:36 [回复]
0楼
ilovetiandi:

谢谢博主的实例，先把代码贴过去试试再说。

2011-04-17 18:02 [回复]
0楼
zhjie0704:

谢谢楼主分享

2011-04-25 15:46 [回复]
0楼
shaipxiang:

[e01]很好@！！！！！！！！

2011-04-26 09:32 [回复]
0楼
chen3273099:

[e03]

2011-04-28 13:19 [回复]
0楼
chen3273099:

[e03][e02][e03]

2011-04-28 13:20 [回复]
0楼
liuzhidong123:

好啊[e01]

2011-05-13 10:12 [回复]
0楼
ainiyidiandian:

我发现一个问题，就是一行有几个item有的名字是2行，有的是1行，在焦点从此行切换到其他行的时候名字有一行的items会位置变动

2011-05-14 17:19 [回复]
0楼
meng_qing_shan:

很好很实用啊

2011-05-18 17:26 [回复]
0楼
take2008518:

如果要对GridView菜单的每个Item为图片和文字，然后点击的时候换成彩色的图片，当点击另外一个Item时又恢复原来的默认图片，请问一下该如何做呢?

2011-05-27 11:27 [回复]
0楼
q453919025:

哈哈真的挺不错 [e01]

2011-06-14 23:26 [回复]
0楼
yippan:

真不错[e01]

2011-06-27 22:47 [回复]
0楼
oceanZhao:

[code=html]

[/code]

2011-07-13 09:50 [回复]
0楼
aa6109569773:

你真好

2011-07-14 17:03 [回复]
0楼
aa6109569773:

太实用了

2011-07-14 17:04 [回复]
0楼
yiyudemei:

不错，很好的东东

2011-07-15 08:43 [回复]
0楼
Jack_Yang4:

要定义一下GridView gridview=null;不然就报错，还有 gridview.setAdapter(saImageItems);这里出现空指针错误。

2011-08-09 20:39 [回复]
0楼
Jack_Yang4:

为什么我get到的GridView是null呢？求解释。

2011-08-09 21:04 [回复]
0楼
ttzc121:

今天太晚了，明天学一学

2011-08-11 23:59 [回复]
0楼
wedasyshr:

gridview.setAdapter(saImageItems);这里出现空指针错误。

2011-08-16 01:28 [回复]
0楼
agods:

怎么实现这几个Item的无缝衔接啊？

2011-08-16 08:57 [回复]
0楼
hellogv:

[reply]agods[/reply]
把Item的spacing设为0，
gridView.setColumnWidth(itemWidth);
gridView.setNumColumns(GridView.AUTO_FIT);

2011-08-16 12:19 [回复]
0楼
Natepan:

请问博主，gridview.setAdapter(saImageItems);处出现空指针异常主要是什么原因啊？我看见上面几个朋友也是呀。

2011-08-16 21:08 [回复]
0楼
hellogv:

[reply]Natepan[/reply]
lstImageItem 这里必须要有数据

2011-08-16 22:27 [回复]
0楼
agods:

3Q

2011-08-17 10:02 [回复]
0楼
wzy110:

运行不过去啊，空指针错误什么意思？又不是没数据

2011-09-01 23:44 [回复]
0楼
hellogv:

[reply]wzy110[/reply]
本文是编译通过，然后截图结果，再发表的。请按照本文开发的步骤来复制代码….

2011-09-04 13:59 [回复]
0楼
a270724695:

请教下九宫图怎么让GridView里面的控件自动适应(填充)屏幕大小

2011-09-06 10:25 [回复]
0楼
hellogv:

[reply]a270724695[/reply]
Adapter里面的getView()的View自动适应屏幕大小

2011-09-10 11:47 [回复]
0楼
esd2846:

请教一下，根据子元素的宽度怎么设置GridView的宽度的啊。即GridView各行宽度不一致

2011-10-17 21:01 [回复]
0楼
hellogv:

[reply]esd2846[/reply]
GridView的特点是，每个Item的大小都一样的

2011-10-17 23:12 [回复]
0楼
pengmengjiao:

嘻嘻看了不错哦！

2011-11-04 09:57 [回复]
0楼
dengforeverred:

楼主能不能修改上面的代码和添加相关图标资源，实现不同的图标像上面的方式排列呢？

2011-11-07 19:21 [回复]
0楼
hellogv:

[reply]dengforeverred[/reply]
这个不难吧，你自己动手才能学到东西啊，技术是靠别人引导自己动手，而不是直接给的

2011-11-07 22:59 [回复]
0楼
springge:

[reply]liuting3358[/reply]
android的包并不复杂，不会出现导错包的情况。

2011-11-17 14:44 [回复]
0楼
springge:

[reply]Jack_Yang4[/reply]
仔细检查你的代码和楼主的代码阿，别缺这少那的。我们运行都是成功的阿，不要一有错就贴上来问

2011-11-17 14:45 [回复]
0楼
chenhx666666:

请教hellogv大牛，我的GridView中是N幅jpg图片，想得到的效果是每次点击一个图片，满足一定的条件之后它会消失。为此使用了setOnItemClickListener，但是怎么来重画这个GridView呢？
非常感谢～～

2011-11-30 00:14 [回复]
0楼
hellogv:

[reply]chenhx666666[/reply]
通过Adapter来改变Item的样式

2011-11-30 15:34 [回复]
0楼
yeahwell:

脚步6

2012-01-25 13:37 [回复]
0楼
wl455624651:

楼主我有个难题，不知道你能帮我解决不？你能做出像美丽说一样的图片错位题效果吗？你下载一个android版本的美丽说应用，然后进入热门，他的图片有错位体效果。请教如何实现？

2012-02-08 10:30 [回复]
0楼
ma:

各种能运行。

2012-02-10 17:32 [回复]
0楼
mikebai:

[reply]wl455624651[/reply]
兄弟问问题都这么牛逼…….
你要诚心问,至少截个图,
就算要下载至少也给个URL.
哎

2012-02-20 21:18 [回复]
0楼
Mary881225:

赞！继续看下去！

2012-03-11 16:07 [回复]
0楼
Mary881225:

楼主好！初学者向你请教个问题。我想做一个MP3音乐播放器：
运行后：
1、一个界面的上方是MP3文件的列表（区域固定，显示多列，有单击事件）
如图所示：

2、下方是一个嵌套很多控件的视图。
如图所示：

想问的是：这个带ListView的整体框架怎么实现？多列怎么实现？能给其中的一列设置监听器吗？怎么设置？

2012-03-11 16:25 [回复]
0楼
Mary881225:

图附不上去，不好意思了。

2012-03-11 16:27 [回复]
0楼
hellogv:

[reply]Mary881225[/reply]
你先判断一下用GRIDVIEW合适，还是LISTVIEW合适

2012-03-12 09:20 [回复]
0楼
wu110cheng:

必写的好.必须支持,,

2012-05-04 21:16 [回复]
0楼
mdltsy:

您好我做了一个九宫格但是两行之间间距太大不能在一个页面得上下滑动才能全部显示应该在改一下啊

2012-05-14 16:10 [回复]
0楼
wendaopeng11:

楼主楼主，我要达到单击之后跳转到别的activity应该怎么做呢

2012-05-24 19:59 [回复]
0楼
qianjin0703:

[reply]wendaopeng11[/reply] 在onItemClick()里做就可以了。

2012-05-28 13:42 [回复]
0楼
qianjin0703:

楼主，如果我点击一个ImageView的时候改变图片该怎么做呢

2012-05-28 13:43 [回复]
0楼
gouyingqi:

楼主你好，我照着你的代码做了一个GridView,但是我的图片需要从服务器获得，修改了一下FoR那一段的代码，如下，其中图片的URL已获得，存在ImageURL[]中
[code=java]
for(int i=0;imageURL[i]!=null;i++)
{
//添加书籍图像
InputStream is = null;

try {
System.out.println(imageURL[i]);
URL url = new URL(HttpUtil.BASE_URL+imageURL[i]);
URLConnection conn = url.openConnection();
conn.setDoInput(true);
conn.connect();
is = conn.getInputStream();
} catch (IOException e) {
e.printStackTrace();
}
Bitmap bm=BitmapFactory.decodeStream(is);

HashMap<String, Object> map = new HashMap<String, Object>();
map.put("ItemImage", bm);//添加图像资源的ID
map.put("ItemText", bookName[i]);//按序号做ItemText
lstImageItem.add(map);
}
[/code]
图片无法显示，logcat输出resolveUri failed on bad bitmap uri: android.graphics.drawable.BitmapDrawable@44f3c268
请教如何实现，谢谢

2012-06-05 17:26 [回复]
0楼
hellogv:

[reply]gouyingqi[/reply]
兄弟，你先一步步来，先建个工程，做一下ImageView显示网络工程，再做到GridView里面

2012-06-06 10:53 [回复]
0楼
penglijiang:

学习了谢谢很详细

2012-06-11 17:10 [回复]
0楼
gouyingqi:

[reply]嗯，在其他地方看到重写Adapter类，搞定了。话说Stack OverFlow这个网站貌似很NB，老是搜到这个站的内容，就是英文看得太痛苦[/reply]

2012-06-12 22:24 [回复]
0楼
zoutuo:

不知如何调整gridview内的每个图标的大小，请楼主告知~~谢谢！！

2012-07-03 14:16 [回复]
0楼
zoutuo:

知道了，是在night_item.xml中设置

2012-07-03 14:28 [回复]
0楼
guolong2008:

楼主很牛啊

2012-07-04 15:44 [回复]
0楼
zhangke19891001:

此贴不顶，天理难容

2012-07-14 11:30 [回复]
0楼
android_0999:

顶是必须的！
只不过还有问题想请教楼主，我想在gridview中加一个动画效果，加到每一个选中的位置上，但是不知道怎么引用hashmap中的数据….望指教~

2012-07-16 10:01 [回复]
0楼
gycxgycx:

楼主你好，我看了你几篇gridview的帖子，另外一篇从数据库读数据的只把gridview作为分页用，我想知道怎么把数据库的数据读到gridview里显示，而不是显示在textview里……

2012-07-17 12:56 [回复]
0楼
WoShaVWu:

楼主给的源代码里图片都是用的同一张图片
但我想显示出不同的图片能通过数组解决吗怎么改啊谢谢~
并且附的文字信息如果没有规律的话用数组能解决吗

2012-07-25 10:03 [回复]
0楼
tarofriend:

顶！

2012-07-28 10:11 [回复]
0楼
SBzhanghuimin:

我想请教一下ItemClickListener的回调函数中后两个参数是不是总是一致的？

2012-08-08 16:03 [回复]
0楼
jzp12:

请教，现在示例是columnWidth是90dp，即默认focus到某个item时的背景宽度也是90dp，如果我想实现focus到某个item时有个方框将此item包围在内部，即此方框的宽度要大于90dp，怎么实现？

2012-08-12 14:35 [回复]
0楼
harhart:

看了樓主的介紹，樓主是牛人。代碼收了。

2012-08-17 15:57 [回复]

Android入门第八篇之GridView(九宫图)

Android入门第八篇之GridView(九宫图)：目前有119 条留言

发表评论

QQ群互动

魔豆的Linux内核之路

优秀工程师当看优秀书籍

赞助商广告

热门标签

赞助魔豆博主

最新评论