Перейти к содержанию
Fire Monkey от А до Я
  • 0

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


andahay

Вопрос

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

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

Изменено пользователем andahay
Ссылка на комментарий
  • Ответы 58
  • Создана
  • Последний ответ

Лучшие авторы в вопросе

Рекомендуемые сообщения

  • 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
  • Модераторы
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 панелей. ну и стоимость сего добра то же не малая. 

Ссылка на комментарий

Присоединяйтесь к обсуждению

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

Гость
Ответить на вопрос...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

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

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