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

时间:2022-05-02 08:16:09
有些东西看多了,就厌烦了:extjs对我这种感觉最为强烈。甚至,有时觉得设计之殇是审美疲劳。
直角看多了,就想看看圆角,不知何时,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,iphone中几乎随处可见圆角设计,也开始出现很多圆角名片了...
今天我们就实现一个圆角的ListView效果。
圆角的设计,我们并不追求到处都用,无处不用,android中有少数界面用直角确实容易显得锋利,和周边界面太过对比而显得不协调,比如大栏目列表,设置等等,而采用圆角实现,则会活泼,轻松的多,也融合的特别好。
1.感觉
实际上在Android中因为SDK中没有默认对圆角的一个完整的支持,需要麻烦自定义设置才能实现完美的圆角效果,所以绝大多数应用都是采用分组直角列表这种样式。
所以我觉得很有必要让大家看看这些少数的不一样的东西,看看有什么不一样的感觉。
先让我们来看两张图片:

<ignore_js_op>Android学习系列(16)--App列表之圆角ListView <ignore_js_op>Android学习系列(16)--App列表之圆角ListView

左边的是Android的一个应用的设置界面,右边是iphone系统的设置界面。
ps:上述只是效果,并不是说左边的圆角列表就是用listview是实现的,事实上它是用LinearLayout布局一个一个堆起来的。
2.原理
通过判断ListView上点击的项的位置,我们切换不同的选择器,当然这个切换的动作我们需要定义在重写ListView的onInterceptTouchEvent()方法中。
  1. if(itemnum==0){
  2. if(itemnum==(getAdapter().getCount()-1)){
  3. //只有一项
  4. setSelector(R.drawable.app_list_corner_round);
  5. }else{
  6. //第一项
  7. setSelector(R.drawable.app_list_corner_round_top);
  8. }
  9. }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文件定义如下:

  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. android:bottomLeftRadius="4dip"
  9. 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:
<ignore_js_op>Android学习系列(16)--App列表之圆角ListView 
在这里提示一下,做9patch背景图片的时候,记得把内容区域定义为边框线以内的区域。
5. 初步实现
参考前面提供的素材和核心代码,我们初步实现如下:
(1).自定义CornerListView.java:
  1. /**
  2. * 圆角ListView
  3. */
  4. public class CornerListView extends ListView {
  5. public CornerListView(Context context) {
  6. super(context);
  7. }
  8. public CornerListView(Context context, AttributeSet attrs, int defStyle) {
  9. 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:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent">
  6. <com.tianxia.app.floworld.view.CornerListView android:id="@+id/setting_list"
  7. android:layout_width="fill_parent"
  8. android:layout_height="wrap_content"
  9. 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:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="fill_parent">
  5. <ImageView android:id="@+id/setting_list_item_arrow"
  6. android:layout_alignParentRight="true"
  7. android:layout_centerVertical="true"
  8. android:layout_width="wrap_content"
  9. 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:

  1. public class SettingTabActivity extends Activity{
  2. private CornerListView cornerListView = null;
  3. private List<Map<String,String>> listData = null;
  4. private SimpleAdapter adapter = null;
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.main_tab_setting);
  9. 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的效果:

<ignore_js_op>Android学习系列(16)--App列表之圆角ListView <ignore_js_op>Android学习系列(16)--App列表之圆角ListView

<ignore_js_op>Android学习系列(16)--App列表之圆角ListView

Android学习系列(16)--App列表之圆角ListView的更多相关文章

  1. Android学习系列&lpar;17&rpar;--App列表之圆角ListView&lpar;续&rpar;

    http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html   本来这篇文章想并到上篇Android学习系列(16)- ...

  2. Android学习系列&lpar;15&rpar;--App列表之游标ListView&lpar;索引ListView&rpar;

    游标ListView,提供索引标签,使用户能够快速定位列表项.      也可以叫索引ListView,有的人称也为Tweaked ListView,可能更形象些吧.      一看图啥都懂了: 1. ...

  3. Android学习系列&lpar;9&rpar;--App列表之分组ListView

    吸引用户的眼球,是我们至死不渝的追求:      第一时间呈现最有价值的信息,简明大方,告诉客户,你的选择是多么的明智,这正是你寻觅已久的东西.       分组的应用场合还是很多的,有数据集合的地方 ...

  4. Android学习系列&lpar;11&rpar;--App列表之拖拽ListView&lpar;下&rpar;

    接着上篇Android学习系列(10)--App列表之拖拽ListView(上)我们继续实现ListView的拖拽效果. 7.重写onTouchEvent()方法.     在这个方法中我们主要是处理 ...

  5. Android学习系列&lpar;10&rpar;--App列表之拖拽ListView&lpar;上&rpar;

     研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...

  6. Android学习系列&lpar;12&rpar;--App列表之拖拽GridView

    根据前面文章中ListView拖拽的实现原理,我们也是很容易实现推拽GridView的,下面我就以相同步骤实现基本的GridView拖拽效果.     因为GridView不用做分组处理,代码处理起来 ...

  7. Android学习系列&lpar;7&rpar;--App轮询服务器消息

    这篇文章是android开发人员的必备知识. 1.轮询服务器     一般的应用,定时通知消息可以采用轮询的方法从服务器拿取消息,当然实时消息通知的话,建议采用推送服务.    其中需要注意轮询的频率 ...

  8. Android学习系列&lpar;23&rpar;--App主界面实现

    在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...

  9. Android学习系列&lpar;18&rpar;--App工程结构搭建

     本文算是一篇漫谈,谈一谈关于Android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的 ...

随机推荐

  1. 使用git进行源代码管理

    git是一款非常流行的分布式版本控制系统,使用Local Repository追踪代码的修改,通过Push和Pull操作,将代码changes提交到Remote Repository,或从Remote ...

  2. Django models知识小点

    django 为使用一种新的方式,即关系对象映射(ORM) 一,创建表 1,基本结构 注意: 1,创建标的时候,如果我们不给表加自增列,生成表的时候会默认给我们生成一列为ID的自增列,当然我们也可以自 ...

  3. c语言字符串操作大全

     C语言字符串操作函数 函数名: strcpy 功  能: 拷贝一个字符串到另一个 用  法: char *stpcpy(char *destin, char *source); 程序例: #incl ...

  4. Apache shiro之身份验证&lpar;登陆&rpar;流程

    从张开涛blog学习后整理:http://jinnianshilongnian.iteye.com/blog/2018398 上图中的类和接口都可以继承和实现来个性化自己的实现. 其中重点看一下Mod ...

  5. Implementing SQL Server Row and Cell Level Security

    Problem I have SQL Server databases with top secret, secret and unclassified data.  How can we estab ...

  6. HTML5音乐播放器

    //HTML5部分 <a href="javascript:void(0);" onclick="getCurrentTime('firefox');"& ...

  7. 3&period;5 linux 0&period;11 目标文件格式

    在Linux0.11系统中,GNU gcc或gas编译输出的目标模块文件和链接程序生成的可执行文件都使用了UNIX传统的a.out格式.这是一种被称为汇编与链接输出(Assembly & li ...

  8. 队列(链式存储)JAVA代码

      publicclassLinkQueue<T>{       //结点类     publicclassNode{         public T data;         pub ...

  9. 【ASP&period;NET Web API教程】3&period;4 HttpClient消息处理器

    原文:[ASP.NET Web API教程]3.4 HttpClient消息处理器 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本博客文章,请先看前面的内容. 3.4 ...

  10. tp框架命名空间

    命名空间:相当于虚拟的目录在tp里面主要为了实现自动加载类 TP框架下有一个初始命名空间(相当于根目录)初始命名空间:ThinkPHP\Library 在初始命名空间下又包含很多根命名空间这些根命名空 ...