移动设计 - 显示多列 Table

Question

我们正在为 phone 开发一个应用程序，其中我们需要在移动设备上显示多列数据。考虑下面这样的一个例子：


Commodity Name|Qty at A|Qty at B|Qty at C|Qty at D|Qty at E|
==============|========|========|========|========|========|
Sugar         |      10|     500|       -|       -|  100000|
============================================================
Rice          |     100|     100|       -|       -|  100000|
============================================================
Pulses        |     100|     100|       -|       -|  100000|

现在需要并排显示此 table 视图以进行比较。如果我们在 phone 中显示它，那么用户需要水平滚动才能看到数据。现在可以超过20个项目，所以肯定会有垂直滚动。

在用户可以并排比较数据的移动设备中显示此类数据的标准方式是什么。此应用程序将针对 Android 和 iOS，并使用 Appcelerator 构建以获取更多信息。

Answer 1

尝试this。虽然说的是响应式网页设计，但是这个概念是适用的。

还指出了其他alternatives。

Answer 2

我正在使用类似的东西，在每个 TableViewRow 上我都有这样的代码：

$.row.layout = 'horizontal';

var width = parseInt(($.row.width ? $.row.width : Ti.Platform.displayCaps.platformWidth)/columns.length);

for(var i in columns) {

    $.row.add(Ti.UI.createLabel({
        text:columns[i],
        width:width
    }));
}

我有一个名为 cell 的元素，你明白了吧？

Answer 3

有一次，我用两种不同的方式为 Android 和 iOS 做了。在 Android 上：

我用 scrollType : 'horizontal' 创建了一个滚动视图然后得到 table 的行数并根据它定义滚动高度： scroll.setHeight(60*(number_of_rows+1)); //60 is the row height
在 for 循环中，我没有创建 table 和 tableviewRow，而是创建了一个大视图 (width : 600) 并添加了它在滚动视图中。所以这将产生一个相当高大的水平滚动视图。
最后，我在另一个滚动视图中添加了这个水平滚动视图，现在使用我的设备高度（或只是 Ti.UI.FILL）

总结如下： ``` var rowsArray = yourContent; var verticalScroll = Ti.UI.createScrollView({ 顶部：0，宽度：Ti.UI.FILL，身高：Ti.UI.FILL });

var horizontalScroll = Ti.UI.createScrollView({
    top: 0,
    width: Ti.UI.FILL,
    scrollType : 'horizontal',
});

horizontalScroll.setHeight(60*(rowsArray.length+1)); //60 is the row height
var posY = 60;
for (var i = 0; i < rowsArray.length; i++) {
    var rowView = Ti.UI.createView({
        top: posY,
        width: 600, 
        height: 60, 
        left: 0
    });
    posY += 60;
    horizontalScroll.add(rowView);
}

verticalScroll.add(horizontalScroll);
win.add(verticalScroll);

对于 iOS，您可以将 table 放在滚动视图中 ;)

移动设计 - 显示多列 Table

Mobile Design - Showing Multiple Column Table

android

appcelerator

ios

appcelerator-titanium