• 0
andahay

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

Вопросы

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

apps.8981.13510798886605648.30220231-2fe1-4033-8cb8-4ad070099854.jpg

Изменено пользователем andahay

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

58 ответов на этот вопрос

  • 0

Это PresentedScrollBox

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 1

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

Screenshot_20160418-143333.png

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
40 минут назад, ZuBy сказал:

Screenshot_20160418-143333.png

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 1
1 час назад, Rusland сказал:

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

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

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

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

Пример: У нас есть 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 все это отрисовать

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

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

Изменено пользователем zairkz

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
2 часа назад, zairkz сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
19 часов назад, krapotkin сказал:

Это PresentedScrollBox

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

Изменено пользователем AndroidHalfNoob

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
1 час назад, AndroidHalfNoob сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
8 часов назад, andahay сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
8 часов назад, andahay сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
В 18.04.2016 в 16:29, ZuBy сказал:

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

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

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

Пример: У нас есть 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 ы же да?

Изменено пользователем Axbor
upd

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
6 минут назад, Axbor сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
11 минуту назад, ZuBy сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
5 минут назад, Axbor сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
5 минут назад, ZuBy сказал:

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

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

Изменено пользователем Axbor

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
3 минуты назад, ZuBy сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
21 минуту назад, Axbor сказал:

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0
3 минуты назад, ZuBy сказал:

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

metro1.png

 

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

metro1.png

Изменено пользователем asviridenkov

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

Изменено пользователем ZuBy

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу