注册 登录
> Android

android自定义listview实现圆角

系统 1974 0

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

[html] view plain copy
  1. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < shape xmlns: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. <!-- < stroke android:width = "1dip"
  15. android:color = "@color/blue"
  16. /> -- >
  18. <!--实心-->
  19. <!-- < solid android: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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < shape xmlns: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. <!-- < stroke android:width = "1dip"
  15. android:color = "@color/blue"
  16. /> -- >
  18. <!--实心-->
  19. <!-- < solid android: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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < shape xmlns: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. <!-- < stroke android:width = "1dip"
  14. android:color = "@color/blue"
  15. /> -- >
  16. <!-- < solid android: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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < shape xmlns: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. <!-- < stroke android:width = "1dip"
  14. android:color = "@color/blue"
  15. /> -- >
  16. <!-- < solid android: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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < shape xmlns: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. <!-- < stroke android:width = "1dip"
  14. android:color = "@color/blue"
  15. /> -- >
  16. <!-- < solid android: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. int x =(int)ev.getX();
  31. int y =(int)ev.getY();
  32. int itemnum = 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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < LinearLayout xmlns: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. < include layout = "@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. <? xml version = "1.0" encoding = "utf-8" ?>
  2. < LinearLayout xmlns: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. privateCornerListView cornerListView = null ;
  17. privateList < Map < String ,String > > listData = null ;
  18. privateSimpleAdapter adapter = 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 = new SimpleAdapter(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 = new ArrayList < Map < String ,String > > ();
  45. Map < String ,String > map = new HashMap < String ,String > ();
  46. map.put("text","分享");
  47. listData.add(map);
  49. map = new HashMap < String ,String > ();
  50. map.put("text","检查新版本");
  51. listData.add(map);
  53. map = new HashMap < String ,String > ();
  54. map.put("text","反馈意见");
  55. listData.add(map);
  57. map = new HashMap < String ,String > ();
  58. map.put("text","关于我们");
  59. listData.add(map);
  61. map = new HashMap < String ,String > ();
  62. map.put("text","支持我们，请点击这里的广告");
  63. listData.add(map);
  64. }
  66. }

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

android自定义listview实现圆角



android自定义listview实现圆角


android自定义listview实现圆角


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论