Gridview表格控件

Gridview表格控件

效果图:

分析:

使用和ListvVew很像,都是经过适配器将数据绑定到控件上

具体步骤如下:

1、创建GridView控件,并指定列数

  android:numColumns="3"

2、创建显示数据项的数据容器,是一个Lauout文件,里面一个ImageView,一个TextView

  上面是ImageView,“小白10”是TextView显示的

3、创建好数据,这里用List来实现

  private List<HashMap<String, Object>> mData;

  mData=new ArrayList<HashMap<String,Object>>();

  然后是创建HashMap

    HashMap<String, Object> map=new HashMap<String, Object>();

       map.put("txt", "小白"+i);   

    map.put("image", images[i]);

    mData.add(map);

4、创建数据适配器,并且将数据绑定到数据适配器

  private SimpleAdapter adapter;

  adapter=new SimpleAdapter(this, mData, R.layout.itemview1,new String[]{"txt","image"}, new int[]{R.id.textView1,R.id.iv_avator});

5、为GridView设置数据适配器

  gridview.setAdapter(adapter);

代码:

fry.Activity01

 1 package fry;
 2
 3 import java.util.ArrayList;
 4 import java.util.HashMap;
 5 import java.util.List;
 6 import java.util.Map;
 7
 8 import com.example.gridView.R;
 9
10 import android.app.Activity;
11 import android.os.Bundle;
12 import android.widget.GridView;
13 import android.widget.SimpleAdapter;
14
15 public class Activity01 extends Activity{
16     private List<HashMap<String, Object>> mData;
17     private GridView gridview;
18     private SimpleAdapter adapter;
19     private int[] images=new int[]{
20             R.drawable.image1,R.drawable.image2,R.drawable.image3,
21             R.drawable.image5,R.drawable.image6,R.drawable.image7,
22             R.drawable.image8,R.drawable.image9,R.drawable.image10,
23             R.drawable.image11,R.drawable.image12,R.drawable.image13,
24             R.drawable.image14,R.drawable.image4
25     };
26
27     @Override
28     protected void onCreate(Bundle savedInstanceState) {
29         // TODO Auto-generated method stub
30         super.onCreate(savedInstanceState);
31         setContentView(R.layout.activity01);
32         gridview=(GridView) findViewById(R.id.gridView1);
33
34         mData=new ArrayList<HashMap<String,Object>>();
35         for(int i=0;i<images.length;i++){
36             HashMap<String, Object> map=new HashMap<String, Object>();
37             map.put("txt", "小白"+i);
38             map.put("image", images[i]);
39             mData.add(map);
40         }
41
42         adapter=new SimpleAdapter(this, mData, R.layout.itemview1,
43                 new String[]{"txt","image"}, new int[]{R.id.textView1,R.id.iv_avator});
44
45         gridview.setAdapter(adapter);
46     }
47 }

主界面

/gridView/res/layout/activity01.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6
 7     <GridView
 8         android:id="@+id/gridView1"
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent"
11         android:numColumns="3"
12         ></GridView>
13
14 </LinearLayout>

创建GridView控件

/gridView/res/layout/itemview1.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:gravity="center_horizontal"
 6     android:orientation="vertical" >
 7
 8     <ImageView
 9         android:id="@+id/iv_avator"
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:src="@drawable/image1" />
13
14     <TextView
15         android:id="@+id/textView1"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:text="小白"
19         />
20
21 </LinearLayout>

创建数据项容器

时间: 2024-10-08 10:29:12

Gridview表格控件的相关文章

使用 Bolt 实现 GridView 表格控件

用 Bolt 实现了一个表格控件: 1. 提供 Insert,Remove,Get,Set 接口,可以为表格增删数据: 2. 通过  ItemClass, ItemSetDataFunc 属性来指定显示数据所用的 itemObj: 3. 不会每个 data 都创建 itemObj 来显示, 只为需要显示的数据创建 itemObj: 4. 提供 AttachItemEvent 接口,可以监听 itemObj 向外发出的事件; 5. 根据屏幕大小,列数可以自适应: 6. 根据屏幕大小,每一列的宽度可

Android入门之GridView(表格控件)

GridView是一个表格控件,可以在每个单元格中显示自定义的View或者字符串.在这里我们要实现一个图标下方有文字的效果. 1.首先我们应自定义布局文件image_text.xml.代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3

最好的Angular2表格控件

最好的Angular2表格控件 现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为

javascript可编辑表格控件 支持全键盘操作

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持 数据显示列,文本编辑列,选择列,下拉列,索引列,删除列 六种列类型 2.支持全键盘操作,自定义键位 包括:列焦点切换,行焦点切换,新建行,数据保存(默认 上,下,左,右 键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器 下载地址:http://files.cnblogs

能在多种前端框架下使用的表格控件

近几年Web前端框架特别流行,比如AngularJS.AngularJS 2.ReactJS.KnockoutJS.VueJS等.表格控件是我们在开发中经常要用到的控件.有没有能够在多种前端控件下都能使用的表格控件?最近研究发现Wijmo中的FlexGrid是一款不错的表格控件,它能支持很多主流的框架.这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用. 一.在纯JavaScript下使用FlexGrid HTML文件: <!DOCTYPE html> <h

ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)

鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html --------------------------------------------------------------------------------------------- 分组表格控件在我们的开发中经常被用到,GroupingGrid分组表格就是在普通表格的基础上,根据某一列的数据显示表格中的数据分组的表格控

【ExtJs】表格控件Grid的增删改查,利用renderer让操作列actioncolumn使用文字而不是图标

在<[ExtJs]与后台数据库交互的带分页表格组件grid的查询>(点击打开链接)中介绍了Grid控件是怎么分页显示的.再加上对此控件内的数据的增加.删除.修改,就真的是大功告成了.此控件的排序,应该在后台的数据库查询语句中增加一条order by语句即可,前台的排序在分页之后,仅能对当前页进行排序,没有什么意义.下面举一个例子来说明,如果对ExtJs的表格控件Grid进行增删改查 一.基本目标 还是在数据库中有一张user表: 然后在网页中,如下图所示,通过增加.编辑.删除按钮能为这个表格控

Silverlight项目笔记5:Oracle归档模式引起的异常&amp;&amp;表格控件绑定按钮

两个问题: (1)Oracle无法连接正常使用,原因是归档日志满了引起异常,最后选择删除归档日志恢复正常. (2)使用silverlight自带的表格绑定按钮竟然无法使用,通过变通绑定数据源集合,把按钮操作作为数据源集合一部分,重新绑定解决. 一.Oracle归档模式产生日志文件引起数据库异常 连接数据库失败,提示监听错误,各种检查监听配置文件,删除再添加监听,无果. sqlplus下重启数据库数据库依然无果,期间碰到多个错误提示: ORA-01034: ORACLE not available

tbl.js div实现的表格控件,完全免费,no jquery

html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚空服务器开发套件”.目前主要支持微软Edge浏览器,Chrome浏览器,其它未测. tbl.js完全免费,可随意修改,欢迎fork. tbl.js支持列表样式,增删改查,全表搜索,分组,分页功能,全表编辑,全行编辑,单选,多选,样式定制. 可以嵌入到各种容器中,比如jquery的dialog,tab