AndroidApp列表之圆角ListView源码.docx
《AndroidApp列表之圆角ListView源码.docx》由会员分享，可在线阅读，更多相关《AndroidApp列表之圆角ListView源码.docx（15页珍藏版）》请在冰点文库上搜索。
AndroidApp列表之圆角ListView源码
AndroidApp列表之圆角ListView源码
导读：
直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：
CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了…
直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：
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
}elseif（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
xmlversion="1.0"encoding="utf-8"?
>
02
android="http：
//
03
startColor="#B5E7B8"
04
android：
endColor="#76D37B"
05
android：
angle="270"/>
06
topLeftRadius="4dip"
07
android：
topRightRadius="4dip"
08
android：
bottomLeftRadius="4dip"
09
android：
bottomRightRadius="4dip"/>
10
如果是顶部第一项，则上面两个角为圆角，app_list_corner_round_top.xml定义如下：
1
xmlversion="1.0"encoding="utf-8"?
>
2
android="http：
//
3
startColor="#B5E7B8"
4
android：
endColor="#76D37B"
5
android：
angle="270"/>
6
topLeftRadius="4dip"
7
android：
topRightRadius="4dip"/>
8
如果是底部最后一项，则下面两个角为圆角，app_list_corner_round_bottom.xml定义如下：
1
xmlversion="1.0"encoding="utf-8"?
>
2
android="http：
//
3
startColor="#B5E7B8"
4
android：
endColor="#76D37B"
5
android：
angle="270"/>
6
bottomLeftRadius="4dip"
7
android：
bottomRightRadius="4dip"/>
8
如果是中间项，则应该不需要圆角，app_list_corner_shape.xml定义如下：
1
xmlversion="1.0"encoding="utf-8"?
>
2
android="http：
//
3
startColor="#B5E7B8"
4
android：
endColor="#76D37B"
5
android：
angle="270"/>
6
4.背景图片 因为默认的情况下，ListView就要显示一个圆角的边框，这个我们使用一张9patch背景图片来实现app_list_corner_border.9.png,在这里提示一下，做9patch背景图片的时候，记得把内容区域定义为边框线以内的区域.参考前面提供的素材和核心代码，我们初步实现如下：
（1）.自定义CornerListView.java：
01
/**
02
*圆角ListView
03
*/
04
publicclassCornerListViewextendsListView{
05
publicCornerListView（Contextcontext）{
06
super（context）;
07
}
08
publicCornerListView（Contextcontext，AttributeSetattrs，intdefStyle）{
09
super（context，attrs，defStyle）;
10
}
11
publicCornerListView（Contextcontext，AttributeSetattrs）{
12
super（context，attrs）;
13
}
14
@Override
15
publicbooleanonInterceptTouchEvent（MotionEventev）{
16
switch（ev.getAction（））{
17
caseMotionEvent.ACTION_DOWN：
18
intx=（int）ev.getX（）;
19
inty=（int）ev.getY（）;
20
intitemnum=pointToPosition（x，y）；
21
if（itemnum==AdapterView.INVALID_POSITION）
22
break;
23
else
24
{
25
if（itemnum==0）{
26
if（itemnum==（getAdapter（）.getCount（）-1））{
27
setSelector（R.drawable.app_list_corner_round）;
28
}else{
29
setSelector（R.drawable.app_list_corner_round_top）;
30
}
31
}elseif（itemnum==（getAdapter（）.getCount（）-1））
32
setSelector（R.drawable.app_list_corner_round_bottom）;
33
else{
34
setSelector（R.drawable.app_list_corner_shape）;
35
}
36
}
37
break;
38
caseMotionEvent.ACTION_UP：
39
break；
40
}
41
returnsuper.onInterceptTouchEvent（ev）;
42
}
43
}
这个CornerListView主要处理了点击项的选择器的切换.
（2）.列表布局文件和列表项布局文件：
列表布局文件main_tab_setting.xml：
01
xmlversion="1.0"encoding="utf-8"?
>
02
android="http：
//
03
android：
orientation="vertical"
04
android：
layout_width="fill_parent"
05
android：
layout_height="fill_parent">
06
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
13
列表项布局文件main_tab_setting_list_item.xml：
01
xmlversion="1.0"encoding="utf-8"?
>
02
android="http：
//
03
android：
layout_width="fill_parent"
04
android：
layout_height="fill_parent">
05
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
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"/>
22
（3）界面实现,显示界面SettingTabActivity.java：
01
publicclassSettingTabActivityextendsActivity{
02
privateCornerListViewcornerListView=null；
03
privateList>listData=null；
04
privateSimpleAdapteradapter=null;
05
@Override
06
protectedvoidonCreate（BundlesavedInstanceState）{
07
super.onCreate（savedInstanceState）;
08
setContentView（R.layout.main_tab_setting）;
09
cornerListView=（CornerListView）findViewById（R.id.setting_list）;
10
setListData（）;
11
adapter=newSimpleAdapter（getApplicationContext（），listData，R.layout.main_tab_setting_list_item，newString[]{"text"}，newint[]{R.id.setting_list_item_text}）;
12
cornerListView.setAdapter（adapter）;
13
}
14
/**
15
*设置列表数据
16
*/
17
privatevoidsetListData（）{
18
listData=newArrayList>（）;
19
Mapmap=newHashMap（）;
20
map.put（"text"，"图库更新"）;
21
listData.add（map）;
22
map=newHashMap（）;
23
map.put（"text"，"收藏图片"）;
24
listData.add（map）;
25
map=newHashMap（）;
26
map.put（"text"，"下载目录"）;
27
listData.add（map）;
28
}
29
}
（4）.效果图
升级会员 