AndroidApp列表之圆角ListView源码.docx
- 文档编号:11033779
- 上传时间:2023-02-24
- 格式:DOCX
- 页数:15
- 大小:226.55KB
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 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 Map 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).效果图
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Android App列表之圆角ListView源码 App 列表 ListView 源码