绚丽的ListView表格效果的实现 - 技术文章 - OPhone SDN [OPhon...

http://123.103.97.242/article/show/331;jsessionid=C71DF9368842F30AB4F45CCCBA533AC2

绚丽的ListView表格效果的实现

OPhone平台开发, 2010-10-22 16:32:58

标签 : 表格 ListView

　　简介：
　　在业务系统中经常会用到表格控件去显示数据，但Android自带的ListView控件本身无法实现一种较为美观的表格效果，但我们可以通过其他的方式让ListView表格变得更漂亮。让我们一起来探讨下。

　　我们先来看看以下两幅图：

　　图（一）

　　图（二）

　　很明显，图一比较简洁，而图二看上去明亮耀眼。从用户体验的角度来讲，图二界面效果明显比图一好，那边框是怎么加进去的呢？
　　ListView的adapter我们使用了SimapleAdapter，从上图可以看出ListView的每行包含了许多项，ListView的数据内容我们可以通过构建List以及设置每一项为一个map实现：

1. ArrayList> mylist = newArrayList>(); 　　HashMap map1 = newHashMap(); 　　map1.put("Num", "220503432"); 　　map1.put("Receive", "张三"); 　　map1.put("Payway", "货到付款"); 　　map1.put("TotalPrice", "$98.30"); 　　map1.put("State", "已发货"); 　　map1.put("Date", "2010-09-23"); 　　mylist.add(map1);  

ArrayList> mylist = newArrayList>(); 　　HashMap map1 = newHashMap(); 　　map1.put("Num", "220503432"); 　　map1.put("Receive", "张三"); 　　map1.put("Payway", "货到付款"); 　　map1.put("TotalPrice", "$98.30"); 　　map1.put("State", "已发货"); 　　map1.put("Date", "2010-09-23"); 　　mylist.add(map1);

　　ListView相当于一个显示数据的容器，里面每一行都是一个订单信息，这些行信息我们需要在另外一个XML文件里面定义，具体的表格边框也是在这个XML文件里面实现。下面我们先介ListView中如何实现表格的竖线边框。在Android里面，View是android线条的基础，ListView里面的边框就是用View实现的，ListView里面的内容我们可以用一个xml文件装载ListView的内容，而TableLayout也是不存在边框的，那么下面我们用View在xml文件里面画边框，以下是实现ListView边框的核心代码：

　　数据源以及ListView每行的内容都定义好后，就可以使用SimapleAdapter将ListView、数据内容、每行的定义关联起来，代码如下：

1. SpecialAdapter mSchedule = new SpecialAdapter(this,mylist,R.layout.listview,new String[]{"Num","Receive","Payway","TotalPrice","State","Date"},newint[]{R.id.a07_ls_txtNum,R.id.a07_ls_txtReceive,R.id.a07_ls_txtPayway,R.id.a07_ls_txtTotalPrice,R.id.a07_ls_txtState,R.id.a07_ls_txtDate}; 　　list.setAdapter(mSchedule);  

SpecialAdapter mSchedule = new SpecialAdapter(this,mylist,R.layout.listview,new String[]{"Num","Receive","Payway","TotalPrice","State","Date"},newint[]{R.id.a07_ls_txtNum,R.id.a07_ls_txtReceive,R.id.a07_ls_txtPayway,R.id.a07_ls_txtTotalPrice,R.id.a07_ls_txtState,R.id.a07_ls_txtDate}; 　　list.setAdapter(mSchedule);

　　可能有人看到上面代码中的SpecialAdapter会奇怪这是什么类？不是用SimpleAdapter么？下面会讲解到SpecialAdapter是做什么用的。
　　在Android布局中，基本的5大布局方式是没有边框的，我们通过上面View的方式实现了边框效果，而通常在做一些业务系统的时候客户除了要求在数据列表页面中能以表格的形式呈现数据外还要求能有选中行高亮、单双行颜色交替等比较绚丽的效果，当然这对于用户体验来说是很好的。下面将介绍这两个效果的实现方式。

　　 我们先看一下选中行高亮的效果如图（三）所示：

　　图（三）

　　高亮效果通过设置背景图来实现，实现的代码如下：

1. ListView list=(ListView)this.findViewById(R.id.listview); 　　 Drawabledrawable = getResources().getDrawable(R.drawable.listview_hoverbg); 　　list.setSelector(drawable);  

ListView list=(ListView)this.findViewById(R.id.listview); 　　 Drawabledrawable = getResources().getDrawable(R.drawable.listview_hoverbg); 　　list.setSelector(drawable);

　　从图（三）可看出该列表实现了单双行颜色交替效果，其实现就和前面提到的SpecialAdapter有关，SpecialAdapter继承了SimpleAdapter类，SpecialAdapter重写了父类的getView方法，通过对参数position的判断区分单双行，通过对列表单元格每个view的背景色设置从而达到设置整行背景色的效果，代码如下：

1. privateint[] colors = new int[] { 0x30FF0000, 0x300000FF }; 　　@Override 　　public View getView(int position, View convertView, ViewGroup parent) { 　　View view = super.getView(position, convertView, parent); 　　intcolorPos = position % colors.length; 　　if(colorPos==1)   
2. 　　  iew.setBackgroundColor(Color.argb(250, 255  255, 255));    
3. 　　else  
4. 　　  iew.setBackgroundColor(Color.argb(250, 224  243, 250));    
5. 　　return view;     
6. 　　}  

privateint[] colors = new int[] { 0x30FF0000, 0x300000FF }; 　　@Override 　　public View getView(int position, View convertView, ViewGroup parent) { 　　View view = super.getView(position, convertView, parent); 　　intcolorPos = position % colors.length; 　　if(colorPos==1)　　  iew.setBackgroundColor(Color.argb(250, 255  255, 255));　　else　　  iew.setBackgroundColor(Color.argb(250, 224  243, 250));　　return view;　　}

　　SimpleAdapter是一个十分有用的类，不仅仅是数据源适配器，在里面可以取得或者设置每一行的许多信息，如可以获取到每一行每个单元格的控件以及样式等等，在开发绚丽的ListView表格方面是非常有用的和实用的一个类，具有很强的灵活性与扩展性。
　　以上是本人对ListView在表格表现方面的一些遇见，如有不正确的地方还望各位多指教。