码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2014-08-19 23:50:05      阅读：288      评论：0      收藏：0      [点我收藏+]

标签：android   style   blog   http   java   使用   os   io   

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

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

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

bubuko.com,布布扣

 

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

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

 

[xhtml] view plaincopyprint?
  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. />  

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

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很类似：

 

[xhtml] view plaincopyprint?
  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>  

 

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

 

[java] view plaincopyprint?
    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入门第八篇之GridView(九宫图),布布扣,bubuko.com

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

标签：android   style   blog   http   java   使用   os   io   

原文地址：http://www.cnblogs.com/qufanblog/p/3923219.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！