码迷，mamicode.com
首页 > 移动开发 > 详细

android自定义listview实现圆角

时间：2014-06-21 14:49:30      阅读：380      评论：0      收藏：0      [点我收藏+]

标签：android   style   class   blog   java   http   

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

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  3.        android:shape="rectangle"  
  4.        >  
  5.          
  6.       <!-- 渐变 -->   
  7.        <gradient    
  8.        android:startColor="#B5E7B8"    
  9.        android:endColor="#76D37B"    
  10.        android:angle="270"   
  11.        />  
  12.          
  13.       <!-- 描边 -->   
  14.       <!--  <stroke android:width="1dip"       
  15.        android:color="@color/blue"   
  16.        />  -->  
  17.          
  18.       <!-- 实心 -->  
  19.       <!--  <solid android:color="#FFeaeaea"  
  20.        />  -->  
  21.          
  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 plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  3.        android:shape="rectangle"  
  4.        >  
  5.          
  6.       <!-- 渐变 -->   
  7.        <gradient    
  8.        android:startColor="#B5E7B8"    
  9.        android:endColor="#76D37B"    
  10.        android:angle="270"   
  11.        />  
  12.          
  13.       <!-- 描边 -->   
  14.       <!--  <stroke android:width="1dip"       
  15.        android:color="@color/blue"   
  16.        />  -->  
  17.          
  18.       <!-- 实心 -->  
  19.       <!--  <solid android:color="#FFeaeaea"  
  20.        />  -->  
  21.          
  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 plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  3.        android:shape="rectangle"  
  4.        >  
  5.          
  6.   
  7.        <gradient    
  8.        android:startColor="#B5E7B8"    
  9.        android:endColor="#76D37B"    
  10.        android:angle="270"   
  11.        />  
  12.           
  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"   
  21.         
  22.        />  
  23. </shape>   


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

 

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  3.        android:shape="rectangle"  
  4.        >  
  5.          
  6.   
  7.        <gradient    
  8.        android:startColor="#B5E7B8"    
  9.        android:endColor="#76D37B"    
  10.        android:angle="270"   
  11.        />  
  12.           
  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"   
  21.         
  22.        />  
  23. </shape>   


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

 

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"   
  3.        android:shape="rectangle"  
  4.        >  
  5.          
  6.   
  7.        <gradient    
  8.        android:startColor="#B5E7B8"    
  9.        android:endColor="#76D37B"    
  10.        android:angle="270"   
  11.        />  
  12.           
  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"   
  21.         
  22.        /> -->  
  23. </shape>   


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

 

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

 

[html] view plaincopy
  1. package cn.com.karl.view;  
  2.   
  3. import cn.com.karl.test.R;  
  4. import android.content.Context;  
  5. import android.util.AttributeSet;  
  6. import android.view.MotionEvent;  
  7. import android.widget.AdapterView;  
  8. import android.widget.ListView;  
  9.   
  10. /**  
  11.  * 圆角ListView  
  12.  */  
  13. public class CornerListView extends ListView {  
  14.     public CornerListView(Context context) {  
  15.         super(context);  
  16.     }  
  17.   
  18.     public CornerListView(Context context, AttributeSet attrs, int defStyle) {  
  19.         super(context, attrs, defStyle);  
  20.     }  
  21.   
  22.     public CornerListView(Context context, AttributeSet attrs) {  
  23.         super(context, attrs);  
  24.     }  
  25.   
  26.     @Override  
  27.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  28.         switch (ev.getAction()) {  
  29.         case MotionEvent.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.                 } else if (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.         case MotionEvent.ACTION_UP:  
  54.             break;  
  55.         }  
  56.         return super.onInterceptTouchEvent(ev);  
  57.     }  
  58. }  


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

 

 

[html] view plaincopy
  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" >  
  6.   
  7.     <include layout="@layout/head" />  
  8.   
  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" />  
  16.   
  17. </LinearLayout>  


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

 

 

[html] view plaincopy
  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">    
  5.         
  6.         <RelativeLayout    
  7.             android:layout_width="fill_parent"    
  8.             android:layout_height="50dp"     
  9.             android:gravity="center_horizontal">    
  10.         
  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"/>    
  20.         
  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>    
  30.         
  31.     </LinearLayout>    


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

 

 

[html] view plaincopy
  1. package cn.com.karl.test;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.List;  
  6. import java.util.Map;  
  7.   
  8. import cn.com.karl.view.CornerListView;  
  9. import android.os.Bundle;  
  10. import android.view.View;  
  11. import android.widget.SimpleAdapter;  
  12.   
  13. public class SettingActivity extends BaseActivity {  
  14.   
  15.     private CornerListView cornerListView = null;  
  16.   
  17.     private List<Map<String, String>> listData = null;  
  18.     private SimpleAdapter adapter = null;  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState) {  
  22.         // TODO Auto-generated method stub  
  23.         super.onCreate(savedInstanceState);  
  24.         setContentView(R.layout.setting);  
  25.           
  26.         cornerListView = (CornerListView)findViewById(R.id.setting_list);  
  27.         setListData();  
  28.           
  29.         adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item ,  
  30.                 new String[]{"text"}, new int[]{R.id.tv_system_title});  
  31.                         cornerListView.setAdapter(adapter);  
  32.           
  33.         initHead();  
  34.         btn_leftTop.setVisibility(View.INVISIBLE);  
  35.         tv_head.setText("设置");  
  36.     }  
  37.   
  38.       
  39.     /**  
  40.      * 设置列表数据  
  41.      */  
  42.     private void setListData(){  
  43.         listData = new ArrayList<Map<String,String>>();  
  44.    
  45.         Map<String,String> map = new HashMap<String, String>();  
  46.         map.put("text", "分享");  
  47.         listData.add(map);  
  48.    
  49.         map = new HashMap<String, String>();  
  50.         map.put("text", "检查新版本");  
  51.         listData.add(map);  
  52.    
  53.         map = new HashMap<String, String>();  
  54.         map.put("text", "反馈意见");  
  55.         listData.add(map);  
  56.    
  57.         map = new HashMap<String, String>();  
  58.         map.put("text", "关于我们");  
  59.         listData.add(map);  
  60.    
  61.         map = new HashMap<String, String>();  
  62.         map.put("text", "支持我们，请点击这里的广告");  
  63.         listData.add(map);  
  64.     }  
  65.   
  66. }  


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

 

bubuko.com,布布扣

 

 

bubuko.com,布布扣

android自定义listview实现圆角,布布扣,bubuko.com

android自定义listview实现圆角

标签：android   style   class   blog   java   http   

原文地址：http://www.cnblogs.com/shanshan520/p/3800570.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！