现在的位置: 首页 > 综合 > 正文

App列表之圆角ListView源码

2013年01月12日 ⁄ 综合 ⁄ 共 4279字 ⁄ 字号 小 中 大 ⁄ 评论关闭

转自： http://www.eoeandroid.com/thread-170347-1-1.html

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

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

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

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

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

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

　　先让我们来看两张图片：

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

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

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

  1. 　　if（itemnum==0）{
  2. 　　if（itemnum==（getAdapter（）.getCount（）-1））{
  3. 　　//只有一项
  4. 　　setSelector（R.drawable.app_list_corner_round）；
  5. 　　}else{
  6. 　　//第一项
  7. 　　setSelector（R.drawable.app_list_corner_round_top）；
  8. 　　}
  9. 　　}else if（itemnum==（getAdapter（）.getCount（）-1））
  10. 　　//最后一项
  11. 　　setSelector（R.drawable.app_list_corner_round_bottom）；
  12. 　　else{
  13. 　　//中间一项
  14. 　　setSelector（R.drawable.app_list_corner_shape）；
  15. 　　}

复制代码

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

  1. 　　<?xml version="1.0" encoding="utf-8"?>
  2. 　　<shape xmlns：android="http：//schemas.android.com/apk/res/android">
  3. 　　<gradient android：startColor="#B5E7B8"
  4. 　　android：endColor="#76D37B"
  5. 　　android：angle="270"/>
  6. 　　<corners android：topLeftRadius="4dip"
  7. 　　android：topRightRadius="4dip"
  8. 　　android：bottomLeftRadius="4dip"
  9. 　　android：bottomRightRadius="4dip"/>
  10. 　　</shape>

复制代码

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

  1. 　　<?xml version="1.0" encoding="utf-8"?>
  2. 　　<shape xmlns：android="http：//schemas.android.com/apk/res/android">
  3. 　　<gradient android：startColor="#B5E7B8"
  4. 　　android：endColor="#76D37B"
  5. 　　android：angle="270"/>
  6. 　　<corners android：topLeftRadius="4dip"
  7. 　　android：topRightRadius="4dip"/>
  8. 　　</shape>

复制代码

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

  1. 　　<?xml version="1.0" encoding="utf-8"?>
  2. 　　<shape xmlns：android="http：//schemas.android.com/apk/res/android">
  3. 　　<gradient android：startColor="#B5E7B8"
  4. 　　android：endColor="#76D37B"
  5. 　　android：angle="270"/>
  6. 　　<corners android：bottomLeftRadius="4dip"
  7. 　　android：bottomRightRadius="4dip" />
  8. 　　</shape>

复制代码

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

  1. 　　<?xml version="1.0" encoding="utf-8"？>
  2. 　　<shape xmlns：android="http：//schemas.android.com/apk/res/android">
  3. 　　<gradient android：startColor="#B5E7B8"
  4. 　　android：endColor="#76D37B"
  5. 　　android：angle="270"/>
  6. 　　</shape>

复制代码

　　4.背景图片

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

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

　　5. 初步实现

　　参考前面提供的素材和核心代码，我们初步实现如下：

　　（1）.自定义CornerListView.java：

  1. 　　/**
  2. 　　* 圆角ListView
  3. 　　*/
  4. 　　public class CornerListView extends ListView {
  5. 　　public CornerListView（Context context） {
  6. 　　super（context）；
  7. 　　}
  8. 　　public CornerListView（Context context， AttributeSet attrs， int defStyle） {
  9. 　　super（context， attrs， defStyle）；
  10. 　　}
  11. 　　public CornerListView（Context context， AttributeSet attrs） {
  12. 　　super（context， attrs）；
  13. 　　}
  14. 　　@Override
  15. 　　public boolean onInterceptTouchEvent（MotionEvent ev） {
  16. 　　switch （ev.getAction（）） {
  17. 　　case MotionEvent.ACTION_DOWN：
  18. 　　int x = （int） ev.getX（）；
  19. 　　int y = （int） ev.getY（）；
  20. 　　int itemnum = pointToPosition（x， y）；
  21. 　　if （itemnum == AdapterView.INVALID_POSITION）
  22. 　　break；
  23. 　　else
  24. 　　{
  25. 　　if（itemnum==0）{
  26. 　　if（itemnum==（getAdapter（）.getCount（）-1））{
  27. 　　setSelector（R.drawable.app_list_corner_round）；
  28. 　　}else{
  29. 　　setSelector（R.drawable.app_list_corner_round_top）；
  30. 　　}
  31. 　　}else if（itemnum==（getAdapter（）.getCount（）-1））
  32. 　　setSelector（R.drawable.app_list_corner_round_bottom）；
  33. 　　else{
  34. 　　setSelector（R.drawable.app_list_corner_shape）；
  35. 　　}
  36. 　　}
  37. 　　break；
  38. 　　case MotionEvent.ACTION_UP：
  39. 　　break；
  40. 　　}
  41. 　　return super.onInterceptTouchEvent（ev）；
  42. 　　}
  43. 　　}

复制代码

　　这个CornerListView主要处理了点击项的选择器的切换。

　　（2）.列表布局文件和列表项布局文件：

　　列表布局文件main_tab_setting.xml：

  1. 　　<?xml version="1.0" encoding="utf-8"?>
  2. 　　<LinearLayout xmlns：android="http：//schemas.android.com/apk/res/android"
  3. 　　android：orientation="vertical"
  4. 　　android：layout_width="fill_parent"
  5. 　　android：layout_height="fill_parent">
  6. 　　<com.tianxia.app.floworld.view.CornerListView android：id="@+id/setting_list"
  7. 　　android：layout_width="fill_parent"
  8. 　　android：layout_height="wrap_content"
  9. 　　android：layout_margin="10dip"
  10. 　　android：background="@drawable/app_list_corner_border"
  11. 　　android：cacheColorHint="#00000000">
  12. 　　</com.tianxia.app.floworld. view.CornerListView>
  13. 　　</LinearLayout>

复制代码

　　列表项布局文件main_tab_setting_list_item.xml：

  1. 　　<?xml version="1.0" encoding="utf-8"?>
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）