简介:

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

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

  图(一)

  图(二)

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




1.   ArrayList<HashMap<String, String>> mylist = newArrayList<HashMap<String, String>>();    
2. HashMap<String, String> map1 = newHashMap<String, String>();       
3. map1.put("Num" ,  "220503432" );    
4. map1.put("Receive" ,  "张三" );    
5. map1.put("Payway" ,  "货到付款" );       
6. map1.put("TotalPrice" ,  "$98.30" );    
7. map1.put("State" ,  "已发货" );    
8. map1.put("Date" ,  "2010-09-23" );    
9. mylist.add(map1);


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





1. <TableLayoutandroid:idTableLayoutandroid:id= "@+id/a07_ls_rlo"     
2. android:layout_width="wrap_content"     
3. xmlns:android="http://schemas.android.com/apk/res/android"     
4. android:layout_height="wrap_content" >    
5. <TableRow>    
6. <View style="@style/view2"  />    
7. <TextView    
8. style="@style/txtNolinkleft"     
9. android:id="@+id/a07_ls_txtYF" />    
10. <View style="@style/view2"  />    
11. <TextView    
12. style="@style/txtNolinkright"     
13. android:layout_width="80dip"     
14. android:gravity="center"     
15. android:id="@+id/a07_ls_txtXXSR" />    
16. <View style="@style/view2"  />    
17. <TextView    
18. style="@style/txtNolinkright"     
19. android:layout_width="100dip"     
20. android:gravity="center"     
21. android:id="@+id/a07_ls_txtYNSE" />    
22. <View style="@style/view2"  />    
23. <TextView    
24. style="@style/txtNolinkright"     
25. android:layout_width="80dip"     
26. android:id="@+id/a07_ls_txtSNSE" />    
27. <View style="@style/view2"  />    
28. <TextView    
29. style="@style/txtNolinkleft"     
30. android:layout_width="92dip"     
31. android:gravity="center"     
32. android:id="@+id/a07_ls_txtSBRQ" />    
33. <View style="@style/view2"  />    
34. <TextView    
35. style="@style/txtNolinkleft"     
36. android:layout_width="92dip"     
37. android:id="@+id/a07_ls_txtJNRQ" />    
38. <View style="@style/view2"  />    
39. <TextView    
40. style="@style/txtNolinkleft"     
41. android:layout_width="80dip"     
42. android:gravity="center"     
43. android:id="@+id/a07_ls_txtSPDM" />    
44. <View style="@style/view2"  />    
45. </TableRow>    
46. </TableLayout>



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





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


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

   我们先看一下选中行高亮的效果如图(三)所示:

  图(三)

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




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


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





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


SimpleAdapter是一个十分有用的类,不仅仅是数据源适配器,在里面可以取得或者设置每一行的许多信息,如可以获取到每一行每个单元格的控件以及样式等等,在开发绚丽的ListView表格方面是非常有用的和实用的一个类,具有很强的灵活性与扩展性。


简介:

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

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

  图(一)

  图(二)

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




1.   ArrayList<HashMap<String, String>> mylist = newArrayList<HashMap<String, String>>();    
2. HashMap<String, String> map1 = newHashMap<String, String>();       
3. map1.put("Num" ,  "220503432" );    
4. map1.put("Receive" ,  "张三" );    
5. map1.put("Payway" ,  "货到付款" );       
6. map1.put("TotalPrice" ,  "$98.30" );    
7. map1.put("State" ,  "已发货" );    
8. map1.put("Date" ,  "2010-09-23" );    
9. mylist.add(map1);



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





1. <TableLayoutandroid:idTableLayoutandroid:id= "@+id/a07_ls_rlo"     
2. android:layout_width="wrap_content"     
3. xmlns:android="http://schemas.android.com/apk/res/android"     
4. android:layout_height="wrap_content" >    
5. <TableRow>    
6. <View style="@style/view2"  />    
7. <TextView    
8. style="@style/txtNolinkleft"     
9. android:id="@+id/a07_ls_txtYF" />    
10. <View style="@style/view2"  />    
11. <TextView    
12. style="@style/txtNolinkright"     
13. android:layout_width="80dip"     
14. android:gravity="center"     
15. android:id="@+id/a07_ls_txtXXSR" />    
16. <View style="@style/view2"  />    
17. <TextView    
18. style="@style/txtNolinkright"     
19. android:layout_width="100dip"     
20. android:gravity="center"     
21. android:id="@+id/a07_ls_txtYNSE" />    
22. <View style="@style/view2"  />    
23. <TextView    
24. style="@style/txtNolinkright"     
25. android:layout_width="80dip"     
26. android:id="@+id/a07_ls_txtSNSE" />    
27. <View style="@style/view2"  />    
28. <TextView    
29. style="@style/txtNolinkleft"     
30. android:layout_width="92dip"     
31. android:gravity="center"     
32. android:id="@+id/a07_ls_txtSBRQ" />    
33. <View style="@style/view2"  />    
34. <TextView    
35. style="@style/txtNolinkleft"     
36. android:layout_width="92dip"     
37. android:id="@+id/a07_ls_txtJNRQ" />    
38. <View style="@style/view2"  />    
39. <TextView    
40. style="@style/txtNolinkleft"     
41. android:layout_width="80dip"     
42. android:gravity="center"     
43. android:id="@+id/a07_ls_txtSPDM" />    
44. <View style="@style/view2"  />    
45. </TableRow>    
46. </TableLayout>


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





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



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

       我们先看一下选中行高亮的效果如图(三)所示:

      图(三)

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




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



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





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



      SimpleAdapter是一个十分有用的类,不仅仅是数据源适配器,在里面可以取得或者设置每一行的许多信息,如可以获取到每一行每个单元格的控件以及样式等等,在开发绚丽的ListView表格方面是非常有用的和实用的一个类,具有很强的灵活性与扩展性。