Мы разрабатываем приложение для телефона, в котором нам нужно отображать несколько столбцов данных на мобильном телефоне. Рассмотрим один из таких примеров ниже:


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 для добавления информации.

2
Soumya 18 Фев 2016 в 02:42

3 ответа

Лучший ответ

Однажды я сделал это двумя разными способами для Android и iOS. На Android:

  1. Я создал scrollView с помощью scrollType : 'horizontal' Затем получил количество строк таблицы и на основе этого определил высоту прокрутки: scroll.setHeight(60*(number_of_rows+1)); //60 is the row height

  2. Внутри цикла for вместо создания таблицы и tableviewRow я только что создал большое представление (width : 600) и добавил его внутри scrollView. Таким образом, это создаст довольно высокий и большой горизонтальный scrollView.

  3. Наконец, я добавил этот горизонтальный scrollView внутрь другого scrollView, теперь с высотой моего устройства (или просто 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 вы можете просто поместить свою таблицу в scrollView;)

1
Carlos Zinato 18 Фев 2016 в 14:25

Я использую что-то подобное, на каждом 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, но вы понимаете, верно?

0
Ricardo Pereira 18 Фев 2016 в 10:49

Попробуйте это. Хотя речь идет об адаптивном веб-дизайне, концепция применима.

Он также указывает на другие альтернативы.

0
Community 13 Апр 2017 в 12:32