导读：直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了…
直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了…
今天我们就实现一个圆角的ListView效果。
圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。
1．感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。
先让我们来看两张图片：
左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面.
ps：上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的.
2.原理
通过判断ListView上点击的项的位置，我们切换不同的选择器，当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent（）方法中.
02 | if（itemnum==（getAdapter（）.getCount（）-1））{
|
04 | setSelector（R.drawable.app_list_corner_round）;
|
07 | setSelector（R.drawable.app_list_corner_round_top）;
|
09 | }else if（itemnum==（getAdapter（）.getCount（）-1））
|
11 | setSelector（R.drawable.app_list_corner_round_bottom）;
|
14 | setSelector（R.drawable.app_list_corner_shape）;
|
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" |
06 | <corners
android：topLeftRadius="4dip" |
07 | android：topRightRadius="4dip" |
08 | android：bottomLeftRadius="4dip" |
09 | android：bottomRightRadius="4dip"/>
|
如果是顶部第一项，则上面两个角为圆角，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" |
6 | <corners
android：topLeftRadius="4dip" |
7 | android：topRightRadius="4dip"/>
|
如果是底部最后一项，则下面两个角为圆角，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" |
6 | <corners
android：bottomLeftRadius="4dip" |
7 | android：bottomRightRadius="4dip" />
|
如果是中间项，则应该不需要圆角，
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" |
4.背景图片 因为默认的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png,在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域.参考前面提供的素材和核心代码，我们初步实现如下： （1）.自定义CornerListView.java：
04 | public class CornerListView extends ListView {
|
05 | public CornerListView（Context context） {
|
08 | public CornerListView（Context context， AttributeSet attrs，
int defStyle）
{ |
09 | super（context， attrs，
defStyle）; |
11 | public CornerListView（Context context， AttributeSet attrs） {
|
12 | super（context， attrs）;
|
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） |
26 | if（itemnum==（getAdapter（）.getCount（）-1））{
|
27 | setSelector（R.drawable.app_list_corner_round）;
|
29 | setSelector（R.drawable.app_list_corner_round_top）;
|
31 | }else if（itemnum==（getAdapter（）.getCount（）-1））
|
32 | setSelector（R.drawable.app_list_corner_round_bottom）;
|
34 | setSelector（R.drawable.app_list_corner_shape）;
|
38 | case MotionEvent.ACTION_UP：
|
41 | return super.onInterceptTouchEvent（ev）;
|
这个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> |
列表项布局文件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" />
|
（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; |
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）;
|
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）;
|
17 | private void setListData（）{ |
18 | listData = new ArrayList<Map<String，String>>（）;
|
19 | Map<String，String> map =
new HashMap<String， String>（）;
|
20 | map.put（"text"， "图库更新"）;
|
22 | map = new HashMap<String，
String>（）; |
23 | map.put（"text"， "收藏图片"）;
|
25 | map = new HashMap<String，
String>（）; |
26 | map.put（"text"， "下载目录"）;
|
（4）.效果图
通过以上实现，我们基本达到了圆角的ListView的效果：
