GridView跟ListView都是比较常用的多控件布局,而GridView更是实现九宫图的首选!本文就是介绍如何使用GridView实现九宫 图。GridView的用法很多,网上介绍最多的方法就是自己实现一个ImageAdapter继承BaseAdapter,再供GridView使用, 类似这种的方法本文不再重复,本文介绍的GridView用法跟前文ListView的极其类似。。。。也算是我偷懒一下,嘻嘻嘻嘻。。。。
先来贴出本文代码运行的结果:
本文需要添加/修改3个文件:main.xml、 night_item.xml、JAVA源代码。
main.xml源代码如下,本身是个 GirdView,用于装载Item:
view plaincopy to clipboardprint?
1.<?xml version="1.0" encoding="utf-8"?>
2.<GridView xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/gridview"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:numColumns="auto_fit"
7. android:verticalSpacing="10dp"
8. android:horizontalSpacing="10dp"
9. android:columnWidth="90dp"
10. android:stretchMode="columnWidth"
11. android:gravity="center"
12./>
<?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 很类似:
view plaincopy to clipboardprint?
1.<?xml version="1.0" encoding="utf-8"?>
2.<RelativeLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_height="wrap_content"
5. android:paddingBottom="4dip" android:layout_width="fill_parent">
6. <ImageView
7. android:layout_height="wrap_content"
8. android:id="@+id/ItemImage"
9. android:layout_width="wrap_content"
10. android:layout_centerHorizontal="true">
11. </ImageView>
12. <TextView
13. android:layout_width="wrap_content"
14. android:layout_below="@+id/ItemImage"
15. android:layout_height="wrap_content"
16. android:text="TextView01"
17. android:layout_centerHorizontal="true"
18. android:id="@+id/ItemText">
19. </TextView>
20.</RelativeLayout>
<?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源代码很类似,不过多了“选中”的事件处理:
view plaincopy to clipboardprint?
1. public void onCreate(Bundle savedInstanceState) {
2. super.onCreate(savedInstanceState);
3. setContentView(R.layout.main);
4. GridView gridview = (GridView) findViewById(R.id.gridview);
5.
6. //生成动态数组,并且转入数据
7. ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();
8. for(int i=0;i<10;i++)
9. {
10. HashMap<String, Object> map = new HashMap<String, Object>();
11. map.put("ItemImage", R.drawable.icon);//添加图像资源的ID
12. map.put("ItemText", "NO."+String.valueOf(i));//按序号做ItemText
13. lstImageItem.add(map);
14. }
15. //生成适配器的ImageItem <====> 动态数组的元素,两者一一对应
16. SimpleAdapter saImageItems = new SimpleAdapter(this, //没什么解释
17. lstImageItem,//数据来源
18. R.layout.night_item,//night_item的XML实现
19.
20. //动态数组与ImageItem对应的子项
21. new String[] {"ItemImage","ItemText"},
22.
23. //ImageItem的XML文件里面的一个ImageView,两个TextView ID
24. new int[] {R.id.ItemImage,R.id.ItemText});
25. //添加并且显示
26. gridview.setAdapter(saImageItems);
27. //添加消息处理
28. gridview.setOnItemClickListener(new ItemClickListener());
29. }
30.
31. //当AdapterView被单击(触摸屏或者键盘),则返 回的Item单击事件
32. class ItemClickListener implements OnItemClickListener
33. {
34.public void onItemClick(AdapterView<?> arg0,//The AdapterView where the click happened
35. View arg1,//The view within the AdapterView that was clicked
36. int arg2,//The position of the view in the adapter
37. long arg3//The row id of the item that was clicked
38. ) {
39. //在本例中arg2=arg3
40. HashMap<String, Object> item=(HashMap<String, Object>) arg0.getItemAtPosition(arg2);
41. //显示所选Item的ItemText
42. setTitle((String)item.get("ItemText"));
43.}
44.
45. }
先来贴出本文代码运行的结果:
本文需要添加/修改3个文件:main.xml、 night_item.xml、JAVA源代码。
main.xml源代码如下,本身是个 GirdView,用于装载Item:
view plaincopy to clipboardprint?
1.<?xml version="1.0" encoding="utf-8"?>
2.<GridView xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/gridview"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:numColumns="auto_fit"
7. android:verticalSpacing="10dp"
8. android:horizontalSpacing="10dp"
9. android:columnWidth="90dp"
10. android:stretchMode="columnWidth"
11. android:gravity="center"
12./>
<?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 很类似:
view plaincopy to clipboardprint?
1.<?xml version="1.0" encoding="utf-8"?>
2.<RelativeLayout
3. xmlns:android="http://schemas.android.com/apk/res/android"
4. android:layout_height="wrap_content"
5. android:paddingBottom="4dip" android:layout_width="fill_parent">
6. <ImageView
7. android:layout_height="wrap_content"
8. android:id="@+id/ItemImage"
9. android:layout_width="wrap_content"
10. android:layout_centerHorizontal="true">
11. </ImageView>
12. <TextView
13. android:layout_width="wrap_content"
14. android:layout_below="@+id/ItemImage"
15. android:layout_height="wrap_content"
16. android:text="TextView01"
17. android:layout_centerHorizontal="true"
18. android:id="@+id/ItemText">
19. </TextView>
20.</RelativeLayout>
<?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源代码很类似,不过多了“选中”的事件处理:
view plaincopy to clipboardprint?
1. public void onCreate(Bundle savedInstanceState) {
2. super.onCreate(savedInstanceState);
3. setContentView(R.layout.main);
4. GridView gridview = (GridView) findViewById(R.id.gridview);
5.
6. //生成动态数组,并且转入数据
7. ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>();
8. for(int i=0;i<10;i++)
9. {
10. HashMap<String, Object> map = new HashMap<String, Object>();
11. map.put("ItemImage", R.drawable.icon);//添加图像资源的ID
12. map.put("ItemText", "NO."+String.valueOf(i));//按序号做ItemText
13. lstImageItem.add(map);
14. }
15. //生成适配器的ImageItem <====> 动态数组的元素,两者一一对应
16. SimpleAdapter saImageItems = new SimpleAdapter(this, //没什么解释
17. lstImageItem,//数据来源
18. R.layout.night_item,//night_item的XML实现
19.
20. //动态数组与ImageItem对应的子项
21. new String[] {"ItemImage","ItemText"},
22.
23. //ImageItem的XML文件里面的一个ImageView,两个TextView ID
24. new int[] {R.id.ItemImage,R.id.ItemText});
25. //添加并且显示
26. gridview.setAdapter(saImageItems);
27. //添加消息处理
28. gridview.setOnItemClickListener(new ItemClickListener());
29. }
30.
31. //当AdapterView被单击(触摸屏或者键盘),则返 回的Item单击事件
32. class ItemClickListener implements OnItemClickListener
33. {
34.public void onItemClick(AdapterView<?> arg0,//The AdapterView where the click happened
35. View arg1,//The view within the AdapterView that was clicked
36. int arg2,//The position of the view in the adapter
37. long arg3//The row id of the item that was clicked
38. ) {
39. //在本例中arg2=arg3
40. HashMap<String, Object> item=(HashMap<String, Object>) arg0.getItemAtPosition(arg2);
41. //显示所选Item的ItemText
42. setTitle((String)item.get("ItemText"));
43.}
44.
45. }
发表评论
-
android:gravity / android:layout_Gravity,android:padding / android:layout_margin
2012-04-07 15:21 1067android:gravity / android:layou ... -
Android触控屏幕Gesture(GestureDetector和SimpleOnGestureListener的使用教程)
2011-11-18 16:51 8181、当用户触摸屏幕的时候,会产生许多手势,例如down,up, ... -
Android ImageView 总结
2011-11-17 17:17 1199一.介绍 ImageView用来显示任意图像图片,可以自己定义 ... -
简述Android触摸屏手势识别
2011-11-16 16:45 923很多时候,利用触摸屏的Fling、Scroll等Gesture ... -
简述Android触摸屏手势识别
2011-11-16 15:49 914在Android系统中,手势的识别是通过 GestureDet ... -
Android TextView属性详解
2011-11-10 17:12 752android:autoLink设置是否当 ... -
android监听返回按钮事件
2011-11-08 18:38 735用户在点击手机的返回按钮时,默认是推出当前的activty,但 ... -
android 完全退出程序
2011-11-08 18:37 728有几个activity,有一需 ... -
Android onTouchEvent, onClick及onLongClick的调用机制
2011-11-07 15:31 899针对屏幕上的一个View控 ... -
Android WebView放大缩小缩放
2011-11-02 10:27 2530一般情况下通过设置一下参数缩放 wv.getSettings ... -
Android控件之ZoomControls缩放控件
2011-11-01 17:14 1080一、简介 ZoomControls是一组可缩放的控件。它 ... -
Android通过手势实现的缩放处理
2011-11-01 17:12 1028主要原理是onTouchEvent事件中的参数MotionEv ... -
TextView 加下划线
2011-10-30 14:10 967如果是在资源文件里,可以这样写. Xml代码 ... -
Android TextView(EditView)文字底部或者中间加横线
2011-10-30 14:08 1634promotionLinkText = (TextView) ... -
TextView中显示HTML和图片
2011-10-30 13:55 1063在TextView中显示<img src="& ... -
Android 背景图片重复 Background repeat
2011-10-29 00:45 3192以LinearLayout为例,它提供的background属 ... -
android 3d 旋转
2011-10-27 16:23 1144在javaeye里看到了关于3d旋转的文章 效果图: 这 ... -
android 之 GridView
2011-10-27 14:14 761GridView 的用法基本与ListView类似。 ... -
android之ImageView
2011-10-26 22:17 963ImageView 首先确定下ImageView的全路径: ... -
布局学习—活用RelativeLayout
2011-10-26 00:40 652前言 Android布局中RelativeLayout非 ...
相关推荐
Android GridView使用例子
android Gridview分页实现的一个小例子
用gridview写的一个小例子 有需要的可以参考一下
Android GridView 点击缩放图像
android gridview分页和滑动效
GridView的点击事件 GridView的点击事件 GridView的点击事件
android gridview多选删除工程,支持同时选定多个item然后删除
Android GridView完美横向滑动 ,并且可限制Gridview显示行数!
Android GridView分页显示
android gridview adapter 实例 每个getview显示不同的数据
Android GridView分组显示、带dock标题,带下拉刷新
android GridView 源代码 根据以下博客制作 http://blog.csdn.net/hellogv/article/details/4567095
android gridview 上图下字
Android下GridView的使用,详情参见博客:http://www.cnblogs.com/plokmju/p/android_GridView.html
一个非常好的 android gridview 异步加载图片的例子,需要17以上的api
Android 单行水平滑动效果,用HorizontalScrollView+GridView 来实现的,点击选中项后,退出再次进入应用,直接跳转到改选中项。
gridview 和listview是android最为常见的两个布局控件。这里是android gridview 简单的示例
该资料讲解了Android GridView设计的相关技巧,包括Gridview空数据处理、单排显示gridview并从解析JSON读取数据等重要技巧
android GridView分组 convertview可重用 可用于 图片相册 日期分组 内存消耗低