android自定义listview实现圆角

在项目中我们会经常遇到这种圆角效果，因为直角的看起来确实不那么雅观，可能大家会想到用图片实现，试想上中下要分别做三张图片，这样既会是自己的项目增大也会增加内存使用量，所以使用shape来实现不失为一种更好的实现方式。在这里先看一下shape的使用：

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <shapexmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle"
4. >
6. <!--渐变-->
7. <gradient
8. android:startColor="#B5E7B8"
9. android:endColor="#76D37B"
10. android:angle="270"
11. />
13. <!--描边-->
14. <!--<strokeandroid:width="1dip"
15. android:color="@color/blue"
16. />-->
18. <!--实心-->
19. <!--<solidandroid:color="#FFeaeaea"
20. />-->
22. <!--圆角-->
23. <corners
24. android:bottomRightRadius="4dip"
25. android:bottomLeftRadius="4dip"
26. android:topLeftRadius="4dip"
27. android:topRightRadius="4dip"
28. />
29. </shape>

solid：实心，就是填充的意思
android:color指定填充的颜色

gradient：渐变
android:startColor和android:endColor分别为起始和结束颜色，ndroid:angle是渐变角度，必须为45的整数倍。
另外渐变默认的模式为android:type="linear"，即线性渐变，可以指定渐变为径向渐变，android:type="radial"，径向渐变需要指定半径android:gradientRadius="50"。

stroke：描边
android:width="2dp" 描边的宽度，android:color 描边的颜色。

我们还可以把描边弄成虚线的形式，设置方式为：
android:dashWidth="5dp"
android:dashGap="3dp"
其中android:dashWidth表示'-'这样一个横线的宽度，android:dashGap表示之间隔开的距离。

corners：圆角
android:radius为角的弧度，值越大角越圆。

OK，下面开始自定义listview实现圆角的例子：

首先在drawable下定义只有一项的选择器app_list_corner_round.xml：

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <shapexmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle"
4. >
6. <!--渐变-->
7. <gradient
8. android:startColor="#B5E7B8"
9. android:endColor="#76D37B"
10. android:angle="270"
11. />
13. <!--描边-->
14. <!--<strokeandroid:width="1dip"
15. android:color="@color/blue"
16. />-->
18. <!--实心-->
19. <!--<solidandroid:color="#FFeaeaea"
20. />-->
22. <!--圆角-->
23. <corners
24. android:bottomRightRadius="4dip"
25. android:bottomLeftRadius="4dip"
26. android:topLeftRadius="4dip"
27. android:topRightRadius="4dip"
28. />
29. </shape>

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

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <shapexmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle"
4. >
7. <gradient
8. android:startColor="#B5E7B8"
9. android:endColor="#76D37B"
10. android:angle="270"
11. />
13. <!--<strokeandroid:width="1dip"
14. android:color="@color/blue"
15. />-->
16. <!--<solidandroid:color="#FFeaeaea"
17. />-->
18. <corners
19. android:topLeftRadius="4dip"
20. android:topRightRadius="4dip"
22. />
23. </shape>

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

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <shapexmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle"
4. >
7. <gradient
8. android:startColor="#B5E7B8"
9. android:endColor="#76D37B"
10. android:angle="270"
11. />
13. <!--<strokeandroid:width="1dip"
14. android:color="@color/blue"
15. />-->
16. <!--<solidandroid:color="#FFeaeaea"
17. />-->
18. <corners
19. android:bottomRightRadius="4dip"
20. android:bottomLeftRadius="4dip"
22. />
23. </shape>

如果是中间项，则应该不需要圆角， app_list_corner_round_center.xml:

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <shapexmlns:android="http://schemas.android.com/apk/res/android"
3. android:shape="rectangle"
4. >
7. <gradient
8. android:startColor="#B5E7B8"
9. android:endColor="#76D37B"
10. android:angle="270"
11. />
13. <!--<strokeandroid:width="1dip"
14. android:color="@color/blue"
15. />-->
16. <!--<solidandroid:color="#FFeaeaea"
17. />-->
18. <!--<corners
19. android:bottomRightRadius="4dip"
20. android:bottomLeftRadius="4dip"
22. />-->
23. </shape>

listview的背景图片大家可以使用stroke描述，这里我使用了一张9PNG的图片，因为9PNG图片拉伸不失真。

定义好了圆角的shape接下来是自定义listview的实现：

[html] view plain copy

1. packagecn.com.karl.view;
3. importcn.com.karl.test.R;
4. importandroid.content.Context;
5. importandroid.util.AttributeSet;
6. importandroid.view.MotionEvent;
7. importandroid.widget.AdapterView;
8. importandroid.widget.ListView;
10. /**
11. *圆角ListView
12. */
13. publicclassCornerListViewextendsListView{
14. publicCornerListView(Contextcontext){
15. super(context);
16. }
18. publicCornerListView(Contextcontext,AttributeSetattrs,intdefStyle){
19. super(context,attrs,defStyle);
20. }
22. publicCornerListView(Contextcontext,AttributeSetattrs){
23. super(context,attrs);
24. }
26. @Override
27. publicbooleanonInterceptTouchEvent(MotionEventev){
28. switch(ev.getAction()){
29. caseMotionEvent.ACTION_DOWN:
30. intx=(int)ev.getX();
31. inty=(int)ev.getY();
32. intitemnum=pointToPosition(x,y);
33. if(itemnum==AdapterView.INVALID_POSITION)
34. break;
35. else{
36. if(itemnum==0){
37. if(itemnum==(getAdapter().getCount()-1)){
38. //只有一项
39. setSelector(R.drawable.app_list_corner_round);
40. }else{
41. //第一项
42. setSelector(R.drawable.app_list_corner_round_top);
43. }
44. }elseif(itemnum==(getAdapter().getCount()-1))
45. //最后一项
46. setSelector(R.drawable.app_list_corner_round_bottom);
47. else{
48. //中间项
49. setSelector(R.drawable.app_list_corner_round_center);
50. }
51. }
52. break;
53. caseMotionEvent.ACTION_UP:
54. break;
55. }
56. returnsuper.onInterceptTouchEvent(ev);
57. }
58. }

下面看一下列表布局文件setting。xml：

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical">
7. <includelayout="@layout/head"/>
9. <cn.com.karl.view.CornerListView
10. android:id="@+id/setting_list"
11. android:layout_width="fill_parent"
12. android:layout_height="wrap_content"
13. android:layout_margin="10dip"
14. android:background="@drawable/corner_list_bg"
15. android:cacheColorHint="#00000000"/>
17. </LinearLayout>

自定义Listview对应的item文件 main_tab_setting_list_item.xml

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content">
6. <RelativeLayout
7. android:layout_width="fill_parent"
8. android:layout_height="50dp"
9. android:gravity="center_horizontal">
11. <TextView
12. android:id="@+id/tv_system_title"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_alignParentLeft="true"
16. android:layout_centerVertical="true"
17. android:layout_marginLeft="10dp"
18. android:text="分享"
19. android:textColor="@color/black"/>
21. <ImageView
22. android:id="@+id/iv_system_right"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:layout_alignParentRight="true"
26. android:layout_centerVertical="true"
27. android:layout_marginRight="10dp"
28. android:src="@drawable/arrow1"/>
29. </RelativeLayout>
31. </LinearLayout>

最后是在activity中填充适配器：

[html] view plain copy

1. packagecn.com.karl.test;
3. importjava.util.ArrayList;
4. importjava.util.HashMap;
5. importjava.util.List;
6. importjava.util.Map;
8. importcn.com.karl.view.CornerListView;
9. importandroid.os.Bundle;
10. importandroid.view.View;
11. importandroid.widget.SimpleAdapter;
13. publicclassSettingActivityextendsBaseActivity{
15. privateCornerListViewcornerListView=null;
17. privateList<Map<String,String>>listData=null;
18. privateSimpleAdapteradapter=null;
20. @Override
21. protectedvoidonCreate(BundlesavedInstanceState){
22. //TODOAuto-generatedmethodstub
23. super.onCreate(savedInstanceState);
24. setContentView(R.layout.setting);
26. cornerListView=(CornerListView)findViewById(R.id.setting_list);
27. setListData();
29. adapter=newSimpleAdapter(getApplicationContext(),listData,R.layout.main_tab_setting_list_item,
30. newString[]{"text"},newint[]{R.id.tv_system_title});
31. cornerListView.setAdapter(adapter);
33. initHead();
34. btn_leftTop.setVisibility(View.INVISIBLE);
35. tv_head.setText("设置");
36. }
39. /**
40. *设置列表数据
41. */
42. privatevoidsetListData(){
43. listData=newArrayList<Map<String,String>>();
45. Map<String,String>map=newHashMap<String,String>();
46. map.put("text","分享");
47. listData.add(map);
49. map=newHashMap<String,String>();
50. map.put("text","检查新版本");
51. listData.add(map);
53. map=newHashMap<String,String>();
54. map.put("text","反馈意见");
55. listData.add(map);
57. map=newHashMap<String,String>();
58. map.put("text","关于我们");
59. listData.add(map);
61. map=newHashMap<String,String>();
62. map.put("text","支持我们，请点击这里的广告");
63. listData.add(map);
64. }
66. }

这样就完成了，虽然过程较繁杂，但是当做一个好的模板以后使用会方便很多，最后看一下实现效果和我们用图片实现的一样吗