--- title: "移动应用程序中的图片、图标和工具按钮" date: "2018-09-21" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "mobile-development" - "mobiletogether" - "tool-buttons-in-mobile-apps" - "tool-icons" description: 探索如何在移动应用程序中有效利用图像图标作为工具按钮，以提升导航体验。学习跨设备的设计和功能方面的最佳实践。 --- Status: #blog Tags: #mobile-development #mobiletogether #tool-buttons-in-mobile-apps #tool-icons Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md) | [mobile-development](/blog/zh/category/mobile-development.md) # 移动应用程序中的图片、图标和工具按钮 我们之前曾撰文介绍如何[整合API和移动应用](https://www.altova.com/blog/integrating-apis-and-mobile-apps/)，从而为用户提供丰富且引人入胜的体验。自发布上一篇文章以来，我们一直在不断改进GPS演示应用，增加了对更多API的支持，以便获取当前的天气状况和附近发生的活动信息。 在小型移动屏幕上提供如此多的功能，一个挑战在于如何为用户提供一种清晰、一致且易于使用的导航方式，使其能够在应用程序的所有界面中轻松浏览。 在移动应用程序中，使用图标作为工具按钮可以创建时尚且优雅的导航菜单，尤其是在图标的选择基于易于识别且普遍接受的规范时。例如，一个指向左侧的箭头通常表示“返回”，而一个磁盘图标经常代表“保存数据”，即使最终的目的地可能不是一个新的文件或磁盘。 在这篇文章中，我们将介绍如何使用图像图标，利用MobileTogether构建跨平台导航菜单，并在移动应用程序中添加工具按钮。 [![](/blog/images/wai_700x335.jpg)](wai_700x335.jpg) 以下截图展示了“我在哪里”应用程序在苹果iOS和Android手机上的运行界面。 ![移动应用中的工具按钮：iPhone 示例](/blog/images/tool-buttons-iphone-2.png) [![移动应用中的工具按钮：Android 示例](/blog/images/tool-buttons-android-1.png)](tool-buttons-android-1.png) 在每个视图中，用户刚刚获取了当前的GPS坐标，并且会看到相同的选项，这些选项以工具按钮的形式呈现 - 查看该地点的卫星照片，照片的显示范围取决于您选择的缩放级别 - 发送一条包含当前位置的短信 - 打开当前位置的默认地图应用程序 - 根据当前位置，进行一般的网络搜索 - 获取该地点的当前天气状况 - 查看附近即将举行的活动列表 - 使用 MapQuest 搜索 API 搜索周边区域 在应用程序中使用 MobileTogether Designer（一款可视化应用开发工具），可以定义和配置工具按钮。该工具允许开发者在开发过程中随时预览应用布局，并测试复杂的执行逻辑。 我们的导航菜单由一系列表格构成，如图所示，可以在 MobileTogether 设计器中的“页面设计”窗口中看到 [![在 MobileTogether 设计器中，定义移动应用程序中的工具按钮](/blog/images/tool-button-nav-table.png)](tool-button-nav-table.png) 在设计包含工具图标的菜单时，需要考虑几个问题，尤其是在为各种具有不同屏幕尺寸和像素分辨率的移动设备，提供可预测且一致的用户体验。 首先，重要的是确保每个图像都能有效地暗示点击后将执行的功能。 其次，图像必须足够大，以适应不同大小的手指。我们经常听到移动设备用户为意外点击找借口，说是“我的手指太笨拙了”。但真的是用户手指笨拙吗？还是说，应用程序的布局太小，操作界面过于复杂，导致用户难以操作？ 最后，对于那些显示多个屏幕并包含各种工具按钮的应用程序，在不同页面上保持一致的布局和功能，可以使应用程序的易用性大大提高。 我们的“我在哪里”演示应用程序巧妙地结合了两个控件属性的功能，用于管理工具图标的大小和布局。 [![工具按钮的属性，用于设置按钮的大小](/blog/images/tool-icon-properties.png)](tool-icon-properties.png) 为每个图标设置“fill_parent”作为控制宽度，这样我们就可以使用一个图像文件来适配所有屏幕尺寸。在我们的应用程序中，每个图标都是一个192x192像素的.png图像文件，而“fill_parent”会自动调整图像大小，使其填充每个终端用户移动设备上的列宽。 每个工具图标的表格列宽都由 XPath 表达式定义。我们使用持久化数据树中的一个元素来指定工具图标的列宽。 这样，我们就可以通过重新定义数据树中的值，在不同的设备上尝试不同的尺寸，而无需为每个测试修改每个列宽属性。 总体而言，我们在应用程序中使用了三种不同尺寸的图标。 以下是存储列宽的数据树部分： [![在移动应用程序中，以标准尺寸定义工具按钮，使其在不同设备上都能良好显示](/blog/images/tool-button-persistent-data.png)](tool-button-persistent-data.png) 这张表格还包含一些空白列，用于在每个工具图标周围创建边距。这些边距列的宽度是空白的，这意味着所有未分配的空间将平均分配到这些列中。我们还在图标行的之间添加了间距，以创建垂直方向的边距。 您也可以选择将工具图标的图像文件嵌入到应用程序文件中，或者将这些图像单独上传到 MobileTogether 服务器。 ### 移动应用程序中工具按钮的操作定义 定义当点击工具图标时执行的操作非常简单。MobileTogether 允许任何控件都像按钮控件一样可点击。控件的操作可以通过右键单击的上下文菜单进行定义： [![为移动应用程序中的工具按钮定义点击操作](/blog/images/tool-button-click-actions.png)](tool-button-click-actions.png) 上面选择的按钮旨在在移动设备上打开默认的地图应用程序，并将地图中心定位到GPS坐标。然而，该动作脚本经过增强，分别定义了点击（或普通点击）和长按两种操作。 [![移动应用程序中，工具按钮的单击和长按操作](/blog/images/tool-button-action-details.png)](tool-button-action-details.png) 根据用户的偏好设置，点击按钮可能会播放来自内置的MobileTogether声音库中的声音。正常点击会打开地图，而长按则会弹出一个消息框，解释该按钮的功能。 ### 移动应用程序中工具按钮的尺寸可以根据需要进行调整 我们需要更小的工具按钮，因为在某些情况下，工具按钮需要与页面上的文本或其他控件共享空间。例如，在搜索页面和此处显示的搜索结果页面上，就需要使用更小的工具按钮 [![移动应用程序中，搜索和结果页面上显示的工具按钮](/blog/images/search-and-results.png)](search-and-results.png) 这些页面上的工具图标是在“持久数据树”中定义的，它们使用了较小的图标宽度元素，并按照列的方式排列。 ### 了解更多信息，并亲身体验一下 如果您错过了我们之前关于将API集成到移动应用程序的文章，您可以[点击此处阅读](https://www.altova.com/blog/integrating-apis-and-mobile-apps/)。或者，如果您是MobileTogether的新用户，请访问[MobileTogether演示](https://www.altova.com/zh/mobiletogether/demos)页面，其中包含视频、教程以及更多演示应用程序的链接。 您可以更详细地查看我们的演示应用程序，以了解我们如何在移动应用程序中实现了工具按钮，或者查看用于地图、搜索、天气和事件的API。只需下载免费的[MobileTogether Designer](https://www.altova.com/zh/mobiletogether/download)，并在GitHub上的此存储库中获取我们的应用程序：[https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I)