Android列表之圆角ListView

备注：重点用红色画出

有些东西看多了，就厌烦了：extjs对我这种感觉最为强烈。甚至，有时觉得设计之殇是审美疲劳。
直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：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背景图片的时候，记得把内容区域定义为边框线以内的区域。

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

01

04	public class CornerListView extends ListView {

05

06	public CornerListView(Context context) {

07	super(context);

08

}

09

10	public CornerListView(Context context, AttributeSet attrs, int defStyle) {

11	super(context, attrs, defStyle);

12

}

13

14	public CornerListView(Context context, AttributeSet attrs) {

15	super(context, attrs);

16

}

17

18

@Override

19	public boolean onInterceptTouchEvent(MotionEvent ev) {

20	switch (ev.getAction()) {

21	case MotionEvent.ACTION_DOWN:

22	int x = (int) ev.getX();

23	int y = (int) ev.getY();

24	int itemnum = pointToPosition(x, y);

25

26	if (itemnum == AdapterView.INVALID_POSITION)

27

break;

28

else

29

{

30	if(itemnum==0){

31	if(itemnum==(getAdapter().getCount()-1)){

32	setSelector(R.drawable.app_list_corner_round);

33

}else{

34	setSelector(R.drawable.app_list_corner_round_top);

35

}

36	}else if(itemnum==(getAdapter().getCount()-1))

37	setSelector(R.drawable.app_list_corner_round_bottom);

38

else{

39	setSelector(R.drawable.app_list_corner_shape);

40

}

41

}

42

43

break;

44	case MotionEvent.ACTION_UP:

45

break;

46

}

47	return super.onInterceptTouchEvent(ev);

48

}

49

}

这个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

03	private CornerListView cornerListView = null;

04

05	private List<Map<String,String>> listData = null;

06	private SimpleAdapter adapter = null;

07

08

09

@Override

10	protected void onCreate(Bundle savedInstanceState) {

11	super.onCreate(savedInstanceState);

12	setContentView(R.layout.main_tab_setting);

13

14	cornerListView = (CornerListView)findViewById(R.id.setting_list);

15	setListData();

16

17	adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item , new String[]{"text"}, new int[]{R.id.setting_list_item_text});

18	cornerListView.setAdapter(adapter);

19

}

20

21

24	private void setListData(){

25	listData = new ArrayList<Map<String,String>>();

26

27	Map<String,String> map = new HashMap<String, String>();

28	map.put("text", "图库更新");

29	listData.add(map);

30

31	map = new HashMap<String, String>();

32	map.put("text", "收藏图片");

33	listData.add(map);

34

35	map = new HashMap<String, String>();

36	map.put("text", "下载目录");

37	listData.add(map);

38

}

39

}

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