Android中Listview（二）--圆角listview

今天我们就实现一个圆角的ListView效果。
圆角的设计，我们并不追求到处都用，无处不用，android中有少数界面用直角确实容易显得锋利，和周边界面太过对比而显得不协调，比如大栏目列表，设置等等，而采用圆角实现，则会活泼，轻松的多，也融合的特别好。 

1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。
先让我们来看两张图片：

  

左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面。
ps:上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的。

2.原理
通过判断ListView上点击的项的位置，我们切换不同的选择器，当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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); }

3.定义选择器
如果只有一项，我们需要四个角都是圆角，app_list_corner_round.xml文件定义如下：

?

1 2 3 4 5 6 7 8 9 10

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

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

?

1 2 3 4 5 6 7 8

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

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

?

1 2 3 4 5 6 7 8

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

如果是中间项，则应该不需要圆角， app_list_corner_shape.xml定义如下：

?

1 2 3 4 5 6

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

4.背景图片
因为默认的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png：

在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域。

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

/**   * 圆角ListView   */ 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);      } }

这个CornerListView主要处理了点击项的选择器的切换。
(2).列表布局文件和列表项布局文件：
列表布局文件main_tab_setting.xml：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

<? xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical"      android:layout_width="fill_parent"      android:layout_height="fill_parent">      < com.tianxia.app.floworld.view.CornerListView android:id="@+id/setting_list"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:layout_margin="10dip"          android:background="@drawable/app_list_corner_border"          android:cacheColorHint="#00000000">      </ com.tianxia.app.floworld.view.CornerListView > </ LinearLayout >

列表项布局文件main_tab_setting_list_item.xml：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<? xml version="1.0" encoding="utf-8"?> < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="fill_parent"      android:layout_height="fill_parent">      < ImageView android:id="@+id/setting_list_item_arrow"          android:layout_alignParentRight="true"          android:layout_centerVertical="true"          android:layout_width="wrap_content"          android:layout_height="fill_parent"          android:layout_marginLeft="15dip"          android:layout_marginRight="15dip"          android:src="@drawable/appreciate_tab_list_item_arrow_small"/>      < TextView  android:id="@+id/setting_list_item_text"          android:layout_toLeftOf="@id/setting_list_item_arrow"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:textSize="16dip"          android:textColor="#000000"          android:paddingTop="10dip"          android:paddingBottom="10dip"          android:paddingLeft="10dip" /> </ RelativeLayout >

(3)界面实现
显示界面SettingTabActivity.java:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

public class SettingTabActivity extends Activity{            private CornerListView cornerListView = null ;            private List<Map<String,String>> listData = null ;      private SimpleAdapter adapter = null ;                  @Override      protected void onCreate(Bundle savedInstanceState) {          super .onCreate(savedInstanceState);          setContentView(R.layout.main_tab_setting);                    cornerListView = (CornerListView)findViewById(R.id.setting_list);          setListData();                    adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item , new String[]{ "text" }, new int []{R.id.setting_list_item_text});          cornerListView.setAdapter(adapter);      }            /**       * 设置列表数据       */      private void setListData(){          listData = new ArrayList<Map<String,String>>();                    Map<String,String> map = new HashMap<String, String>();          map.put( "text" , "图库更新" );          listData.add(map);                    map = new HashMap<String, String>();          map.put( "text" , "收藏图片" );          listData.add(map);                    map = new HashMap<String, String>();          map.put( "text" , "下载目录" );          listData.add(map);      } }

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