备注:重点用红色画出
有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈。甚至,有时觉得设计之殇是审美疲劳。
直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone中几乎随处可见圆角设计,也开始出现很多圆角名片了...
今天我们就实现一个圆角的ListView效果。
圆角的设计,我们并不追求到处都用,无处不用,android中有少数界面用直角确实容易显得锋利,和周边界面太过对比而显得不协调,比如大栏目列表,设置等等,而采用圆角实现,则会活泼,轻松的多,也融合的特别好。
1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持,需要麻烦自定义设置才能实现完美的圆角效果,所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西,看看有什么不一样的感觉。
先让我们来看两张图片:
左边的是Android的一个应用的设置界面,右边是iphone系统的设置界面。
ps:上述只是效果,并不是说左边的圆角列表就是用listview是实现的,事实上它是用LinearLayout布局一个一个堆起来的。
2.原理
通过判断ListView上点击的项的位置,我们切换不同的选择器,当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。
01 if(itemnum==0){
02 if(itemnum==(getAdapter().getCount()-1)){
03 //只有一项
04 setSelector(R.drawable.app_list_corner_round);
05 }else{
06 //第一项
07 setSelector(R.drawable.app_list_corner_round_top);
08 }
09 }else if(itemnum==(getAdapter().getCount()-1))
10 //最后一项
11 setSelector(R.drawable.app_list_corner_round_bottom);
12 else{
13 //中间一项
14 setSelector(R.drawable.app_list_corner_shape);
15 }
3.定义选择器
如果只有一项,我们需要四个角都是圆角,app_list_corner_round.xml文件定义如下:
01 <?xml version="1.0" encoding="utf-8"?>
02 <shape xmlns:android="http://schemas.android.com/apk/res/android">
<!--颜色渐变-->
03 <gradient android:startColor="#B5E7B8"
04 android:endColor="#76D37B"
05 android:angle="270"/>
<!--圆角处理-->
06 <corners android:topLeftRadius="4dip"
07 android:topRightRadius="4dip"
08 android:bottomLeftRadius="4dip"
09 android:bottomRightRadius="4dip"/>
10 </shape>
如果是顶部第一项,则上面两个角为圆角,app_list_corner_round_top.xml定义如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
3 <gradient android:startColor="#B5E7B8"
4 android:endColor="#76D37B"
5 android:angle="270"/>
6 <corners android:topLeftRadius="4dip"
7 android:topRightRadius="4dip"/>
8 </shape>
如果是底部最后一项,则下面两个角为圆角,app_list_corner_round_bottom.xml定义如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
3 <gradient android:startColor="#B5E7B8"
4 android:endColor="#76D37B"
5 android:angle="270"/>
6 <corners android:bottomLeftRadius="4dip"
7 android:bottomRightRadius="4dip" />
8 </shape>
如果是中间项,则应该不需要圆角, app_list_corner_shape.xml定义如下:
1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
3 <gradient android:startColor="#B5E7B8"
4 android:endColor="#76D37B"
5 android:angle="270"/>
6 </shape>
4.背景图片
因为默认的情况下,ListView就要显示一个圆角的边框,这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png:
在这里提示一下,做9patch背景图片的时候,记得把内容区域定义为边框线以内的区域。
5. 初步实现
参考前面提供的素材和核心代码,我们初步实现如下:
(1).自定义CornerListView.java:
04 | public class CornerListView extends ListView { |
06 | public CornerListView(Context context) { |
10 | public CornerListView(Context context, AttributeSet attrs, int defStyle) { |
11 | super (context, attrs, defStyle); |
14 | public CornerListView(Context context, AttributeSet attrs) { |
15 | super (context, attrs); |
19 | public boolean onInterceptTouchEvent(MotionEvent ev) { |
20 | switch (ev.getAction()) { |
21 | case MotionEvent.ACTION_DOWN: |
22 | int x = ( int ) ev.getX(); |
23 | int y = ( int ) ev.getY(); |
24 | int itemnum = pointToPosition(x, y); |
26 | if (itemnum == AdapterView.INVALID_POSITION) |
31 | if (itemnum==(getAdapter().getCount()- 1 )){ |
32 | setSelector(R.drawable.app_list_corner_round); |
34 | setSelector(R.drawable.app_list_corner_round_top); |
36 | } else if (itemnum==(getAdapter().getCount()- 1 )) |
37 | setSelector(R.drawable.app_list_corner_round_bottom); |
39 | setSelector(R.drawable.app_list_corner_shape); |
44 | case MotionEvent.ACTION_UP: |
47 | return super .onInterceptTouchEvent(ev); |
这个CornerListView主要处理了点击项的选择器的切换。
(2).列表布局文件和列表项布局文件:
列表布局文件main_tab_setting.xml:
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
03 | android:orientation = "vertical" |
04 | android:layout_width = "fill_parent" |
05 | android:layout_height = "fill_parent" > |
06 | < com.tianxia.app.floworld.view.CornerListView android:id = "@+id/setting_list" |
07 | android:layout_width = "fill_parent" |
08 | android:layout_height = "wrap_content" |
09 | android:layout_margin = "10dip" |
10 | android:background = "@drawable/app_list_corner_border" |
11 | android:cacheColorHint = "#00000000" > |
12 | </ com.tianxia.app.floworld.view.CornerListView > |
列表项布局文件main_tab_setting_list_item.xml:
01 | <? xml version = "1.0" encoding = "utf-8" ?> |
03 | android:layout_width = "fill_parent" |
04 | android:layout_height = "fill_parent" > |
05 | < ImageView android:id = "@+id/setting_list_item_arrow" |
06 | android:layout_alignParentRight = "true" |
07 | android:layout_centerVertical = "true" |
08 | android:layout_width = "wrap_content" |
09 | android:layout_height = "fill_parent" |
10 | android:layout_marginLeft = "15dip" |
11 | android:layout_marginRight = "15dip" |
12 | android:src = "@drawable/appreciate_tab_list_item_arrow_small" /> |
13 | < TextView android:id = "@+id/setting_list_item_text" |
14 | android:layout_toLeftOf = "@id/setting_list_item_arrow" |
15 | android:layout_width = "fill_parent" |
16 | android:layout_height = "wrap_content" |
17 | android:textSize = "16dip" |
18 | android:textColor = "#000000" |
19 | android:paddingTop = "10dip" |
20 | android:paddingBottom = "10dip" |
21 | android:paddingLeft = "10dip" /> |
(3)界面实现
显示界面SettingTabActivity.java:
01 | public class SettingTabActivity extends Activity{ |
03 | private CornerListView cornerListView = null ; |
05 | private List<Map<String,String>> listData = null ; |
06 | private SimpleAdapter adapter = null ; |
10 | protected void onCreate(Bundle savedInstanceState) { |
11 | super .onCreate(savedInstanceState); |
12 | setContentView(R.layout.main_tab_setting); |
14 | cornerListView = (CornerListView)findViewById(R.id.setting_list); |
17 | adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item , new String[]{ "text" }, new int []{R.id.setting_list_item_text}); |
18 | cornerListView.setAdapter(adapter); |
24 | private void setListData(){ |
25 | listData = new ArrayList<Map<String,String>>(); |
27 | Map<String,String> map = new HashMap<String, String>(); |
28 | map.put( "text" , "图库更新" ); |
31 | map = new HashMap<String, String>(); |
32 | map.put( "text" , "收藏图片" ); |
35 | map = new HashMap<String, String>(); |
36 | map.put( "text" , "下载目录" ); |
(4).效果图
通过以上实现,我们基本达到了圆角的ListView的效果: