App列表之圆角ListView源码

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

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

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

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

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

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

　　先让我们来看两张图片：

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

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

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

`01`	`if（itemnum==0）{`

`02`	`if（itemnum==（getAdapter（）.getCount（）-1））{`

03 　　//只有一项

`04`	`setSelector（R.drawable.app_list_corner_round）;`

05 　　}else{

06 　　//第一项

`07`	`setSelector（R.drawable.app_list_corner_round_top）;`

08 　　}

`09`	`}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文件定义如下：

`01`	`<?xml version="1.0"` `encoding="utf-8"?>`

`02`	`<shape xmlns：android="http：//schemas.android.com/apk/res/android">`

`03`	`<gradient android：startColor="#B5E7B8"`

`04`	`android：endColor="#76D37B"`

`05`	`android：angle="270"/>`

`06`	`<corners android：topLeftRadius="4dip"`

`07`	`android：topRightRadius="4dip"`

`08`	`android：bottomLeftRadius="4dip"`

`09`	`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背景图片的时候，记得把内容区域定义为边框线以内的区域.参考前面提供的素材和核心代码，我们初步实现如下：　　（1）.自定义CornerListView.java：

01 　　/**

`02`	`* 圆角ListView`

03 　　*/

`04`	`public` `class` `CornerListView` `extends` `ListView {`

`05`	`public` `CornerListView（Context context） {`

`06`	`super（context）;`

07 　　}

`08`	`public` `CornerListView（Context context， AttributeSet attrs，int` `defStyle） {`

`09`	`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：

`01`	`<?xml version="1.0"` `encoding="utf-8"?>`

`02`	`<LinearLayout xmlns：android="http：//schemas.android.com/apk/res/android"`

`03`	`android：orientation="vertical"`

`04`	`android：layout_width="fill_parent"`

`05`	`android：layout_height="fill_parent">`

`06`	`<com.tianxia.app.floworld.view.CornerListView android：id="@+id/setting_list"`

`07`	`android：layout_width="fill_parent"`

`08`	`android：layout_height="wrap_content"`

`09`	`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：

`01`	`<?xml version="1.0"` `encoding="utf-8"?>`

`02`	`<RelativeLayout xmlns：android="http：//schemas.android.com/apk/res/android"`

`03`	`android：layout_width="fill_parent"`

`04`	`android：layout_height="fill_parent">`

`05`	`<ImageView android：id="@+id/setting_list_item_arrow"`

`06`	`android：layout_alignParentRight="true"`

`07`	`android：layout_centerVertical="true"`

`08`	`android：layout_width="wrap_content"`

`09`	`android：layout_height="fill_parent"`

`10`	`android：layout_marginLeft="15dip"`

`11`	`android：layout_marginRight="15dip"`

`12`	`android：src="@drawable/appreciate_tab_list_item_arrow_small"/>`

`13`	`<TextView android：id="@+id/setting_list_item_text"`

`14`	`android：layout_toLeftOf="@id/setting_list_item_arrow"`

`15`	`android：layout_width="fill_parent"`

`16`	`android：layout_height="wrap_content"`

`17`	`android：textSize="16dip"`

`18`	`android：textColor="#000000"`

`19`	`android：paddingTop="10dip"`

`20`	`android：paddingBottom="10dip"`

`21`	`android：paddingLeft="10dip"` `/>`

`22`	`</RelativeLayout>`

　　（3）界面实现,显示界面SettingTabActivity.java：

`01`	`public` `class` `SettingTabActivity` `extends` `Activity{`

`02`	`private` `CornerListView cornerListView =null；`

`03`	`private` `List<Map<String，String>> listData =` `null；`

`04`	`private` `SimpleAdapter adapter =null;`

`05`	`@Override`

`06`	`protected` `void` `onCreate（Bundle savedInstanceState） {`

`07`	`super.onCreate（savedInstanceState）;`

`08`	`setContentView（R.layout.main_tab_setting）;`

`09`	`cornerListView = （CornerListView）findViewById（R.id.setting_list）;`

`10`	`setListData（）;`

`11`	`adapter =` `new` `SimpleAdapter（getApplicationContext（）， listData， R.layout.main_tab_setting_list_item ，new` `String[]{"text"}，` `new` `int[]{R.id.setting_list_item_text}）;`

`12`	`cornerListView.setAdapter（adapter）;`

13 　　}

14 　　/**

`15`	`* 设置列表数据`

16 　　*/

`17`	`private` `void` `setListData（）{`

`18`	`listData =` `new` `ArrayList<Map<String，String>>（）;`

`19`	`Map<String，String> map =new` `HashMap<String， String>（）;`

`20`	`map.put（"text"，` `"图库更新"）;`

`21`	`listData.add（map）;`

`22`	`map =` `new` `HashMap<String， String>（）;`

`23`	`map.put（"text"，` `"收藏图片"）;`

`24`	`listData.add（map）;`

`25`	`map =` `new` `HashMap<String， String>（）;`

`26`	`map.put（"text"，` `"下载目录"）;`

`27`	`listData.add（map）;`

28 　　}

29 　　}

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