Отображение в виде плиток

[andahay]

Всем доброго дня. Вопрос такой. Как мне сделать список в виде плиточек (как на картинке). Где-то читал что это можно сделать с помощью listview, но снова найти не смог. И желательно поподробнее объяснить как именно работать с listview(если делается через него)

Изменено 18 апреля, 2016 пользователем andahay

[krapotkin]

Это PresentedScrollBox

создаете вручную свои N плиточек в FormShow
подсчитать их координаты работы на несколько минут

[Равиль Зарипов (ZuBy)]

ну например вот так может выглядеть ListView панельками.

чтобы такого добиться пришлось много кода дописать в FMX.ListView.pas

могу объяснить принцип как это работает, если осилите, сможете реализовать сами.

[Rusland]

40 минут назад, ZuBy сказал:

Сразу есть захотелось )

40 минут назад, ZuBy сказал:

чтобы такого добиться пришлось много кода дописать в FMX.ListView.pas

могу объяснить принцип как это работает, если осилите, сможете реализовать сами.

Конечно объясните )

[Равиль Зарипов (ZuBy)]

1 час назад, Rusland сказал:

Конечно объясните )

Предыстория была такая:

Изначально такие плитки были сделаны на Button'ах (стиль) и TPresentedScrollBox. Но как только пошло дело в тест основательный идею тут же выбросил. 120+ элементов выключили телефон (samsung ace2 duos) при отрисовке, точней при динамической загрузке картинок. да и в целом вся эта беда работает медленней чем реализация на TListView

Я не художник, но смысл вроде передал

Пример: У нас есть 12 элементов,и 4 колонки

Можно в LV отрисовывать дополнительные "контролы" и поместить в один реальный айтем, 4 виртуальные панельки (в нашем случае)

Для того чтобы такое получилось:

1) ListView должна при ресайзе рассчитать сколько колонок она может иметь (ширина LV / на ширину одной панельки)

2) дальше Вам нужно будет разбить отрисовку Itema на 4 панельки

    2.1) тоже самое проделать и при выделении

3) При таком подходе не будет стандартных элементов отображения (Text, Detail, Image и прочее нужно выключить)

Добавление Itema будет проходить в два цикла: первый добавляет реальный Item (0-2), а второй заполняет данными наши поля в панельках (title1, price1, bitmap1, title2, price2, bitmap2 и тд...)

4) Ну и самое важное в OnUpdateObjects все это отрисовать

Надеюсь вам это поможет!

[zairkz]

Я не знаю что там в недрах в ListView, но по скорости скролла данная реализация поспорит с многими нативными приложениями, авторы ListView молодцы, а реализация колонок Zuby как всегда на высоте!))

Тест (более 2000 элементов, с динамической подгрузкой картинок)

Изменено 18 апреля, 2016 пользователем zairkz

[Равиль Зарипов (ZuBy)]

2 часа назад, zairkz сказал:

Я не знаю что там в недрах в ListView, но по скорости скролла данная реализация поспорит с многими нативными приложениями, авторы ListView молодцы, а реализация колонок Zuby как всегда на высоте!))

Тест (более 2000 элементов, с динамической подгрузкой картинок)

Ну так начиналось это все с твоей бредовой идеи))

[andahay]

19 часов назад, krapotkin сказал:

Это PresentedScrollBox

создаете вручную свои N плиточек в FormShow
подсчитать их координаты работы на несколько минут

Если не сложно, распиши поподробнее как с ним работать или скинь статью

[AndroidHalfNoob]

ZuBy ни чего себе у вас жаренный Лагман в ресторанах стоит:) У нас 60р за порцию в 250 грамм. Грубо говоря 300-350 тенге  

Изменено 19 апреля, 2016 пользователем AndroidHalfNoob

[zairkz]

1 час назад, AndroidHalfNoob сказал:

ZuBy ни чего себе у вас жаренный Лагман в ресторанах стоит:) У нас 60р за порцию в 250 грамм. Грубо говоря 300-350 тенге  

Это еще такой средненький ресторанчик)), это ж Астана.

[haword]

у меня листвью после загрузки более 100 картинок начинал глючить. вернее вся прога глючила. все надписи были из черточек. или вообще черные полоски. такое ощущение что где то что то переполнялось. 

[krapotkin]

8 часов назад, andahay сказал:

распиши поподробнее как с ним работать

ну, ZuBy у нас признанный эксперт по таким делам, возможно, лучше поступить как он советует

а у скролла - все просто:
у нас есть компоненты (проще всего TLayout, и все нужное в него покидать) с шириной и высотой, у нас есть размер окна
высчитываем сколько влазит компонентов в рядок и в цикле каждому Layout просто присваиваем Parent:=ScrollBox1, Position.X и Position.Y рассчитываем исходя их номера ряда и номера в ряду

scroll вроде сам соображает, в какую сторону он может двигаться...

[Равиль Зарипов (ZuBy)]

8 часов назад, andahay сказал:

Если не сложно, распиши поподробнее как с ним работать или скинь статью

Вот посмотрите эту тему, там есть пример который вам поможет

[Axbor]

В 18.04.2016 в 16:29, ZuBy сказал:

Предыстория была такая:

Изначально такие плитки были сделаны на Button'ах (стиль) и TPresentedScrollBox. Но как только пошло дело в тест основательный идею тут же выбросил. 120+ элементов выключили телефон (samsung ace2 duos) при отрисовке, точней при динамической загрузке картинок. да и в целом вся эта беда работает медленней чем реализация на TListView

Я не художник, но смысл вроде передал

Пример: У нас есть 12 элементов,и 4 колонки

Можно в LV отрисовывать дополнительные "контролы" и поместить в один реальный айтем, 4 виртуальные панельки (в нашем случае)

Для того чтобы такое получилось:

1) ListView должна при ресайзе рассчитать сколько колонок она может иметь (ширина LV / на ширину одной панельки)

2) дальше Вам нужно будет разбить отрисовку Itema на 4 панельки

    2.1) тоже самое проделать и при выделении

3) При таком подходе не будет стандартных элементов отображения (Text, Detail, Image и прочее нужно выключить)

Добавление Itema будет проходить в два цикла: первый добавляет реальный Item (0-2), а второй заполняет данными наши поля в панельках (title1, price1, bitmap1, title2, price2, bitmap2 и тд...)

4) Ну и самое важное в OnUpdateObjects все это отрисовать

Надеюсь вам это поможет!

При resize е что надо делать? Как то не понял этот момент... Если вот осталось место еще для нескольких панелок, можно ли изменит Parent внизу стоящего Button a? и вообще вот эти ваши панельки Button ы же да?

Изменено 1 июля, 2016 пользователем Axbor
upd

[Равиль Зарипов (ZuBy)]

6 минут назад, Axbor сказал:

При resize е что надо делать? Как то не понял этот момент... Если вот осталось место еще для нескольких панелок, можно ли изменит Parent внизу стоящего Button a?

видимо вы не поняли, что это не кнопки, у них нет парентов.

[Axbor]

11 минуту назад, ZuBy сказал:

видимо вы не поняли, что это не кнопки, у них нет парентов.

Панельки не TListItemButton или как оно там называлось?

[Равиль Зарипов (ZuBy)]

5 минут назад, Axbor сказал:

Панельки не TListItemButton или как оно там называлось?

Нет, там только TListItemText и TListItemImage. Просто визуально сделано так, как будто они лежат еще на чем то.

[Axbor]

5 минут назад, ZuBy сказал:

Нет, там только TListItemText и TListItemImage. Просто визуально сделано так, как будто они лежат еще на чем то.

Извините за дурацкие вопросы, но вот как это сделан визуально?что вот это белое?

Изменено 1 июля, 2016 пользователем Axbor

[Равиль Зарипов (ZuBy)]

Если вам будет понятно, это стиль айтема отрисованный несколько раз. Поэтому визуально вы видите несколько плиток, а не одну как обычно 

[Axbor]

3 минуты назад, ZuBy сказал:

Если вам будет понятно, это стиль айтема отрисованный несколько раз. Поэтому визуально вы видите несколько плиток, а не одну как обычно 

наверно я всё спутал с этим

Значит по порядку... Я понял что каждая строчка это ListViewItem, и в каждом ListViewItem добавлена TListItemText, TListItemImage, получается на каждом ListViewItem будет по нескольких TListItemText и TListItemImage.. Я просто не понял вот ListViewItem там один фон, и когда я всё это просто нарисую они не будут раздельными как на вашем примере... Вот как добиться такого эффекта? (Сейчас я думаю о том что белая полоса на нижнем части это продолжение ListItemImage...). А где можно найти вашу приложение?

[Равиль Зарипов (ZuBy)]

21 минуту назад, Axbor сказал:

наверно я всё спутал с этим

Значит по порядку... Я понял что каждая строчка это ListViewItem, и в каждом ListViewItem добавлена TListItemText, TListItemImage, получается на каждом ListViewItem будет по нескольких TListItemText и TListItemImage.. Я просто не понял вот ListViewItem там один фон, и когда я всё это просто нарисую они не будут раздельными как на вашем примере... Вот как добиться такого эффекта? (Сейчас я думаю о том что белая полоса на нижнем части это продолжение ListItemImage...). А где можно найти вашу приложение?

Да вот теперь все правильно понимаете, чтобы разделить визуально колонки пришлось не мало кода дописать в самом FMX.ListView.pas там же сделано и выделения и собственный обработчик нажатия и прочее. 

Если хотите могу добавить вас в бета-тест. В личку скиньте платформу и емайл (AppleID или Google account)

[Axbor]

3 минуты назад, ZuBy сказал:

Да вот теперь все правильно понимаете, чтобы разделить визуально колонки пришлось не мало кода дописать в самом FMX.ListView.pas там же сделано и выделения и собственный обработчик нажатия и прочее. 

Если хотите могу добавить вас в бета-тест. В личку скиньте платформу и емайл (AppleID или Google account)

Просто дайте совет, если я вот эту разделение колонок сделаю с помощи Button ов, какие проблемы возникнут? И как быть в случае Resize (ну это перемещение плиток) сейчас в голову приходит только одна идея сохранить все данные в отдельном массиве структур, и при ресайзе всё заново нарисовать ..

[Равиль Зарипов (ZuBy)]

Если Button это TButton,  проблемы возникнут во первых со стилями, если ерзать вверх вниз( освобождать и загружать) стили, то очень скоро память на девайсе закончится. О чем выше я писал.

Во вторых динамическая загрузка картинок (которую я хотел) не получилось у меня реализовать. 

[asviridenkov]

Еще можно взять готовое, которое сразу умеет в плитках что угодно отображать, да с анимированным drag-drop-ом ))

 

Елки, редактор не умеет картинки сохранять

Изменено 1 июля, 2016 пользователем asviridenkov

[Равиль Зарипов (ZuBy)]

ну мне жалко отдавать деньги за ваши компоненты, они прекрасны конечно. Но пока можно и без них справиться

Изменено 1 июля, 2016 пользователем ZuBy

[haword]

использовать плавающие панели с html текстом вместо прорисовки колонок это извращение. при этом хз как это все себя поведет при 500 панелей. ну и стоимость сего добра то же не малая.