android 通讯录界面设计带字母,使用Jquery Mobile设计Android通讯录

【IT168技术】本系列教程将指导大家一步步使用Jquery Mobile设计一个Android的通讯录应用。其中在应用的界面部分，将使用jQuery Mobile框架，并且会指导大家如何使Android中提供的webview浏览器容器控件中的javascript去访问后端JAVA应用程序，以及后端JAVA应用如何去访问前端的Javascript和HTML。

本文假设读者已对jQuery Mobile有一定的初步认识，同时也初步了解Android的一些基本用法。关于jQuery Mobile框架的介绍，可以参考如下几篇文章：

本教程的结构

本系列教程安排如下。在第一部分中，我们将介绍在应用程序中的运行界面截图，说明整个应用的流程走向及结构，并说明一些如何在Android的Webview控件中通过Javascript与后端的JAVA应用程序交互的一些技巧和知识点，其中会介绍jQuery Mobile中的各种重要页面元素。在本系列的第二部分中，将介绍如何在通讯录应用中新增加、编辑和删除帐号。在本系列的第三部分中，将介绍如何增加通讯录，其中会介绍用到一个工具类。在第四部分，将重点介绍如何使用Jackson JSON处理库去将JAVA对象和JSON对象之间进行转换，并介绍了项目整个工程如何配置，如何根据Android的图标设计最佳实践去设计图标，最后总结全系列的教程。

页面流程结构

下面来讲解应用的页面流程结构。在这个应用中，每个通讯录都与帐号相关联的，也就是说，每个帐号的用户中可以建立多个通讯录，就象gmail一样。当Android应用启动后，会检查应用中是否已经建立了帐号，如果是第一次启动，是不存在帐号的，那么会提示用户新建立一个帐号，如下图所示：

一旦建立了帐号后，就可以进入通讯录的初始页面了，如下图：

可以看到，上图是按字母顺序对通讯录排序。当用户点“Add”按钮时，则会显示让用户输入具体的通讯录的页面，如下边左边第一张图所示

而在通讯录列表中，用户可以点选某一个已存在的联系人的信息进行查看，查看的实际效果图如上图的第二张图所示，这里用户可以对信息进行编辑修改，再保存，保存后会回到

通讯录列表的界面。同时，用户如果点“delete”按钮，会显示出如下图的界面，询问用户是否真正要删除该用户的联系信息。

而在整个应用程序中，由于考虑到要处理的记录数量会大，以及移动设备的处理能力，一个友好的做法是在处理数据时，添加一个表示当前进度的进度的图标，如下图：

总结一下，整个应用的实际流程如下图所示：