导读：直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了…

　直角看多了，就想看看圆角，不知何时，这几年刮起了一阵阵的圆角设计风：CSS新标准纳入圆角元素，iphone中几乎随处可见圆角设计，也开始出现很多圆角名片了…

　　今天我们就实现一个圆角的ListView效果。

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

　　1．感觉
　　实际上在Android中因为SDK中没有默认对圆角的一个完整的支持，需要麻烦自定义设置才能实现完美的圆角效果，所以绝大多数应用都是采用分组直角列表这种样式。

　　所以我觉得很有必要让大家看看这些少数的不一样的东西，看看有什么不一样的感觉。

　　先让我们来看两张图片：

　　左边的是Android的一个应用的设置界面，右边是iphone系统的设置界面.

　　ps：上述只是效果，并不是说左边的圆角列表就是用listview是实现的，事实上它是用LinearLayout布局一个一个堆起来的.

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

view source

print?

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文件定义如下：

view source

print?

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定义如下：

view source

print?

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定义如下：

view source

print?

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定义如下：

view source

print?

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背景图片的时候，记得把内容区域定义为边框线以内的区域.参考前面提供的素材和核心代码，我们初步实现如下：　　（1）.自定义CornerListView.java：

view source

print?

01 　　/**
02 　　* 圆角ListView
03 　　*/
04 　　public class CornerListView extends ListView {
05 　　public CornerListView（Context context） {
06 　　super（context）;
07 　　}
08 　　public CornerListView（Context context， AttributeSet attrs，
 int defStyle）
{
09 　　super（context， attrs，
defStyle）;
10 　　}
11 　　public CornerListView（Context context， AttributeSet attrs） {
12 　　super（context， attrs）;
13 　　}
14 　　@Override
15 　　public boolean
onInterceptTouchEvent（MotionEvent ev） {
16 　　switch （ev.getAction（）） {
17 　　case MotionEvent.ACTION_DOWN：
18 　　int x = （int） ev.getX（）;
19 　　int y = （int） ev.getY（）;
20 　　int itemnum =
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 　　}else if（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 　　case MotionEvent.ACTION_UP：
39 　　break；
40 　　}
41 　　return super.onInterceptTouchEvent（ev）;
42 　　}
43 　　}

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

view source

print?

01 　　<?xml version="1.0" encoding="utf-8"?>
02 　　<LinearLayout
xmlns：android="http：//schemas.android.com/apk/res/android"
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>
13 　　</LinearLayout>

　　列表项布局文件main_tab_setting_list_item.xml：

view source

print?

01 　　<?xml version="1.0" encoding="utf-8"?>
02 　　<RelativeLayout
xmlns：android="http：//schemas.android.com/apk/res/android"
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" />
22 　　</RelativeLayout>

　　（3）界面实现,显示界面SettingTabActivity.java：

view source

print?

01 　　public class SettingTabActivity extends Activity{
02 　　private CornerListView
cornerListView = null；
03 　　private List<Map<String，String>> listData = null；
04 　　private SimpleAdapter
adapter = null;
05 　　@Override
06 　　protected void
onCreate（Bundle savedInstanceState） {
07 　　super.onCreate（savedInstanceState）;
08 　　setContentView（R.layout.main_tab_setting）;
09 　　cornerListView =
（CornerListView）findViewById（R.id.setting_list）;
10 　　setListData（）;
11 　　adapter = new SimpleAdapter（getApplicationContext（）， listData，
R.layout.main_tab_setting_list_item ， new String[]{"text"}， new int[]{R.id.setting_list_item_text}）;
12 　　cornerListView.setAdapter（adapter）;
13 　　}
14 　　/**
15 　　* 设置列表数据
16 　　*/
17 　　private void setListData（）{
18 　　listData = new ArrayList<Map<String，String>>（）;
19 　　Map<String，String> map =
 new HashMap<String， String>（）;
20 　　map.put（"text"， "图库更新"）;
21 　　listData.add（map）;
22 　　map = new HashMap<String，
String>（）;
23 　　map.put（"text"， "收藏图片"）;
24 　　listData.add（map）;
25 　　map = new HashMap<String，
String>（）;
26 　　map.put（"text"， "下载目录"）;
27 　　listData.add（map）;
28 　　}
29 　　}

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

App列表之圆角ListView源码相关推荐

  1. Android学习系列(16)--App列表之圆角ListView

    有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈.甚至,有时觉得设计之殇是审美疲劳. 直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone ...

  2. Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战

    Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战 说明:Java生鲜电商平台-小程序或者APP优惠券的设计与源码实战,优惠券是一种常见的促销方式,在规定的周期内购买对应商品类型和额度的商品 ...

  3. （H5+安卓+ios）直播app系统源码,直播商城带货源码,方维直播app系统,直播短视频源码

    商品介绍 (H5+安卓+ios)直播app系统源码,直播商城带货源码,方维直播app系统,直播短视频源码,本系统有三个版本:带商城直播系统,带H5直播系统,和一般的直播短视频系统,默认带H5版本系统 ...

  4. 游戏应用市场APP软件下载平台网站源码+手机版

    介绍: PHP游戏应用市场APP软件下载平台网站源码+手机版 可自行打包APP,带下载统计,带多套模板,带图文教程 网盘下载地址: https://zijiewangpan.com/2Uaiaopza ...

  5. 小程序源码：仿各大APP种树微信小程序源码下载-简单快速上手

    这是一款仿各大APP的种树获取水果的一款微信小程序 可以对树浇水,杀虫,修剪等等 另外还有夺宝,更多小程序推荐 支持流量主模式等等 可以进行邀请好友加快树木的成长速度 小程序源码下载地址: 小程序源码 ...

  6. PHP安卓苹果APP在线封装打包制作源码 H5手机网站转APP 免签封装绿标

    简介: PHP安卓苹果APP在线封装打包制作源码 H5手机网站转APP 免签封装绿标 更新记录: 1.解决ios无法下载的问题 2.优化打包流程 修复原先各种问题 3.可自行上传安卓证书 4.可自行上 ...

  7. 有视频APP上线，一对一交友源码和抖音短视频源码稳步前行

    有视频APP上线,一对一交友源码和抖音短视频源码稳步前行 最近几年,网络上谈论直播和短视频的随处可见.茶余饭后,闲暇时间,经常会看会儿直播或者刷下短视频,全民皆可参与. 艾媒咨询数据显示,2017年中 ...

  8. 啦啦外卖V45.9稳定运营独立版+公众号+小程序前端 +APP前端+新授权接口 源码安装测试教程

    啦啦外卖V45.9稳定运营独立版,是一款针对本地生活服务的外卖点餐系统,支持单店版.多店版.平台版等多种场景使用,使用的都知道该系统功能非常强大,是目前外卖平台功能最全的一套系统.播播资源测试安装的源 ...

  9. css 视频播放列表,jquery结合CSS实现的多样式多视频列表连播效果源码

    jquery结合CSS实现的多样式多视频列表连播效果源码是一段实现了右侧缩略图片+文字列表显示所有视频.右侧文字列表显示所有视频及底部缩略图片+文字列表显示所有视频三种样式的视频连播效果代码,本段代码 ...

最新文章

  1. 排名第一的安全软件，为啥会变成流氓软件？
  2. Pymol | Pymol绘制GridBox图
  3. Python数据分析入门 -- Anaconda
  4. 面试必问：常用的加密算法有哪些？
  5. spec linux,linux – 在RPM包中SPEC文件中1％{？dist}的含义是什么？
  6. ElastciSearch简单总结（笔记）
  7. 中兴侵权案败诉需赔 2.89 亿元；HTC 裁员 1500 人；Android P Beta 3 发布 | CSDN 极客头条...
  8. javascript的拖放（第1部分）
  9. NSDate NSTimerZone 时区转换
  10. C++ 常见错误（02） —— 将dll（用c++写的）处理的结果展示在界面上
  11. 蓝桥杯题目练习 水题 [蓝桥杯2019初赛]矩形切割
  12. 计算机专业为什么要学线性代数,为什么要学线性代数
  13. 第五届A/B组 地宫取宝 JAVA
  14. 学习——学习能力是最重要的能力
  15. KVM-1、Linux 操作系统及虚拟化
  16. 缺陷跟踪管理工具-Mantis BugFree Bugzilla
  17. 硅基生命之漫谈-2：宇宙之基本法则：聚合与分解？
  18. ae中心点重置工具_AE中心点锚点移动对齐脚本 Move Anchor Point V2.0
  19. mybatis plus SQL注入器 及 InsertBatchSomeColumn LogicDeleteByIdWithFill AlwaysUpdateSomeColumnById装载器
  20. w7找不到本地计算机,Win7本地连接不见了怎么办？

热门文章

  1. engine中调整Element的上下显示顺序(遮盖)
  2. thrift - C#(CSharp)客户端连接池(ConnectionPool)
  3. 使用 DES 算法对数据加密
  4. 用split分割文件和数据(笔记)
  5. 如何理解“异或（XOR）”运算在计算机科学中的重要性？（转自-阿里聚安全）...
  6. 基于OSS存储搭建Hadoop集群
  7. JDBC编程专题4之JDBC驱动程序类型
  8. 请教context:component-scan/和mvc:annotation-driven/的区别20
  9. 动效设计的物理法则：动画的一切皆在于时间点和空间幅度（转）
  10. 面试官：说说Java中的信号量？Semaphore