---
title: "适用于数据驱动型移动应用的滚动表格"
date: "2016-04-11"
categories: 
  - "development"
  - "mobile"
  - "tools"
tags: 
  - "android"
  - "data-driven-apps"
  - "ios"
  - "mobile-development"
  - "mobiletogether"
description: 探索MobileTogether 2.1如何通过滚动表格功能，提升移动应用开发效率，从而在各种平台上，在小屏幕上实现有效的数据呈现。
---
Status: #blog

Tags:  #android #data-driven-apps #ios #mobile-development #mobiletogether

Categories: [mobile-development](/blog/zh/category/mobile-development.md) | [low-code+no-code](/blog/zh/category/low-codeno-code.md)
# 适用于数据驱动型移动应用的滚动表格

移动设备用户总是希望获得尽可能多的信息，并且希望以最便捷的方式呈现。然而，较小的屏幕尺寸可能会导致需要在信息量和易用性之间做出权衡。移动应用开发者面临的挑战是，如何在有限的屏幕空间内，将数据、导航控件和辅助信息都整合到一个美观的布局中，否则可能会让最终用户感到沮丧，而这些用户可能是客户、同事或高层管理人员。MobileTogether 2.1 引入了滚动表格和其他[令人眼前一亮的全新功能](https://www.altova.com/zh/whatsnew_mobiletogether.html)，旨在帮助开发者创建能够优雅呈现数据的应用程序，并且在所有设备上都能保持一致的用户体验。

![shutterstock_160560011](/blog/images/shutterstock_160560011-1.jpg)

<!--more-->

### 可滚动表格

MobileTogether 2.1 允许开发者定义可水平或垂直滚动的表格，同时表头和表尾始终保持在固定位置。水平滚动功能允许开发者在不缩小文本大小的情况下，显示更宽的表格中的更多列。垂直滚动功能可以确保重要信息始终显示在屏幕上，从而提高可读性。

垂直滚动功能对于包含重复行的表格尤其有用，因为在设计阶段，开发者无法确定最终在任何用户的屏幕上可以显示多少行数据。以下是一个在 MobileTogether 设计器中创建的简单四列表格，其中包含重复行：

![在 MobileTogether 中，可以使用带有重复行的表格](/blog/images/table-designer-view-1.png)

在“新建表格”对话框中，我们定义了列数、动态行数，以及表头和表尾的行数。然后，我们在表头列中添加了标签，在表尾中添加了控件，并设置了文本的大小和颜色等属性。

我们可以通过在“样式与属性”辅助窗口中定义表格的最大高度来实现垂直滚动。然后，可以选择是否让整个表格都滚动，或者只让标题和页脚之间的内部行进行滚动。最大高度可以是百分比、具体的像素数值，或者您可以选择让表格自动填充剩余的屏幕区域。

![在 MobileTogether 中，用于滚动表格的属性](/blog/images/properties-1.png)

对于希望最大化屏幕显示区域以呈现数据的开发者，MobileTogether 2.1 引入了一个新的“页面”属性，用于隐藏页面标题栏：

![在小屏幕设备上，隐藏标题栏以最大化显示区域](/blog/images/title-bar-false.png)

我们表格底部的浅蓝色边框区域包含导航功能，允许用户选择不同的月份或年份。表格底部中央的年份列是通过MobileTogether工具栏中的“连接”按钮创建的，它将第2列和第3列合并成一个更宽的控件。您可以水平或垂直地连接列，或者稍后如果改变主意，也可以再次拆分它们。您甚至可以将一个全新的表格嵌入到现有单元格中，从而创建一个分层表格，以设计最适合复杂数据的布局。

![在 MobileTogether 中，您可以合并表格单元格，以创建自定义的表格布局](/blog/images/join-split-2.png)

### 垂直线条

MobileTogether 2.1 还引入了一种新的垂直线控制功能。如果您想在任何表格的列之间添加一条垂直线，只需从“控件”辅助窗口中拖动一条线，然后将其放置到所需位置，就像在“设计器”视图中看到的那样。这条垂直线将被放置在一个新的表格列中，您可以将该列的“宽度”属性设置为“wrap_content”，以使其占用最小的空间。

![在 MobileTogether 中，为滚动表格添加垂直分隔线](/blog/images/vertical-rule.png)

垂直线的属性可以像水平线一样进行调整。每个垂直线的“样式与属性”窗口允许您指定线条的粗细、样式、颜色，以及左右边距（以像素为单位）。

MobileTogether 允许您根据设备方向来定义任何组件的可见性。 上面显示的 6 列表格是一个备用版本，它仅会在横向模式下显示，如左侧的横向图标所示。 我们的原始 4 列表格可以设置为仅在纵向模式下显示。

以下截图展示了一个最终部署的可滚动表格应用程序，该应用程序正在一个横向放置的安卓手机上运行。用户可以通过在表格内部的垂直滑动操作来浏览数据行，而其他元素的位置保持不变。位于页脚的“-”和“+”控件是导航工具，用于选择上个月或下个月。

![在安卓手机上，可以实现移动滚动表格的功能](/blog/images/landscape-50.png)

具有不同屏幕尺寸的设备可能会显示更多或更少的行数据，但表格仍然会填充我们定义的最大高度，该高度以百分比表示

![在 iPhone 模拟器上，可以像在手机上一样，通过滑动来浏览表格数据](/blog/images/iPhone-Simulator.png)

MobileTogether Designer 是一款免费使用的设计工具，因此 [下载一份副本](https://www.altova.com/zh/download/mobiletogether-designer.html) 今天就开始使用滚动表格，为您的跨平台、数据驱动型移动应用程序打造更出色的用户体验！