---
title: "移动应用程序中的视觉反馈"
date: "2019-04-04"
categories: 
  - "app-development"
  - "mobile"
  - "mobile-development"
  - "mobiletogether"
  - "tools"
tags: 
  - "cross-platform-mobile-development"
  - "mobile-development"
  - "mobile-development-tools"
  - "mobiletogether"
  - "visual-feedback"
description: 探索如何使用MobileTogether在移动应用程序中实现视觉反馈，通过动态的按钮响应和视觉提示来增强用户交互体验。
---
Status: #blog

Tags:  #cross-platform-mobile-development #mobile-development #mobile-development-tools #mobiletogether #visual-feedback

Categories: [mobile-development](/blog/zh/category/mobile-development.md) 
# 移动应用程序中的视觉反馈

在移动应用程序中，提供视觉反馈可以提升用户体验，而那些使用起来有趣的应用，比那些静态、单调的应用更容易获得用户的青睐和频繁使用 [快速的移动应用开发](https://www.altova.com/zh/mobiletogether) Altova的(RMAD)框架集成了所有您需要的工具，可以帮助您开发具有吸引人视觉反馈功能的跨平台移动应用程序。

MobileTogether Designer中的拖放控件面板包含一个按钮控件，该控件在被点击时会自动改变其外观。此外，您还可以定义条件，以便在应用程序运行时，动态地添加或修改任何按钮上的文本、图像或其他功能。

此外，还可以定义许多其他控件，使其像按钮一样工作，即当点击该控件时，可以执行一个或多个操作。我们之前已经写过关于...的文章 [将图标图像用作工具按钮](https://www.altova.com/blog/images-as-tool-buttons-in-mobile-apps/) 在移动应用程序中，我们可以创建一套时尚而优雅的工具菜单。 在本文中，我们将为我们的工具图标添加交互功能，从而为每次点击提供美观的视觉反馈。

![](/blog/images/wai_700x335_2.jpg)

<!--more-->

以下截图展示了我们创建的“我在哪里”应用程序中的一个页面，该页面用于演示如何将图片用作工具按钮。

[![在移动应用程序中，将图像用作工具按钮。](/blog/images/tool-images.png)](tool-images.png)

屏幕底部的每个蓝色图标都是一个工具按钮，旨在提供有关该位置的更多信息，可以通过API检索数据，或者打开一个外部网页。 快速点击任何按钮会执行相应的操作，而长按则会打开一个消息窗口，显示关于该按钮的信息

[![移动应用程序中视觉反馈的示例：长按图片](/blog/images/image-long-click-515x1030.png)](image-long-click.png)

截图左下角的“天气”按钮被高亮显示，表示已被点击。在快速点击时，图像会短暂地被高亮，然后执行相应操作。

点击天气按钮后，系统会向 OpenWeather API 发送请求，并打开一个子页面，该页面以图表和文本两种形式展示天气数据

[![点击图片后，会显示天气预报信息](/blog/images/weather-subpage.jpg)](weather-subpage.jpg)

### **移动应用程序中的视觉反馈定义**

用户点击任何图片时，系统会通过短暂改变图片按钮背后的背景颜色来提供视觉反馈。我们在应用程序中的图片以表格形式排列，如图所示，这是 MobileTogether Designer 的一个局部视图

[![在MobileTogether设计器中，表格中的图片布局方式](/blog/images/buttton-layout.png)](buttton-layout.png)

每个表格单元格都有一组属性，这些属性可以单独定义，包括表格单元格的背景颜色。 此外，每张图片也都有独特的定义，描述了当点击图片时执行的操作。

[![为移动应用程序实现视觉反馈，需要定义表格单元格的背景样式](/blog/images/table-cell-background.png)](table-cell-background.png)

当点击天气预报图像时，我们可以将一个索引值记录在名为“userButton”的元素中。然后，我们可以根据“userButton”元素的内容，来调整单元格的背景颜色，具体规则由“背景颜色”属性中定义的XQuery表达式来决定。

以下是“获取天气预报”工具的功能列表：

[![在移动应用程序中，点击图像时执行的操作，用于提供视觉反馈](/blog/images/image-click-actions.png)](image-click-actions.png)

首先，名为“userButton”的元素的数值会被更新。

接下来，会执行一系列实际改变图像外观的操作。由于这些操作需要在每次点击图像时都执行，因此它们被存储在一个专门的动作组中，该动作组被称为“按钮闪烁”（Button Flash）。

MobileTogether 会在任何动作序列的结束时，自动执行一次“更新显示”操作。为了实现视觉反馈，我们希望在动作序列的早期执行“更新显示”操作，以更改背景颜色，短暂暂停，重置用户按钮的值，然后再次执行“更新显示”操作以清除背景颜色。

XQuery 中的 `sleep()` 函数用于设置暂停的持续时间，单位为毫秒。 在按钮闪烁结束后，程序将继续执行“获取天气预报”的操作组。 该操作组会向天气预报 API 发送查询请求，以获取任意经纬度位置的未来 5 天天气预报，然后打开如上所示的天气子页面。

我们还希望在用户长按任何图片时能够获得视觉反馈。MobileTogether 允许我们为长按操作定义不同的行为，就像这里展示的：

[![在移动应用程序中，对长按操作所产生的视觉反馈](/blog/images/long-click-actions.png)](long-click-actions.png)

如上图所示的第二个截图，长按操作的结果会显示在消息窗口中，该窗口会说明“获取天气”工具按钮的作用。

对于长按操作，我们只需要一个“更新显示”功能来改变背景颜色，而不需要专门的“暂停”函数。当用户关闭消息窗口时，“更新显示”操作会自动执行，从而恢复图像背景。

### **移动应用程序中，对于包含重复行的表格，如何提供视觉反馈**

我们无法使用相同的索引技术来识别在呈现基于API查询获取的数据列表的页面上的工具图标。例如，下图显示了针对特定位置的酒店和汽车旅馆的搜索结果：

[![移动应用程序中具有重复行的表格](/blog/images/search-results-515x1030.png)](search-results.png)

类似的页面也提供附近的交通信息和文化活动，并且我们希望为每个条目的工具图片提供视觉反馈，就像这里点击一个电话图片时所展示的效果：

[![长按重复排列中的一张图片](/blog/images/search-results-click-515x1030.png)](search-results-click.png)

这些页面的每个结果集都定义为一个可滚动的表格，其中包含重复的行，我们在此表格中展示通过API查询获取的信息

[![一个在 MobileTogether 设计器中创建的、具有重复行的表格](/blog/images/repeating-rows.png)](repeating-rows.png)

MobileTogether 包含一个名为 mt-rowgroup-index() 的 XQuery 扩展函数，它提供了一种简洁的方法来识别每一行中的图像。我们可以将此函数与一个值结合使用，以识别表格中的特定列，从而可以单独操作其中的任何图像。 上面突出显示的电话图像具有以下背景颜色定义：

[![用于重复行的表格单元格背景定义。](/blog/images/rowgroup-background-definition.png)](rowgroup-background-definition.png)

当用户点击电话图标以获取任何结果时，首先会更新用户按钮（userButton）元素的值，然后执行“按钮闪烁”动作组

我们为行组索引加了300，以表示该行中的第三个图像。我们的搜索API查询最多返回50个结果，因此，根据所选结果的行号，该图像对应的用户按钮元素的值可能在301到350之间。 视觉反馈仅应用于此单个图像，具体由表格单元格背景颜色定义中的`mt-rowgroup-index()`函数决定。

MobileTogether 包含许多其他功能 [扩展函数](https://www.altova.com/zh/mobiletogether/features) 这些功能可以用于 XPath/XQuery 表达式中，从而避免开发者需要创建自定义函数来扩展标准的 XPath、XQuery 和 XSLT 库，以满足移动应用中常见的任务需求。

### 了解更多信息，并亲身体验一下

如果您已经准备好开始在移动应用程序中添加视觉反馈，只需下载免费的 [MobileTogether Designer](https://www.altova.com/zh/mobiletogether/download) 软件。 此外，请务必访问 [MobileTogether 演示](https://www.altova.com/zh/mobiletogether/demos) 页面，其中包含指向视频、教程以及更多演示应用程序的链接。 您可以通过从 GitHub 的 [此存储库](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I) 下载副本来查看本文中描述的应用程序。