Android ListView圆角实现

来源：互联网发布：马德华回族知乎编辑：程序博客网时间：2024/05/16 16:17

在android上开发项目，如果仅仅是采用默认的样式可能不是很美观，需要编写响应的样式来使界面美观，在iphone上常用的圆角ListView的实现。

主要的实现思路就是：通过重写ListView中拦截触摸的事件方式，在生成ListView时候根据不同行采用不同的样式。如第一个行，最末一行，和中建行。（特殊的情况下只有一行的时候，四个角均为圆角考虑）。

实现如下：

最后一行为时候，下方两个角为圆角样式如下：

app_list_corner_round_bottom.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient android:startColor="#BFEEFF"           android:endColor="#40B9FF"           android:angle="270"/>     <corners android:bottomLeftRadius="6dip"         android:bottomRightRadius="6dip" /> </shape>

第一行为圆角且仅仅为一条记录使用样式：

app_list_corner_round.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient android:startColor="#BFEEFF"           android:endColor="#40B9FF"           android:angle="270"/>     <corners android:topLeftRadius="6dip"         android:topRightRadius="6dip"         android:bottomLeftRadius="6dip"         android:bottomRightRadius="6dip"/> </shape>

第一行为圆角且有多条记录使用样式：

app_list_corner_round_top.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient android:startColor="#BFEEFF"        android:endColor="#40B9FF"        android:angle="270"/>    <corners android:topLeftRadius="6dip"        android:topRightRadius="6dip"/></shape>

多行记录非第一行和最末一行使用的样式：

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient android:startColor="#BFEEFF"           android:endColor="#40B9FF"           android:angle="270"/> </shape>

重写的ListView

package com.easyway.listview.corner;  import android.content.Context;  import android.util.AttributeSet;  import android.view.MotionEvent;  import android.widget.AdapterView;  import android.widget.ListView;  /** *  圆角ListView *      重写ListView的样式实现相关的样式 *  app_list_corner_round_top.xml *  <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">     <gradient android:startColor="#BFEEFF"          android:endColor="#40B9FF"          android:angle="270"/>     <corners android:topLeftRadius="6dip"         android:topRightRadius="6dip"/> </shape>

* android:shape 配置的是图形的形式，主要包括方形、圆形等，上边代码为方形。
* gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度（90度为上下渐变，0为左右渐变），
* padding节点主要配置上下左右边距，
* corners节点配置四周园角的半径。
*
*
* @Title:
* @Description: 实现TODO
* @Copyright:Copyright (c) 2011
* @Company:易程科技股份有限公司
* @Date:2012-7-16
* @author longgangbai
* @version 1.0
*/

public class CornerListView extends ListView {      public CornerListView(Context context) {          super(context);      }         public CornerListView(Context context, AttributeSet attrs, int defStyle) {          super(context, attrs, defStyle);      }      public CornerListView(Context context, AttributeSet attrs) {          super(context, attrs);      }         /**      * 重写此方式实现不同行的样式不一样      *       */     @Override     public boolean onInterceptTouchEvent(MotionEvent ev) {          switch (ev.getAction()) {          //          case MotionEvent.ACTION_DOWN:                  int x = (int) ev.getX();                  int y = (int) ev.getY();                  //返回记录数据行数                  int itemnum = pointToPosition(x, y);                     if (itemnum == AdapterView.INVALID_POSITION)                          break;                                 else{

       if(itemnum==0){                          if(itemnum==(getAdapter().getCount()-1)){                             setSelector(R.drawable.app_list_corner_round); //仅仅一行记录的样式                          }else{                              setSelector(R.drawable.app_list_corner_round_top); //多行且第一行的样式                          }                      }else if(itemnum==(getAdapter().getCount()-1))  //最后一行的样式                              setSelector(R.drawable.app_list_corner_round_bottom);                      else{                                setSelector(R.drawable.app_list_corner_shape);                      }                  }                  break;          case MotionEvent.ACTION_UP:                  break;          }          return super.onInterceptTouchEvent(ev);      }  }  package com.easyway.listview.corner; import android.content.Context;import android.util.AttributeSet;import android.view.MotionEvent;import android.widget.AdapterView;import android.widget.ListView; /***  圆角ListView*      重写ListView的样式实现相关的样式*  app_list_corner_round_top.xml*  <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <gradient android:startColor="#BFEEFF"        android:endColor="#40B9FF"        android:angle="270"/>    <corners android:topLeftRadius="6dip"        android:topRightRadius="6dip"/></shape>* *  android:shape 配置的是图形的形式，主要包括方形、圆形等，上边代码为方形。*  gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度（90度为上下渐变，0为左右渐变），*  padding节点主要配置上下左右边距，*  corners节点配置四周园角的半径。* ** @Title:* @Description: 实现TODO* @Copyright:Copyright (c) 2011* @Company:易程科技股份有限公司* @Date:2012-7-16* @author  longgangbai* @version 1.0*/public class CornerListView extends ListView {    public CornerListView(Context context) {        super(context);    }     public CornerListView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);    }    public CornerListView(Context context, AttributeSet attrs) {        super(context, attrs);    }     /**     * 重写此方式实现不同行的样式不一样     *     */    @Override    public boolean onInterceptTouchEvent(MotionEvent ev) {        switch (ev.getAction()) {        //        case MotionEvent.ACTION_DOWN:                int x = (int) ev.getX();                int y = (int) ev.getY();                //返回记录数据行数                int itemnum = pointToPosition(x, y);                if (itemnum == AdapterView.INVALID_POSITION)                        break;                               else{                if(itemnum==0){                        if(itemnum==(getAdapter().getCount()-1)){                                   setSelector(R.drawable.app_list_corner_round); //仅仅一行记录的样式                        }else{                            setSelector(R.drawable.app_list_corner_round_top); //多行且第一行的样式                        }                }else if(itemnum==(getAdapter().getCount()-1))  //最后一行的样式                        setSelector(R.drawable.app_list_corner_round_bottom);                else{                                setSelector(R.drawable.app_list_corner_shape);                }                }                break;        case MotionEvent.ACTION_UP:                break;        }        return super.onInterceptTouchEvent(ev);135    }136}

主要布局类main.xml

<?xml version="1.0" encoding="utf-8"?> 

02<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

03    android:layout_width="fill_parent" 

04    android:id="@+id/listview_layout" 

05    android:layout_height="fill_parent" 

06    android:orientation="vertical" > 

07

08    <LinearLayout 

09        android:id="@+id/linearLayout1" 

10        android:layout_width="match_parent" 

11        android:layout_height="wrap_content" 

12        android:orientation="vertical" 

13        android:paddingBottom="5dp" 

14        android:paddingLeft="25dp" 

15        android:paddingTop="15dp" > 

16

17        <TextView 

18            android:id="@+id/menu_1" 

19            android:layout_width="wrap_content" 

20            android:layout_height="wrap_content" 

21            android:text="@string/setting" 

22            android:textColor="@color/gray" /> 

23    </LinearLayout> 

24

25    <com.easyway.listview.corner.CornerListView 

26        android:id="@+id/list1" 

27        android:layout_width="fill_parent" 

28        android:layout_height="wrap_content" 

29        android:layout_marginLeft="15dp" 

30        android:layout_marginRight="15dp" 

31        android:background="@drawable/shape_bg_listview" 

32        android:cacheColorHint="@null"/> 

33

34</LinearLayout> 

35

36<?xml version="1.0" encoding="utf-8"?>

37<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

38    android:layout_width="fill_parent"

39    android:id="@+id/listview_layout"

40    android:layout_height="fill_parent"

41    android:orientation="vertical" >

42

43    <LinearLayout

44        android:id="@+id/linearLayout1"

45        android:layout_width="match_parent"

46        android:layout_height="wrap_content"

47        android:orientation="vertical"

48        android:paddingBottom="5dp"

49        android:paddingLeft="25dp"

50        android:paddingTop="15dp" >

51

52        <TextView

53            android:id="@+id/menu_1"

54            android:layout_width="wrap_content"

55            android:layout_height="wrap_content"

56            android:text="@string/setting"

57            android:textColor="@color/gray" />

58    </LinearLayout>

59

60    <com.easyway.listview.corner.CornerListView

61        android:id="@+id/list1"

62        android:layout_width="fill_parent"

63        android:layout_height="wrap_content"

64        android:layout_marginLeft="15dp"

65        android:layout_marginRight="15dp"

66        android:background="@drawable/shape_bg_listview"

67        android:cacheColorHint="@null"/>

</LinearLayout> 每行的布局

<?xml version="1.0" encoding="utf-8"?> 

02<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

03    android:layout_width="match_parent" 

04    android:layout_height="match_parent" 

05    android:orientation="vertical" > 

06

07    <RelativeLayout 

08        android:id="@+id/relativeLayout1" 

09        android:layout_width="match_parent" 

10        android:layout_height="wrap_content" 

11        android:paddingBottom="10dip" 

12        android:paddingLeft="15dip" 

13        android:paddingRight="5dip" 

14        android:paddingTop="10dip" > 

15

16        <TextView 

17            android:id="@+id/item_title" 

18            android:layout_width="wrap_content" 

19            android:layout_height="wrap_content" 

20            android:layout_alignParentLeft="true" 

21            android:layout_alignParentTop="true" 

22            android:textColor="@color/gray" 

23            android:textSize="15sp" /> 

24

25        <ImageView 

26            android:id="@+id/imageView1" 

27            android:layout_width="wrap_content" 

28            android:layout_height="wrap_content" 

29            android:layout_alignParentRight="true" 

30            android:layout_centerVertical="true" 

31            android:layout_marginRight="16dp" 

32            android:src="@drawable/right" /> 

33

34    </RelativeLayout> 

35

36</LinearLayout> 

37

38<?xml version="1.0" encoding="utf-8"?>

39<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

40    android:layout_width="match_parent"

41    android:layout_height="match_parent"

42    android:orientation="vertical" >

43

44    <RelativeLayout

45        android:id="@+id/relativeLayout1"

46        android:layout_width="match_parent"

47        android:layout_height="wrap_content"

48        android:paddingBottom="10dip"

49        android:paddingLeft="15dip"

50        android:paddingRight="5dip"

51        android:paddingTop="10dip" >

52

53        <TextView

54            android:id="@+id/item_title"

55            android:layout_width="wrap_content"

56            android:layout_height="wrap_content"

57            android:layout_alignParentLeft="true"

58            android:layout_alignParentTop="true"

59            android:textColor="@color/gray"

60            android:textSize="15sp" />

61

62        <ImageView

63            android:id="@+id/imageView1"

64            android:layout_width="wrap_content"

65            android:layout_height="wrap_content"

66            android:layout_alignParentRight="true"

67            android:layout_centerVertical="true"

68            android:layout_marginRight="16dp"

69            android:src="@drawable/right" />

70

71    </RelativeLayout>

72

73</LinearLayout>

主要类：

package com.easyway.listview.corner;  02   03import java.util.ArrayList;  import java.util.HashMap;     import android.app.Activity;  import android.os.Bundle;  import android.view.View;  import android.widget.AdapterView;  import android.widget.AdapterView.OnItemClickListener;  import android.widget.LinearLayout;  import android.widget.SimpleAdapter;  /** * Android实现圆角ListView示例 *          实现圆角ListView原理主要采用添加相关的样式布局。 *          通过重写ListView中特定的方法 *              拦截触摸事件的方法。 *              public boolean onInterceptTouchEvent(MotionEvent ev)  *              根据横轴坐标计算行数，并实现 *             * @Title:  * @Description: 实现TODO * @Copyright:Copyright (c) 2011 * @Company:易程科技股份有限公司 * @Date:2012-7-16 * @author  longgangbai * @version 1.0 */ public class RoundCornerActivity extends Activity {      private CornerListView cornerListView = null;      private ArrayList<HashMap<String, String>> maplist = null;     private LinearLayout linearLayout;      /** Called when the activity is first created. */     @Override     public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          //设置布局          setContentView(R.layout.main);          //获取布局对象          linearLayout=(LinearLayout)findViewById(R.id.listview_layout);          //设置壁纸为背景图片          linearLayout.setBackgroundDrawable(getWallpaper());          //获取初始化数据          maplist=getData();          //创建一个适配器对象          SimpleAdapter adapter1 = new SimpleAdapter(this, maplist,                  R.layout.simple_list_item_1, new String[] { "item" },                  new int[] { R.id.item_title });          //创建ListView对象          cornerListView = (CornerListView) findViewById(R.id.list1);          //设置适配器          cornerListView.setAdapter(adapter1);          initListener();      }      private void initListener() {          //添加响应时间          cornerListView.setOnItemClickListener(new OnItemClickListener() {                 @Override             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,                      long arg3) {                  if (arg2 == 0) {                      System.out.println("0");                  }else{                      System.out.println("1");                  }              }          });      }         /**      * 模拟数据      * @return      */     public ArrayList<HashMap<String, String>> getData() {             maplist = new ArrayList<HashMap<String, String>>();          HashMap<String, String> map1 = new HashMap<String, String>();          HashMap<String, String> map2 = new HashMap<String, String>();          HashMap<String, String> map3 = new HashMap<String, String>();         HashMap<String, String> map4 = new HashMap<String, String>();          map1.put("item", "公交");          map2.put("item", "火车");          map3.put("item", "地铁");          map4.put("item", "航空");          maplist.add(map1);          maplist.add(map2);          maplist.add(map3);          maplist.add(map4);          return maplist;      }     }