移动应用程序中的图片、图标和工具按钮

我们之前曾撰文介绍如何整合API和移动应用，从而为用户提供丰富且引人入胜的体验。自发布上一篇文章以来，我们一直在不断改进GPS演示应用，增加了对更多API的支持，以便获取当前的天气状况和附近发生的活动信息。

在小型移动屏幕上提供如此多的功能，一个挑战在于如何为用户提供一种清晰、一致且易于使用的导航方式，使其能够在应用程序的所有界面中轻松浏览。

在移动应用程序中，使用图标作为工具按钮可以创建时尚且优雅的导航菜单，尤其是在图标的选择基于易于识别且普遍接受的规范时。例如，一个指向左侧的箭头通常表示“返回”，而一个磁盘图标经常代表“保存数据”，即使最终的目的地可能不是一个新的文件或磁盘。

在这篇文章中，我们将介绍如何使用图像图标，利用MobileTogether构建跨平台导航菜单，并在移动应用程序中添加工具按钮。

以下截图展示了“我在哪里”应用程序在苹果iOS和Android手机上的运行界面。

在每个视图中，用户刚刚获取了当前的GPS坐标，并且会看到相同的选项，这些选项以工具按钮的形式呈现

在应用程序中使用 MobileTogether Designer（一款可视化应用开发工具），可以定义和配置工具按钮。该工具允许开发者在开发过程中随时预览应用布局，并测试复杂的执行逻辑。

我们的导航菜单由一系列表格构成，如图所示，可以在 MobileTogether 设计器中的“页面设计”窗口中看到

在设计包含工具图标的菜单时，需要考虑几个问题，尤其是在为各种具有不同屏幕尺寸和像素分辨率的移动设备，提供可预测且一致的用户体验。

首先，重要的是确保每个图像都能有效地暗示点击后将执行的功能。

其次，图像必须足够大，以适应不同大小的手指。我们经常听到移动设备用户为意外点击找借口，说是“我的手指太笨拙了”。但真的是用户手指笨拙吗？还是说，应用程序的布局太小，操作界面过于复杂，导致用户难以操作？

最后，对于那些显示多个屏幕并包含各种工具按钮的应用程序，在不同页面上保持一致的布局和功能，可以使应用程序的易用性大大提高。

我们的“我在哪里”演示应用程序巧妙地结合了两个控件属性的功能，用于管理工具图标的大小和布局。

为每个图标设置“fill_parent”作为控制宽度，这样我们就可以使用一个图像文件来适配所有屏幕尺寸。在我们的应用程序中，每个图标都是一个192x192像素的.png图像文件，而“fill_parent”会自动调整图像大小，使其填充每个终端用户移动设备上的列宽。

每个工具图标的表格列宽都由 XPath 表达式定义。我们使用持久化数据树中的一个元素来指定工具图标的列宽。这样，我们就可以通过重新定义数据树中的值，在不同的设备上尝试不同的尺寸，而无需为每个测试修改每个列宽属性。总体而言，我们在应用程序中使用了三种不同尺寸的图标。以下是存储列宽的数据树部分：

这张表格还包含一些空白列，用于在每个工具图标周围创建边距。这些边距列的宽度是空白的，这意味着所有未分配的空间将平均分配到这些列中。我们还在图标行的之间添加了间距，以创建垂直方向的边距。

您也可以选择将工具图标的图像文件嵌入到应用程序文件中，或者将这些图像单独上传到 MobileTogether 服务器。

定义当点击工具图标时执行的操作非常简单。MobileTogether 允许任何控件都像按钮控件一样可点击。控件的操作可以通过右键单击的上下文菜单进行定义：

上面选择的按钮旨在在移动设备上打开默认的地图应用程序，并将地图中心定位到GPS坐标。然而，该动作脚本经过增强，分别定义了点击（或普通点击）和长按两种操作。

根据用户的偏好设置，点击按钮可能会播放来自内置的MobileTogether声音库中的声音。正常点击会打开地图，而长按则会弹出一个消息框，解释该按钮的功能。

我们需要更小的工具按钮，因为在某些情况下，工具按钮需要与页面上的文本或其他控件共享空间。例如，在搜索页面和此处显示的搜索结果页面上，就需要使用更小的工具按钮

这些页面上的工具图标是在“持久数据树”中定义的，它们使用了较小的图标宽度元素，并按照列的方式排列。

如果您错过了我们之前关于将API集成到移动应用程序的文章，您可以点击此处阅读。或者，如果您是MobileTogether的新用户，请访问MobileTogether演示页面，其中包含视频、教程以及更多演示应用程序的链接。

您可以更详细地查看我们的演示应用程序，以了解我们如何在移动应用程序中实现了工具按钮，或者查看用于地图、搜索、天气和事件的API。只需下载免费的MobileTogether Designer，并在GitHub上的此存储库中获取我们的应用程序：https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I