在程序中经常会遇到九宫格的样式实现,如下图:

下面我们看看实现的步骤。

1. 一个整体的容器部分。就是上图中包括整个图片项个各个部分,这里我们使用gridView(表格布局)来实现

2.整个界面里需要注意的是 “重复的部分”,就是 各个图片项和,图片下方显示的文字了。那么我们需要描述这个部分。在描述时,要说明图片位于上方,文字位于下方。

3.迭代,或者说重复的将各项 插入(放入)到容器内。

我们看看具体怎么实现。

1.新建一个activity,描述放置我们的容器控件

     < GridView  android:id ="@+id/gridView1"
     android:layout_width ="fill_parent"
     android:numColumns ="auto_fit"
      android:stretchMode ="columnWidth"  
      android:columnWidth ="90dp"
     android:gravity ="center"
      android:layout_height ="fill_parent" >
     </ GridView >

在这里需要关注的属性是columnWidth,这里指定了列的宽度,一个列对象,对应一个 “可重复的子项”,这个子项就是我们 的图片项和图片下方文字显示的部分。如果不指定这个宽度的话,默认是每行(展示的行,界面)仅仅只显示一个 “可重复的子项”,而当指定了宽度时,本文指定为90dp,如果每行实际行尺寸大于90,他就会继续将下一个的“可重复的子项”,放置在本行。于是就呈现一种 一行显示多个子项的情况。numColumns属性,指定一个自动填充的值,指示了自动填充行。

2。指定“可重复的子项”,就是需要迭代显示的部分

新建一个布局文件layout_gridview_item.xml

     < RelativeLayout  android:id ="@+id/relativeLayout1"  
    android:layout_width ="fill_parent"  
    android:layout_height ="wrap_content"  
    xmlns:android ="http://schemas.android.com/apk/res/android" >
         < ImageView  android:id ="@+id/imageView_ItemImage"  
        android:layout_width ="wrap_content"
         android:src ="@drawable/icon"  
         android:layout_height ="wrap_content"  
         android:layout_centerHorizontal ="true"
          >
          </ ImageView >
         < TextView  android:id ="@+id/textView_ItemText"  
        android:text ="TextView"  
        android:layout_width ="wrap_content"
         android:layout_height ="wrap_content"  
         android:layout_below ="@+id/imageView_ItemImage"
         android:layout_centerHorizontal ="true"
           >
           </ TextView >
     </ RelativeLayout >

这里使用了一个相对布局,在TextView 里使用属性android:layout_below="@+id/imageView_ItemImage"
指示了文本在图片的下方。

3.剩下的就是数据绑定了。上代码:

  protected   void  onCreate(Bundle savedInstanceState) {
   //  TODO Auto-generated method stub
   super .onCreate(savedInstanceState);
  
  setContentView(R.layout.layout_main);
  
 
  _gridView1  =  (GridView)findViewById(R.id.gridView1);
  
    ArrayList < HashMap < String,Object >>  lst  =   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);
   map.put( " itemText " ,  " item " + i);
   
   lst.add(map);
  }
  
  SimpleAdapter adpter  =   new  SimpleAdapter( this ,
    lst,R.layout.layout_gridview_item,    
     new  String[]{ " itemImage " , " itemText " },
     new   int []{R.id.imageView_ItemImage,R.id.textView_ItemText});
  
  _gridView1.setAdapter(adpter);
  
  _gridView1.setOnItemClickListener( new  gridView1OnClickListener());
 }

先构建ArrayList作为数据源,在构建SimpleAdapter 作为数据适配器,为gridView指定适配器对象。注意在构建适配器对象的参数,如下:

SimpleAdapter adpter  =   new  SimpleAdapter( this ,
    lst,R.layout.layout_gridview_item,     // 指定 子项的布局文件的ID
     new  String[]{ " itemImage " , " itemText " },  // 指定 数据的列
     new   int []{R.id.imageView_ItemImage,R.id.textView_ItemText});  // 指定数据的列对应到的 绑定的目标控件

那么如何获得选择的项呢?就是上面的gridView1OnClickListener的实现内容如下:

     class  gridView1OnClickListener  implements  OnItemClickListener
    {

public   void  onItemClick(AdapterView <?>  arg0, View arg1,  int  arg2,
                 long  arg3) {
             //  TODO Auto-generated method stub
            Object obj  =  _gridView1.getAdapter().getItem(arg2);
            HashMap < String,Object >  map   =  (HashMap < String,Object > )obj;
            String str  =  (String) map.get( " itemText " );
            
            Toast.makeText(getApplicationContext(),  "" + str,  0 ).show();
        }
        
    }

至此完成。

代码下载

android开发(2) - 九宫格的实现相关推荐

  1. android开发 九宫格,Android开发(2) - 九宫格的实现

    前言 在程序中经常会遇到九宫格的样式实现,如下图: 下面我们看看实现的步骤. 一个整体的容器部分.就是上图中包括整个图片项个各个部分,这里我们使用gridView(表格布局)来实现 2.整个界面里需要 ...

  2. android 最新 九宫格,Android开发中怎么显示一个九宫格图片

    Android开发中怎么显示一个九宫格图片 发布时间:2020-11-21 15:09:33 来源:亿速云 阅读:86 作者:Leah 本篇文章给大家分享的是有关Android开发中怎么显示一个九宫格 ...

  3. Android开发笔记(九)特别的.9图片

    为什么使用.9图片 .9图片的扩展名是png,文件名后常带有".9"字样,因为它把一个png图片划分为3*3的九宫格来分别处理,所以得名.9图片..9.png是Android开发中 ...

  4. Android开发:开源库集合

    开源库大全 目录 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 ViewPager 图表(Chart) 菜单(Men ...

  5. [转] 安卓巴士总结了近百个Android优秀开源项目,覆盖Android开发的每个领域

    Android开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项目,贡献出他们的智慧和创造力.学习开源代码是掌握技术的一个 ...

  6. Android开发必备(干货源码放送大)

    Android源码大放送(实战开发必备) 文件夹 PATH 列表 │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt ...

  7. Android开发开源源代码

    Android经典的开源项目其实非常多,把自己熟悉的一些开源项目整理起来,希望能对Android开发同学们有所帮助 项目篇: 1.Apollo音乐播放器 就一个很好的播放器,但是实现的特别好!!! 地 ...

  8. 分享一下身边朋友自学android开发及找工作的那些事!【不足勿喷】

    写在前面 前不久身边一个朋友突然告诉我他把原来的工作辞掉了,我问他最近在干嘛,他说他最近两个月学了java及android然后花了1周时间找工作,我问他现在怎么样了.他说比不上我们身边这些10K-20 ...

  9. Android开发工具类集合

    各种帮助类汇总:https://github.com/Blankj/AndroidUtilCode 常用的 ios 风格 dialog 和 meterial design 风格的 dialog:htt ...

最新文章

  1. 【FPGA】双端口RAM的设计(同步读写)
  2. 我们需要现在就进入LTE时代
  3. 某网络专业人士笔记(超级珍藏)
  4. Tesseract-OCR 字符识别-样书训练
  5. Tree Reconstruction UVA - 10410
  6. c++ 两个多边形区域重叠_2018 年英国中级数学挑战赛中的多边形问题
  7. Windows Server 2003 DNS服务安装篇
  8. azure服务器_如何使用Blazor WebAssembly实施Azure无服务器
  9. 服务器装哪个操作系统好,服务器装哪个操作系统好
  10. 网易丁磊:中国的安卓分成全世界最贵 比苹果贵20%左右
  11. 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]
  12. php+ctypt+api,RSA-OAEP SHA-512 Encrypt / Decrypt from Javascriptwebcrypt api to PHP openssl?
  13. 传奇开服教程——legend/blue引擎替换和登陆器生成教程
  14. 微信小程序之移动端适配
  15. ios dyld: Library not loaded: @rpath/xxx.framework/xxx 之根本原因
  16. java将小写金额转为大写金额
  17. 在线教育网站如何更好的实现视频安全视频保护?
  18. 飞船打外星人(python)
  19. 体育开展教学测试的工具软件是什么,我国体育教师学科内容知识(CK)测评工具研制及其运用研究...
  20. .Net Core微服务入门——Ocelot API网关接入(一)

热门文章

  1. [转]用 C 语言编写一个网络蜘蛛
  2. java高斯分布_高斯分布的生成
  3. 爬虫笔记——多线程爬取斗图网表情包(threading)
  4. Css弦乐弱音器奏键位,小提琴弱音器的种类及使用方法
  5. 电脑神器- Snipaste(截图神器)+Ditto(剪贴板)推荐篇
  6. Sun认证Java课程
  7. 腾讯宽频的图片新闻效果
  8. 织梦CMS免费已成梦,商用5800元一个站你觉得贵吗?
  9. vs2017出现“Failed to load required native libraries. Have you installed the latest LibVLC packag”解决办法
  10. 1+X Web前端等级考证 | 2020 12月Web前端开发中级实操 (模拟试题第二套) 附答案