Android学习系列(14)--App列表之圆角ListView

有些东西看多了，就厌烦了：extjs对我这种感觉最为强烈。甚至，有时觉得设计之殇是审美疲劳。

直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了...

今天我们就实现一个圆角的ListView效果。

圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。 

1.感觉

实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。

所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。

先让我们来看两张图片：


  


左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面。

ps:上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的。

2.原理

通过判断ListView上点击的项的位置，我们切换不同的选择器，当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。

3.定义选择器

如果只有一项，我们需要四个角都是圆角，app_list_corner_round.xml文件定义如下：

如果是顶部第一项，则上面两个角为圆角，app_list_corner_round_top.xml定义如下：

如果是底部最后一项，则下面两个角为圆角，app_list_corner_round_bottom.xml定义如下：

如果是中间项，则应该不需要圆角， app_list_corner_shape.xml定义如下：

4.背景图片

因为默认
11308
的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png：



在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域。

5. 初步实现

参考前面提供的素材和核心代码，我们初步实现如下:
(1).自定义CornerListView.java:

这个CornerListView主要处理了点击项的选择器的切换。
(2).列表布局文件和列表项布局文件：

列表布局文件main_tab_setting.xml：

列表项布局文件main_tab_setting_list_item.xml：

(3)界面实现

显示界面SettingTabActivity.java:

(4).效果图

通过以上实现，我们基本达到了圆角的ListView的效果：