android ListView实现圆角（两种解决方案）

首先呢，我们还是看几个示图：（这是360推出的一款天气预报APP(墨迹)，很不错的一款哦，这里为她们做一个免费广告，哈哈.）

[java]  view plain copy

1.   

                

这种带有圆角的listview' 看起来很棒吧，确实是这样，其实也不能这么说，主要方形太多了，斯通见惯就不值钱了，“物以稀为贵嘛”. 就好比学java都搞androd，很明显嘛，为了多赚点钱，可是供过于求的话，就不这么乐观了，就好比现在这个圆角，如果太多太多的话，我想若干时间段，肯定会被新的视图所代替.所以“跟随潮流，放宽眼线”很重要.不扯了,（网上实现例子很多）下面简单介绍下实现方法：（两种方法）

第一种：我们通过配置文件也就是shape自己实现圆角的背景，以及selector选中某项的背景.

首先我们要实现一个完整的圆角背景，用于默认与listview的background.

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <stroke  
5.         android:width="1dp"  
6.         android:color="@color/gray" />  
7.   
8.     <solid android:color="@color/white" />  
9.   
10.     <corners android:radius="8dp" />  
11.   
12. </shape>  

接下来我们要实现也就是listview的第一项selector后背景的shape.

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <stroke  
5.         android:width="1dp"  
6.         android:color="@color/gray" />  
7.   
8.     <solid android:color="@color/gray" />  
9.   
10.     <corners  
11.         android:topLeftRadius="8dp"  
12.         android:topRightRadius="8dp" />  
13.   
14. </shape>  

下面呢，我们也要实现中间的shape，以及末尾的shape等等配置.这里就不写了.按照上面模仿就ok了.

第二种方法：我们用.9.png完全代替上面那些配置,（因为.9.png可以拉伸不毁容）

所以listview的第一项，中间项，最后一项，以及就一项，我们都可以通过图片来实现.

这里我运用第一种方法：（也巩固下shape）

创建自定义的listview，用于实现setSelector及选中的效果.

   代码片段：

   

[java]  view plain copy

1. package com.jj.listview;  
2.   
3. import android.content.Context;  
4. import android.util.AttributeSet;  
5. import android.view.MotionEvent;  
6. import android.widget.AdapterView;  
7. import android.widget.ListView;  
8.   
9. /*** 
10.  * 自定义listview 
11.  *  
12.  * @author Administrator 
13.  *  
14.  */  
15. public class MyListView extends ListView {  
16.     public MyListView(Context context) {  
17.         super(context);  
18.     }  
19.   
20.     public MyListView(Context context, AttributeSet attrs) {  
21.         super(context, attrs);  
22.     }  
23.   
24.     /**** 
25.      * 拦截触摸事件 
26.      */  
27.     @Override  
28.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
29.         switch (ev.getAction()) {  
30.         case MotionEvent.ACTION_DOWN:  
31.             int x = (int) ev.getX();  
32.             int y = (int) ev.getY();  
33.             int itemnum = pointToPosition(x, y);  
34.             if (itemnum == AdapterView.INVALID_POSITION)  
35.                 break;  
36.             else {  
37.                 if (itemnum == 0) {  
38.                     if (itemnum == (getAdapter().getCount() - 1)) {  
39.                         // 只有一项  
40.                         setSelector(R.drawable.list_round);  
41.                     } else {  
42.                         // 第一项  
43.                         setSelector(R.drawable.list_top_round);  
44.                     }  
45.                 } else if (itemnum == (getAdapter().getCount() - 1))  
46.                     // 最后一项  
47.                     setSelector(R.drawable.list_bottom_round);  
48.                 else {  
49.                     // 中间项  
50.                     setSelector(R.drawable.list_center_round);  
51.                 }  
52.             }  
53.             break;  
54.         case MotionEvent.ACTION_UP:  
55.             break;  
56.         }  
57.         return super.onInterceptTouchEvent(ev);  
58.     }  
59. }  

这段代码网上很多，几乎全部都是这么实现的，这里我简单介绍,如果说错了，请大家指出，

首先我们是实现了onInterceptTouchEvent这个方法，在这里我们也可以用onTouchEvent事件,都可以实现我们想要的效果.

onInterceptTouchEvent和onTouchEvent的区别：简单的来说前者可以拦截后者.

详细的请大家参考http://blog.csdn.net/jj120522/article/details/7944916  强烈建议大家看看.

下面一些逻辑虽说没有见过，我想大家都看得懂，（就是获取坐标（x，y），然后根据坐标获取listview相应的position值，没有返回-1，然后根据相应的position设置相应的setSelector ）.有时间得好好研究下listview.对灵活运用很有帮助.

在这里我还要在说名一点，上面那个图形很显然不是一个listview，是三个listview，另外重要的是我们一个屏幕显示不完全，这时我们就用到了ScrollView，一提到这个我想大家都知道ScrollView和listview是冤家，不可能同时存在,不过网上有解决办法，原理就是我们动态show 我们的listview,

实现方法：

[java]  view plain copy

1. /*** 
2.      * 动态设置listview的高度 
3.      *  
4.      * @param listView 
5.      */  
6.     public void setListViewHeightBasedOnChildren(ListView listView) {  
7.         ListAdapter listAdapter = listView.getAdapter();  
8.         if (listAdapter == null) {  
9.             return;  
10.         }  
11.         int totalHeight = 0;  
12.         for (int i = 0; i < listAdapter.getCount(); i++) {  
13.             View listItem = listAdapter.getView(i, null, listView);  
14.             listItem.measure(0, 0);  
15.             totalHeight += listItem.getMeasuredHeight();  
16.         }  
17.         ViewGroup.LayoutParams params = listView.getLayoutParams();  
18.         params.height = totalHeight  
19.                 + (listView.getDividerHeight() * (listAdapter.getCount() - 1));  
20.         // params.height += 5;// if without this statement,the listview will be  
21.         // a  
22.         // little short  
23.         // listView.getDividerHeight()获取子项间分隔符占用的高度  
24.         // params.height最后得到整个ListView完整显示需要的高度  
25.         listView.setLayoutParams(params);  
26.     }  

我们在Listview的setAdapter后，在调用下这个方法就OK了，代码内容，我想大家都看的明白，就不多介绍了.

效果图：

         

样子虽丑陋了点，但是实现效果就行了，如果在项目中就另当别论了。

哈哈,实现起来简单吧，睡觉去.

下面介绍另外一种解决方法：（TableLayout）

/************************************************************************************************************************************/

对于简短的listview,加上如上面这些比较死的数据，我们完全没有必要用listview来实现，TableLout完全够了.主要是我们怎么实现带有弧度的边罢了，不过这也完全得力于shape的功劳，至于点击效果效果嘛，我们有selector,哈哈，下面介绍下实现：

 配置文件部分代码：

[java]  view plain copy

1. <ScrollView  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent"  
4.     android:scrollbars="none" >  
5.   
6.     <LinearLayout  
7.         android:id="@+id/ll_main"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:layout_weight="1"  
11.         android:gravity="center"  
12.         android:orientation="vertical"  
13.         android:paddingLeft="10dp"  
14.         android:paddingRight="10dp" >  
15.     </LinearLayout>  
16. </ScrollView>  

很简单，我们主要用这个Linerlayout来呈放我们的Table.

实现代码：

[java]  view plain copy

1. package com.jj.corner;  
2.   
3. import java.util.ArrayList;  
4. import java.util.HashMap;  
5. import java.util.Map;  
6.   
7. import android.R.color;  
8. import android.app.Activity;  
9. import android.graphics.drawable.BitmapDrawable;  
10. import android.graphics.drawable.Drawable;  
11. import android.os.Bundle;  
12. import android.view.Gravity;  
13. import android.view.LayoutInflater;  
14. import android.view.View;  
15. import android.view.ViewGroup;  
16. import android.view.ViewGroup.LayoutParams;  
17. import android.view.Window;  
18. import android.widget.ArrayAdapter;  
19. import android.widget.LinearLayout;  
20. import android.widget.ListAdapter;  
21. import android.widget.ListView;  
22. import android.widget.RelativeLayout;  
23. import android.widget.SimpleAdapter;  
24. import android.widget.TableLayout;  
25. import android.widget.TableRow;  
26. import android.widget.TextView;  
27.   
28. public class MainActivity2 extends Activity {  
29.     private LinearLayout ll_main;  
30.     private TableLayout tableLayout;  
31.   
32.     private LinearLayout.LayoutParams layoutParams;  
33.   
34.     private static final String MSG_0[] = { "jjhappyforever" };  
35.   
36.     private static final String MSG_1[] = { "天气动画", "通知栏天气" };  
37.   
38.     private static final String MSG_2[] = { "桌面插件", "绑定微博", "天气分享", "通知与提示",  
39.             "定时播报" };  
40.   
41.     private static final String MSG_3[] = { "检查新版本", "发送建议", "帮助", "关于" };  
42.   
43.     @Override  
44.     public void onCreate(Bundle savedInstanceState) {  
45.         super.onCreate(savedInstanceState);  
46.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
47.         setContentView(R.layout.main2);  
48.         ll_main = (LinearLayout) findViewById(R.id.ll_main);  
49.         showTable();  
50.     }  
51.   
52.     /*** 
53.      * 显示table 
54.      */  
55.     public void showTable() {  
56.   
57.         layoutParams = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,  
58.                 LayoutParams.WRAP_CONTENT);  
59.         layoutParams.bottomMargin = 30;  
60.         layoutParams.topMargin = 10;  
61.         ll_main.addView(getTable(MSG_0), layoutParams);  
62.   
63.         ll_main.addView(getTable(MSG_1), layoutParams);  
64.   
65.         ll_main.addView(getTable(MSG_2), layoutParams);  
66.   
67.         ll_main.addView(getTable(MSG_3), layoutParams);  
68.     }  
69.   
70.     /*** 
71.      * 获取Table 
72.      *  
73.      * @param array 
74.      * @return 
75.      */  
76.     public TableLayout getTable(String[] array) {  
77.   
78.         tableLayout = new TableLayout(this);  
79.         tableLayout.setLayoutParams(layoutParams);  
80.         tableLayout.setStretchAllColumns(true);  
81.   
82.         for (int i = 0; i < array.length; i++) {  
83.             TableRow tableRow = new TableRow(this);  
84.             View view = getView(array[i], i, array.length);  
85.             tableRow.addView(view);  
86.   
87.             tableLayout.addView(tableRow);  
88.   
89.         }  
90.         return tableLayout;  
91.   
92.     }  
93.   
94.     /**** 
95.      *  
96.      * @param msg 
97.      *            显示信息 
98.      * @param current_Id 
99.      *            当前个数 
100.      * @param totle_Num 
101.      *            总个数 
102.      * @return 
103.      */  
104.     public View getView(String msg, int current_Id, int totle_Num) {  
105.   
106.         LinearLayout linearLayout = new LinearLayout(this);  
107.   
108.         LinearLayout.LayoutParams layoutParams1 = new LinearLayout.LayoutParams(  
109.                 LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);  
110.         layoutParams1.height = 1;  
111.         linearLayout.setOrientation(1);  
112.         // 创建分割线  
113.         View line = new View(this);  
114.         line.setLayoutParams(layoutParams1);  
115.         line.setBackgroundColor(getResources().getColor(R.color.black));  
116.   
117.         View view = LayoutInflater.from(MainActivity2.this).inflate(  
118.                 R.layout.item, null);  
119.         view.setBackgroundDrawable(new BitmapDrawable());  
120.   
121.         view.setFocusable(true);  
122.         view.setClickable(true);  
123.         TextView textView = (TextView) view.findViewById(R.id.tv_list_item);  
124.         textView.setText(msg);  
125.         textView.setTextSize(20);  
126.   
127.         // 只有一项  
128.         if (totle_Num == 1) {  
129.             view.setBackgroundResource(R.drawable.default_selector);  
130.             return view;  
131.         }  
132.         // 第一项  
133.         else if (current_Id == 0) {  
134.             view.setBackgroundResource(R.drawable.list_top_selector);  
135.         }  
136.         // 最后一项  
137.         else if (current_Id == totle_Num - 1) {  
138.             view.setBackgroundResource(R.drawable.list_bottom_selector);  
139.             line.setVisibility(View.GONE);  
140.         } else  
141.             view.setBackgroundResource(R.drawable.list_center_selector);  
142.   
143.         linearLayout.addView(view);  
144.         linearLayout.addView(line);  
145.   
146.         return linearLayout;  
147.     }  
148. }  

主要是getView有些复杂，不过都很好理解，相信大家都可以明白，只是没有动手做而已，小弟我只是想用这个练练手.

不过不要忘记我们的背景实现

这个是只有一项的背景，

default_selector.xml

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:state_pressed="true"><shape>  
5.             <stroke android:width="1dp" android:color="@color/gray" />  
6.   
7.             <solid android:color="@color/gray" />  
8.   
9.             <corners android:radius="8dp" />  
10.         </shape></item>  
11.     <item><shape>  
12.             <stroke android:width="1dp" android:color="@color/gray" />  
13.   
14.             <solid android:color="@color/white" />  
15.   
16.             <corners android:radius="8dp" />  
17.         </shape></item>  
18.   
19. </selector>  

list_top_selector.xml

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:state_pressed="true"><shape>  
5.             <stroke android:width="1dp" android:color="@color/gray" />  
6.   
7.             <solid android:color="@color/gray" />  
8.   
9.             <corners android:topLeftRadius="8dp" android:topRightRadius="8dp" />  
10.         </shape></item>  
11.     <item><shape>  
12.   
13.             <solid android:color="@color/white" />  
14.   
15.             <corners android:topLeftRadius="8dp" android:topRightRadius="8dp" />  
16.         </shape></item>  
17.   
18. </selector>  

list_bottom_selector.xml

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:state_pressed="true"><shape>  
5.             <stroke android:width="1dp" android:color="@color/gray" />  
6.   
7.             <solid android:color="@color/gray" />  
8.   
9.             <corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />  
10.         </shape></item>  
11.     <item><shape>  
12.   
13.             <solid android:color="@color/white" />  
14.   
15.             <corners android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />  
16.         </shape></item>  
17.   
18. </selector>  

list_center_selector.xml

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4.     <item android:state_pressed="true"><shape>  
5.             <stroke android:width="1dp" android:color="@color/gray" />  
6.   
7.             <solid android:color="@color/gray" />  
8.         </shape></item>  
9.     <item><shape>  
10.             <solid android:color="@color/white" />  
11.         </shape></item>  
12.   
13. </selector>  

主要就这么多了，下面我们来看下实现效果：

          

怎么样，效果和上面一样吧，自我感觉这样实现比上面方面点，不过最重要的是因人而异，达成目的就OK了.

有不足的地方请留言指出.

 源码下载