---
title: "打造一个移动端仪表盘，让任何高管都为之惊艳"
date: "2017-03-16"
categories: 
  - "development"
  - "mobile"
  - "software"
tags: 
  - "mobile-dashboards"
  - "mobile-development"
  - "mobiletogether"
description: 以下是如何使用 Altova MobileTogether 创建一个外观精美且功能强大的移动端仪表盘。
---
Status: #blog

Tags:  #mobile-dashboards #mobile-development #mobiletogether

Categories:  [mobile-development](/blog/zh/category/mobile-development.md) | [low-code+no-code](/blog/zh/category/low-codeno-code.md)
# 打造一个移动端仪表盘，让任何高管都为之惊艳

在之前的文章中， [打造优雅的移动应用程序](https://www.altova.com/blog/build-an-elegant-mobile-app-that-delights-end-users/), 我们展示了简单应用程序和完整的移动端控制面板在多个移动设备上的运行效果。移动应用开发者还可以通过赋予用户自定义应用体验的权限，从而为最终用户带来更好的体验。MobileTogether 允许开发者为每个移动平台定制跨平台应用程序 **和** 通过一个简单直观的自定义文本大小控制功能，为用户提供更多自主选择的权利。

允许每个用户根据自己的观看条件设置首选的文本大小，这既体现了对用户的尊重，也减轻了开发人员的工作负担，他们无需为所有设备确定合适的文本大小。

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

<!--more-->

### 允许用户选择文本大小

您可以使用两个独立的按钮，或者使用滑动条控件，来允许用户在移动应用程序中设置显示的文本大小。

### 两个按钮，用于调整文本大小

我们之前介绍的“公司销售报告”应用程序使用了双按钮的设计。

![MobileTogether 销售报告应用 - Android版本](/blog/images/Android-Landscape.png)

控制面板的底部一排包含两个调整字体大小的按钮，这些按钮的标签设计简洁明了，易于理解

![移动应用“MobileTogether”中的字体大小按钮](/blog/images/Android-Bottom-Row.png)

这些按钮可以增加或减少一个名为“textSize”的持久数据元素的数值，其取值范围为10到50。

以下是分配给“减少”按钮的控制操作：

![MobileTogether 控制操作：增大文本大小](/blog/images/decrease-text-size.png)

“增加”按钮的操作方式如下：

![MobileTogether 控制操作：增大文本大小](/blog/images/increase-text-size.png)

`textSize` 元素在一个简单的 MobileTogether 用户函数中被使用，用于构建一个有效的字符串，以便设置文本大小

![移动端协作功能中，用于处理可变文本大小的用户函数定义](/blog/images/set-text-size-function.png)

最后，与属性窗口中的下拉菜单选择字体大小不同，该应用程序中每个文本元素的字体大小是通过 XPath 表达式来设置的

![适用于文本元素的移动端属性](/blog/images/text-size-property.png)

由于 `textSize` 元素定义在持久数据树中，因此用户在设备上选择的文本大小设置会被保存，并在下次启动该应用程序时仍然有效。

这种双按钮操作方式对于只有几个主要页面的应用程序来说非常有效，例如“公司销售报告”，因为用户可以立即看到结果，并可以调整到自己喜欢的字体大小。以下是“公司销售报告”以小字体和大字体显示的示例：

![一个名为“MobileTogether”的应用程序，字体较小](/blog/images/small-text-sample.png)
![一个名为“MobileTogether”的应用程序，字体较大](/blog/images/large-text-sample.png)

请注意，主标题的字体比正文的字体更大。这是通过一个名为“标题文本”的第二个用户功能实现的，该功能设置了正文和标题文本大小之间的关系

![MobileTogether 用户自定义功能：用于调整标题文本的字号](/blog/images/headline-text-function.png)

### 滑动条：调整文字大小

另一种让用户控制文本大小的方法是使用滑块控件。开发者仍然需要创建一个用于存储文本大小的持久化数据元素，创建用户函数来构建大小字符串，并将文本大小属性作为 XPath 表达式进行赋值，具体方法如前所述。

但有时，屏幕空间可能不足以容纳两个按钮来调整文本大小。在这种情况下，您可以将一个按钮设置为访问一个滑动条控件。

以下所示的“销售数据移动仪表盘”应用程序，可以以多种图形形式展示任何日期的销售数据。 顶部的一排控件提供了多种快速日期选择功能，但仅能再添加一个按钮来调整文本大小。

![MobileTogether 移动仪表盘应用程序——Android版本](/blog/images/Dashboard-app-Android.png)

在这个应用程序中，按下“A±”按钮会打开一个子页面，其中包含一个滑动条控件，允许用户调整“textSize”元素的值

![移动端仪表盘应用中的滑动控件，用于调整文本大小](/blog/images/resize-slider.png)

位于顶部的示例文本会根据用户调整滑块控制器的实时操作而自动调整大小。当用户点击“返回”按钮时，主页面会重新显示，其中文本元素的大小也会相应调整。与双按钮技术一样，`textSize` 元素会被存储为持久数据，因此用户选择的字体大小将在下次启动应用程序时被恢复。

有些应用程序会包含一些适合保存为用户设置的元素，例如英寸与厘米、美元与欧元之间的选择，或者默认地址或图像文件名。在这种情况下，开发者可以创建一个单独的设置页面，让用户在一个地方查看和修改所有持久化的用户设置。

MobileTogether Designer是一款免费工具，可帮助您快速为跨平台应用程序（适用于Android、iOS、Windows 8、Windows 10、Windows Phone 8以及基于HTML-5的浏览器客户端）实现所有这些高级功能。 [下载一份试用版](https://www.altova.com/zh/download/mobiletogether.html)，立即开始使用！