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

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

时间： 2024-12-13 08:54:02

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

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

游标ListView,提供索引标签,使用户能够快速定位列表项.      也可以叫索引ListView,有的人称也为Tweaked ListView,可能更形象些吧.      一看图啥都懂了: 1.游标(Fast scroll thumb)      就是右边的那个拖动的方块,这个非常的简单: 1 2 3 4 5 <ListView     android:id="@+id/tweaked_list"     android:layout_width="fill_pa

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

这篇文章是android开发人员的必备知识. 1.轮询服务器     一般的应用,定时通知消息可以采用轮询的方法从服务器拿取消息,当然实时消息通知的话,建议采用推送服务.    其中需要注意轮询的频率设置,要在需求和性能中平衡. 2.独立进程     无论程序是否正在运行,我们都要能通知到客户,我们需要一个独立进程的后台服务.     我们需要一个独立进程的后台服务.     在AndroidManifest.xml中注册Service时,有一个android:process属性,如果这个属性以

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

在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下最终的界面设计图:    上面顶部是一个9patch背景图片+标题文字:下面底部是5个tab标签,表示应用的5大模块.中间内容部分则是各个模块的具体内容,可以再分类,或者直接显示内容. 2.准备素材按照上篇文章的界面,我们需要事先提供两大方面的素材:顶部+底部.顶部的素材非常简单,最重要的是背景(9patch

[Android学习系列17]Content Provider的一些事

参考: android Content Provider详解一 android Content Provider详解二 android Content Provider详解三 android Content Provider详解四 android Content Provider详解五 android Content Provider详解六 android Content Provider详解七-实现ContentProvider类 android Content Provider详解八-实现C

[转] Android学习系列(29)--App调试的几个命令实践

在Android的应用开发中,我们会用到各种代码调试:其实在Android的开发之后,我们可能会碰到一些随机的问题,如cpu过高,内存泄露等,我们无法简单的进行代码调试,我们需要一个系统日志等等,下面我把握工作中碰到的几个常用命令和方法给大家演示实践一下. 1.logcat命令这个命令最简单常用,可查看帮助,我不多说,如果需要打印时间,加参数-v time 1 adb logcat -v time 2.bugreport命令这个命令也非常简单,但是在实际应用中非常有用,会有从开机之后详细的dum

Android学习系列(20)--App数据格式之解析Json

JSON数据格式,在Android中被广泛运用于客户端和网络(或者说服务器)通信,非常有必要系统的了解学习.     恰逢本人最近对json做了一个简单的学习,特此总结一下,以飨各位.     为了文章简明清晰,尽量多列点,少废话.     参考文档:http://www.ietf.org/rfc/rfc4627.txt?number=4627 1.JSON解析     (1).解析Object之一: 1 {"url":"http://www.cnblogs.com/qian

Android学习系列(28)--App集成支付宝[已过期]

手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统互联网将会大放光彩的一个功能.人人有手机,人人携带手机,花钱买东西,不再需要取钱付现,不再需要回家上网银,想买什么,扫描一下,或者搜索一下,然后下单,不找零,直接送到你家,这将是手机支付给我们带来的全新交易体验.谷歌刚推出了谷歌钱包,这必是我们后面要使用的主要手段,但是鉴于当前国情,我觉得有必要介绍一下android手机集成支付宝功能. 1.下载官方架包和说明文档其实官方已经提供了安装指南,下载地址:https://

App列表之游标ListView(索引ListView)

游标ListView,提供索引标签,使用户能够快速定位列表项.      也可以叫索引ListView,有的人称也为Tweaked ListView,可能更形象些吧.      一看图啥都懂了: 1.游标(Fast scroll thumb)      就是右边的那个拖动的方块,这个非常的简单: 1 2 3 4 5 <ListView     android:id="@+id/tweaked_list"     android:layout_width="fill_pa

Android学习系列--App工程结构搭建

本文算是一篇漫谈,谈一谈关于android开发中工程初始化的时候如何在初期我们就能搭建一个好的架构.      关于android架构,因为手机的限制,目前我觉得也确实没什么大谈特谈的,但是从开发的角度,看到整齐的代码,优美的分层总是一种舒服的享受的.      从艺术的角度看,其实我们是在追求一种美. 本文先分析几个当今比较流行的android软件包,最后我们汲取其中觉得优秀的部分,搭建我们自己的通用android工程模板.      1. 微盘      2. 久忆日记      3.网易新