移动设计 - 显示多列表

我们正在开发一款手机应用程序，其中我们需要在手机上显示多列数据。考虑下面的一个例子：移动设计 - 显示多列表


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|

现在这个表视图是需要并排显示比较。如果我们在手机中显示此信息，则用户需要水平滚动以查看数据。现在可以有超过20个项目，因此肯定会有垂直滚动。

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

来源

2016-02-17 Soumya

有一次，我以Android和iOS两种不同的方式做到了这一点。在Android上：

我创建了一个滚动视图与scrollType : 'horizontal' 然后拿到表的行数，并定义了基于涡管高度： scroll.setHeight(60*(number_of_rows+1)); //60 is the row height
里面一个for循环，而不是创建表和tableviewRow，我刚刚创建了一个大视图（width : 600）并将其添加到scrollView中。所以这会产生一个相当高大的水平scrollView。
最后，我加入该水平滚动视图另一个滚动视图内，现在与我的设备高度（或只是Ti.UI.FILL）

总结会像： ``` 变种rowsArray = yourContent; var verticalScroll = Ti.UI.createScrollView（{top：0， width：Ti.UI.FILL， height：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设备上，你可以把你的表滚动型内;）

来源

2016-02-18 14:25:15

感谢。但问题是，显示表格数据（在电话中）是否合适的用户体验，其中用户必须滚动左右，上下才能查看它。但是，再次感谢分享这个方法。 – Soumya

尝试this。虽然它正在讨论响应式网页设计，但这个概念也适用。

它也指出其他alternatives。

来源

2016-02-18 00:46:50 Shawn

我使用的是类似的东西，每个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 
    })); 
}

我呼吁细胞的元素，但你明白了吧，对不对？

来源

2016-02-18 10:49:20

移动设计 - 显示多列表

回答

相关问题