移動設計 - 顯示多列表

我們正在開發一款手機應用程序，其中我們需要在手機上顯示多列數據。考慮下面的一個例子：移動設計 - 顯示多列表


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

移動設計 - 顯示多列表

回答

相關問題