http://www.cnblogs.com/qianxudetianxia/archive/2011/09/19/2068760.html
 

本来这篇文章想并到上篇Android学习系列(16)--App列表之圆角ListView中的,但是若是如此就让大家错过一篇新的好的文章,着实可惜。
上篇中我们使用shape,corners,gradient实现了一个渐变的圆角效果,但是在完文之后的实践中,我发现有时效果不甚满意,选中和放手的事件监听没有去正确的判断,然后渐变效果也比较单一,性能也觉得不是很快,不如用图片来的惊艳和迅速,又懒的去改原来的,所以我又用图片来实现一个更完美的效果。

1. 准备
您可能需要参考我之前的两篇文章:
(1). Android学习系列(16)--App列表之圆角ListView(2). Android学习系列(4)--App自适应draw9patch不失真背景了解圆角的基本实现原理和9patch图片的制作和注意事项。

2. 效果图(我准备了3套皮肤)

 

  

3. 圆角类CornerListView的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/**
 * 圆角ListView
 */
public class CornerListView extends ListView {
 
    public CornerListView(Context context) {
        this(context, null);
    }
 
    public CornerListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //整个listview的圆角背景
        this.setBackgroundResource(R.drawable.corner_list_bg);
    }
 
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
                int x = (int) ev.getX();
                int y = (int) ev.getY();
                int itemnum = pointToPosition(x, y);
 
                if (itemnum == AdapterView.INVALID_POSITION){
                    break;
                else {
                        if (itemnum == 0){
                                if (itemnum == (getAdapter().getCount()-1)) {
                                    //只有一项
                                    setSelector(R.drawable.corner_list_single_item);
                                else {
                                    //第一项
                                    setSelector(R.drawable.corner_list_first_item);
                                }
                        else if (itemnum==(getAdapter().getCount()-1)){
                             //最后一项
                            setSelector(R.drawable.corner_list_last_item);
                        else {
                            //中间项
                            setSelector(R.drawable.corner_list_item);
                        }
                }
                break;
        case MotionEvent.ACTION_UP:
                break;
        }
        return super.onInterceptTouchEvent(ev);
    }
}

从上面看到,我们用到了一张ListView的背景图片和4个项选择器。

4. 素材
一种5张图片素材:1张背景图片和4个项选择器对应的选中图片,都是9patch图片:

    

分别对应的是:
R.drawable.corner_list_bg,
R.drawable.corner_list_first_pressed,
R.drawablecorner_list_last_pressed,
R.drawablecorner_list_pressed,
R.drawablecorner_list_single_pressed

5.选择器构造
根据前面的后4张图片我们来构造选中时的对应选择器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- corner_list_first_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_first_pressed" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_first_pressed" />
</selector>
 
<!-- corner_list_last_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_last_pressed" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_last_pressed" />
</selector>
 
<!-- corner_list_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_pressed" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_pressed" />
</selector>
 
<!-- corner_list_single_item.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_selected="true" android:drawable="@drawable/corner_list_single_pressed" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/corner_list_single_pressed" />
</selector>

6. 应用
我直接把使用圆角的Activity代码贴出来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
public class SettingTabActivity extends Activity{
 
    private CornerListView cornerListView = null;
 
    private List<Map<String,String>> listData = null;
    private SimpleAdapter adapter = null;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_tab_setting);
 
        cornerListView = (CornerListView)findViewById(R.id.setting_list);
        setListData();
 
        adapter = new SimpleAdapter(getApplicationContext(), listData, R.layout.main_tab_setting_list_item ,
new String[]{"text"}, new int[]{R.id.setting_list_item_text});
        cornerListView.setAdapter(adapter);
    }
     
    /**
     * 设置列表数据
     */
    private void setListData(){
        listData = new ArrayList<Map<String,String>>();
 
        Map<String,String> map = new HashMap<String, String>();
        map.put("text""图库更新");
        listData.add(map);
 
        map = new HashMap<String, String>();
        map.put("text""检查新版本");
        listData.add(map);
 
        map = new HashMap<String, String>();
        map.put("text""反馈意见");
        listData.add(map);
 
        map = new HashMap<String, String>();
        map.put("text""关于我们");
        listData.add(map);
 
        map = new HashMap<String, String>();
        map.put("text""支持我们,请点击这里的广告");
        listData.add(map);
    }
}

ps:记得设置cacheColorHit属性为0或者"#00000000"!

7. 总结
在平时Android使用的过程中,发现很多设置界面的选项大量应用到了这种圆角效果,非常的漂亮,同时也发现很多应用,这个效果做的很不如意,包括一些大公司,要么没有选中效果,要么listview整个的背景是圆角,但是选中的第一项和最后一项的选中效果还是直角,要么干脆为圆角里设定一定像素的内边距等等,我对此总结,算是对这个问题有一个比较好的解决方案(我已经在网上搜过,未发现有人把这个效果分享过来),独乐乐不如众乐乐。

ps:附上3套皮肤素材:/Files/qianxudetianxia/cornerlist-skin.zip

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

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

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

  2. Android学习系列(15)--App列表之游标ListView(索引ListView)

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

  3. Android学习系列(9)--App列表之分组ListView

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

  4. Android学习系列(11)--App列表之拖拽ListView(下)

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

  5. Android学习系列(10)--App列表之拖拽ListView(上)

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

  6. Android学习系列(12)--App列表之拖拽GridView

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

  7. Android学习系列(7)--App轮询服务器消息

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

  8. Android学习系列(23)--App主界面实现

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

  9. Android学习系列(18)--App工程结构搭建

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

随机推荐

  1. Linux基础命令-Nginx-正则表达式( grep sed awk )-Shell Script--etc

    Linux基础使用 学习内容博客 内存 查看swap分区信息 > swapon -s 添加swap分区 > mkswap /dev/sdb2 > 激活 swapon -a /dev/ ...

  2. openssl版本升级操作记录

    需要部署nginx的https环境,之前是yum安装的openssl,版本比较低,如下: [root@nginx ~]# yum install -y pcre pcre-devel openssl ...

  3. Python自动化运维工具-Fabric部署及使用总结

    使用shell命令进行复杂的运维时,代码往往变得复杂难懂,而使用python脚本语言来编写运维程序,就相当于开发普通的应用一样,所以维护和扩展都比较简单,更重要的是python运维工具fabric能自 ...

  4. JavaScript术语:shim 和 polyfill

    转自:https://www.html.cn/archives/8339 在学习和使用 JavaScript 的时候,我们会经常碰到两个术语:shim 和 polyfill.它们有许多定义和解释,意思 ...

  5. hdu 3038 给区间和,算出多少是错的

    参考博客 How Many Answers Are Wrong Problem Description TT and FF are ... friends. Uh... very very good ...

  6. 如何在java项目中使用lucene

    lucene是一个开源的全文检索引擎工具包,但它不是一个成型的搜索引擎,它的功能就是负责将文本数据按照某种分词算法进行分词,分词后的结果存储在索引库中,然后根据关键字从索引库检检索. 那么应该如何使用 ...

  7. Notes of Daily Scrum Meeting(12.23)

    今天的团队任务总结如下: 团队成员 今日团队工作 陈少杰 调试网络连接,寻找新的连接方法 王迪 建立搜索的UI界面 金鑫 查阅相关资料,熟悉后台的接口 雷元勇 建立搜索的界面 高孟烨 继续美化界面,熟 ...

  8. HTTP基础与Android之(安卓与服务器通信)——使用HttpClient和HttpURLConnection

    查看原文:http://blog.csdn.net/sinat_29912455/article/details/51122286 1客户端连接服务器实现内部的原理 GET方式和POST方式的差别 H ...

  9. 非post请求时整个url作为参数传递出现bug

    在非post请求使用整个url作为参数传递到后台时会出现url被截断的bug,这时通过encodeURIComponent进行url的编码可以解决.示例如下: <!--参数url-->Ur ...

  10. 第三个Sprint ------第十一天

    四则运算APP推广: 1通过微信公众平台推广APP,写一片软文,然后推送出去.分享朋友圈.QQ空间. 2通过微博推广APP,@各微博大户. 3让之前内侧的同学转发给自己的小弟小妹或者侄女侄子! 总结: ...