• 0
uakmal

[TListBox] Как отобразить итемы в виде панелей?

Вопросы

Привет, как можно из listbox сделать список панелек для  iOS и Android? Прилагается фото панелей.

post-1400-0-24386800-1435174680.png

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

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


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

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

  • 0

Добрый день,

  1. Делаете стиль для итема, в виде панельки
  2. Устаналиваете в лист боксе размер итема: ItemHeight, ItemWidth.
  3. Для всех итемов устанавливаете ваш стиль
  4. Все готово.

P.S. TGridLayout не лучший выбор при большом количестве итемов. Так как листбокс реально грузит стили только для видимой части итемов. И при прокрутке только меняет стили местами. А TGridLayout загрузит все элементы. В итоге проигрышь по памяти и по скорости.

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


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

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

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


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

Добрый день,

  1. Делаете стиль для итема, в виде панельки
  2. Устаналиваете в лист боксе размер итема: ItemHeight, ItemWidth.
  3. Для всех итемов устанавливаете ваш стиль
  4. Все готово.

P.S. TGridLayout не лучший выбор при большом количестве итемов. Так как листбокс реально грузит стили только для видимой части итемов. И при прокрутке только меняет стили местами. А TGridLayout загрузит все элементы. В итоге проигрышь по памяти и по скорости.

а почему не ListView? он же вроде побыстрее будет или нет?

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


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

 

Добрый день,

  1. Делаете стиль для итема, в виде панельки
  2. Устаналиваете в лист боксе размер итема: ItemHeight, ItemWidth.
  3. Для всех итемов устанавливаете ваш стиль
  4. Все готово.

P.S. TGridLayout не лучший выбор при большом количестве итемов. Так как листбокс реально грузит стили только для видимой части итемов. И при прокрутке только меняет стили местами. А TGridLayout загрузит все элементы. В итоге проигрышь по памяти и по скорости.

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

 

Добрый день со стилями все очень просто кликаете по нужному компоненту правой там есть два пунк которые вам нужны 

edit custom stail (свой уникальный стиль)

edit default stail (дефолтный стиль для всех копий компонентов по умолчанию)

при клике перейдете в редактор  а там все просто  

post-1039-0-70247400-1435315466.jpg

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

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


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

Добрый день,

  1. Делаете стиль для итема, в виде панельки
  2. Устаналиваете в лист боксе размер итема: ItemHeight, ItemWidth.
  3. Для всех итемов устанавливаете ваш стиль
  4. Все готово.

P.S. TGridLayout не лучший выбор при большом количестве итемов. Так как листбокс реально грузит стили только для видимой части итемов. И при прокрутке только меняет стили местами. А TGridLayout загрузит все элементы. В итоге проигрышь по памяти и по скорости.

День добрый, если не трудно подскажите, как делать стиль для итемов? Заранее спасибо.

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


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

Народ, подскажите пожалуйста как сделать стиль для итемов?

http://fire-monkey.ru/topic/1456-tlistbox-kak-otobrazit-itemy-v-vide-panelei/#entry7066

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


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

а почему не ListView? он же вроде побыстрее будет или нет?

TListView хорош для отображения большого объема данных. Но он с точки зрения добавления отдельных полей внутрь итемов, требует дополнительных знаний. ПОэтому если данных не много, то для этих вещей хорошо подходит TListBox, с которым проще работать.

 

Поэтому нужно смотреть по ситуации.

  1. Много итемов и мобильные платформы -> TListView
  2. Мало итемов или настольные платформы -> TListBox

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


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

 

а почему не ListView? он же вроде побыстрее будет или нет?

TListView хорош для отображения большого объема данных. Но он с точки зрения добавления отдельных полей внутрь итемов, требует дополнительных знаний. ПОэтому если данных не много, то для этих вещей хорошо подходит TListBox, с которым проще работать.

 

Поэтому нужно смотреть по ситуации.

  1. Много итемов и мобильные платформы -> TListView
  2. Мало итемов или настольные платформы -> TListBox

 

хотелось бы понять что значит "много итемов", примерная "вилка" значений!

и соответственно, "мало итемов"!

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


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

По рекомендации Ярослава сделал Listbox со стилизованными панельками (тестовый проект прилагается test.zip).

Тестировал на 50 элементах с одной небольшой картинкой. Скроллинг с рывками. При компиляции на XE7/XE7upd1 наблюдается глюк: на картинке видно что текст после скроллинга вниз/вверх на некоторых кнопках не обновился (нумерация должна быть последовательная).

post-324-0-79247600-1436627012.png

 

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


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

По-прежнему считаю, что использование TGridPanelLayout предпочтительнее, так как имеет дополнительно функцию масштабирования. Тестировал TGridPanelLayout с 200 панельками (чужой проект).  Загрузка большого количества панелек реализована порционной подгрузкой. Когда все загрузится, то скроллинг становится плавнее чем в ListBox.

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

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


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

По-прежнему считаю, что использование TGridPanelLayout предпочтительнее, так как имеет дополнительно функцию масштабирования. Тестировал TGridPanelLayout с 200 панельками (чужой проект).  Загрузка большого количества панелек реализована порционной подгрузкой. Когда все загрузится, то скроллинг становится плавнее чем в ListBox.

Привет, есть пример использования TGridPanelLayout?

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


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

50 элементов для ListBox в мобильной платформе это ооочень много. Вообще, где-то писали что ListBox следует использовать не более чем как для меню, т.е. количество элементов не более десятка, на вскидку. Если у вас список более 10 элементов, листбокс лучше не использовать. ListView очень хорош с большим количеством элементов. Основная его фишка ускорения работы, как я  понял, это то что он не держит кучу чилдрен контролов у себя и всю отрисовку делает только он сам, а вот листбокс это куча контролов, каждый из которых занимается отрисовкой. Есть у тебя 50  итемов, на них на каждом по 3 контрола, считай метод отрисовки вызовется 201 раз (1=сам листбокс, 50 это каждый итем, и еще 150 это по 3 контрола в каждом итеме).

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

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


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

Не в первый раз вижу эту тему...

TGridPanelLayout - далеко не предпочтительный вариант. Совсем.

У ListBox с его Item'ами намного больше возможностей.

С [xenon54] соглашусь, но не полностью. ListView действительно хорош (для мобильной платформы), однако он намного сложнее.

 

Примеры применения стилей для ListBoxItem (не сочтите за рекламу, так проще было... нащелкал скринов для примера):

 

post-115-0-25602800-1438247017_thumb.jpgpost-115-0-31422200-1438247021_thumb.jpgpost-115-0-58806700-1438247024_thumb.jpgpost-115-0-52819300-1438247029_thumb.jpgpost-115-0-95422500-1438247043.jpg

 

Везде - ListBox.

На последнем скрине - всплывающие сообщения на экране. Реализовано так же - прозрачная форма, ListBox и Item'ы со своим стилем В ВИДЕ ПАНЕЛЕК )

 

post-115-0-36359300-1438247352.jpgpost-115-0-20120400-1438247356.jpg

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


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

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

Единственное что пришлось сделать иначе (в нашем случае) - это список контактов (ListView). Так как у ListBox под Android не удобно реализована реакция на OnClick/OnTap и т.п. (а именно - при попытке прокрутки списка часто возникает событие OnClick). Кроме того, в данном случае, скорость работы ListView намного выше скорости работы ListBox. ListView быстрее, плавнее и т.п. Но вот реализация, повторюсь, - сложнее. Не сильно, но все же.

А вот чат сделан одинаково. Код для него один, стиль - один, все абсолютно идентично. Работает достаточно шустро. (в будущем, наверное, и чат переделаем на ListView, потому-что он подразумевает возможное наличие в "сообщениях" различных элементов: ссылки, картинки и т.д. А для них требуется уже более быстрая отрисовка).

 

post-115-0-30884200-1438250093_thumb.jpgpost-115-0-05674200-1438250097_thumb.jpg

 

Я бы написал, по возможности, все устройства на которых все это тестилось, и как и где что работает (включая некоторые отличия самих устройств, из-за которых иногда наблюдаются артефакты (!! это не из-за FMX, замечу, а именно из-за аппаратных особенностей)), но думаю это надо где-то не тут писать...

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

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


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

Лучше баги заводить в QC, указывать девайсы и прикрепить обязательно проект со скриншотами проблем. Такие баги всегда имеют приоритет над другими.

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


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

OFF:

вот ведь отличный кандидат в т.н. сниппеты для  платформы

те, что приложены к delphi, обычно сильно упрощены,

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

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


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

Да, с листвью сложней, но со временем почти все списки в приложении пришлось переделать на ListView ради производительности. Сделать с LV можно почти все что можно сделать с LB, просто сложней.

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


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

[xenon54] Если речь идет только о десктопном приложении, то у ListBox более "богатый функционал".

Например тот же ScrollBar - можно включить/выключить, сделать узким и исчезающим, сделать плавную прокрутку, анимацию AniCalculations.Animation и прочее.

post-115-0-14629500-1438256642.jpgpost-115-0-68000300-1438256646.jpg

 

Возможно я ошибаюсь на счет функциональности ListView, но ListBox намного удобнее во многих случаях.

В обоих отмеченных случаях используется ListBox. Он позволяет удобно разместить элементы с "автовыравниванием" по ширине, "не напрягая мозг".... :)

post-115-0-81368200-1438256739_thumb.jpgвот еще примерpost-115-0-73904800-1438256957_thumb.jpg

 

Согласитесь - разнообразие использования велико. Для многих, использование TListBox будет наиболее оптимальным вариантом. Здесь главное - просто создавать нужные вам стили...

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

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


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

И да, еще один важный момент!

Вы можете в ListBoxItem легко и просто помещать любые элементы, что очень (очень!) сильно упрощает процесс проектирования/создания интерфейса.

post-115-0-21779800-1438257332.jpg

 

З.Ы. отмечу, однако, что не стоит злоупотреблять кол-вом компонентов, размещенных на ListBoxItem - это, как-раз, повлечет "тормоза" при отрисовке. )

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


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

И да, еще один важный момент!

Вы можете в ListBoxItem легко и просто помещать любые элементы, что очень (очень!) сильно упрощает процесс проектирования/создания интерфейса.

attachicon.gif14.jpg

 

З.Ы. отмечу, однако, что не стоит злоупотреблять кол-вом компонентов, размещенных на ListBoxItem - это, как-раз, повлечет "тормоза" при отрисовке. )

 

Что за проект? Если не трудно скинь код реализации панелей в listbox.  Заранее спасибо!

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


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

я же наоборот использую ListView, для достижении своих целей

post-59-0-06789600-1438262040_thumb.png post-59-0-39002700-1438262046_thumb.png

post-59-0-15431500-1438262054_thumb.png

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

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


Ссылка на сообщение
Поделиться на другие сайты
Гость
Эта тема закрыта для публикации ответов.

  • Похожий контент

    • От x11
      Можно ли во время работы программы вызвать Items editor, который я вызываю во время дизайна приложения?
      Или свой лисапет создавать?
    • От x11
      Процедура добавления Item
       
      procedure TfmEditObject.AddPhoto(Image: TBitmap); Var item: TListBoxItem; imageV: TImageViewer; begin item := TListBoxItem.Create(lbPhotos); item.parent := lbPhotos; item.text := ''; item.Width := lbPhotos.Width; item.PopupMenu := PopupMenu1; imageV := TImageViewer.Create(lbPhotos); imageV.HitTest := False; imageV.Parent := item; imageV.Align := TAlignLayout.Client; imageV.Bitmap.Assign(image); item.SetFocus; end; У popupmenu есть 2 пункта, привязанных к Action.
       
      Gestures срабатывает на "long tap"
      procedure TfmEditObject.lbPhotosGesture(Sender: TObject; const EventInfo: TGestureEventInfo; var Handled: Boolean); var c: IControl; ListBox: TListBox; lbxPoint: TPointF; ListBoxItem: TListBoxItem; begin if EventInfo.GestureID = igiLongTap then if (sender is TListBox) and assigned(TListBox(sender).Selected) then begin c := ObjectAtPoint(EventInfo.Location); if Assigned(c) then if Assigned(c.GetObject) then if c.GetObject is TListBox then begin ListBox := TListBox(c.GetObject); lbxPoint := ListBox.AbsoluteToLocal(EventInfo.Location); ListBoxItem := ListBox.ItemByPoint(lbxPoint.X, lbxPoint.Y); if Assigned(ListBoxItem) then PopupMenu1.Popup(lbxPoint.X, lbxPoint.Y); Handled := True; end; end; end;  
      Ставил точку останова, видно, что до строки "PopupMenu1.Popup(lbxPoint.X, lbxPoint.Y);" доходит.
      Если программа работает на Windows, то меню отображается по правой кнопке мышки, а на андроид устройстве меню не отображается по Long Tap.
       
      Как видно из кода, то меню прикручивается к ListBoxItem, а непосредственно к TListBox меню прикрутил в дизайне.
    • От x11
      Хочу реализовать прокрутку фото с помощью TListBox.
      Пока что в дизайне добавил пару Item и кинул на них TImageViewer, ну и картинку туда вставил.
      В свойстве TListStyle указал Horizontal. На Windows не листается мышкой влево/вправо, но есть хотя бы полоса прокрутки внизу.
      На андроид-устройстве и не листается, и полосы прокрутки нет вообще.
      Это связано с этим вопросом http://fire-monkey.ru/topic/4301-выводотображение-нескольких-картинок-на-форме
    • От x11
      В свойстве TListBox.ListStyle установил значение Horizontal. Список поменял вид.
      Теперь ставлю Vertical, но ничего не происходит.
      Как вернуть стиль списка обратно к вертикальному?
    • От Euvene
      Добрый день, возникла такая проблемка: при добавлении в ListBoxItem компонента TEdit если поставить ему TControlType::Platform он вылазит за пределы ListBox но при Styled все норм, кто нибудь сталкивался и как с этим бороться?


    • От ENERGY
      Что лучше в плане производительности использовать из этих компонентов для Android и iOS?
      Мне показалось что TlistBox как то дольше создается и грузится (я использую фрэймы (TFrame), которые создаются в RunTime, но сделаны они в Design Time) 
      На компоненте будут лежать Editbox 2x, лэйблы, Tmemo, DateEdit, TimeEdit.
      TListBox удобен тем что (я так понимаю) он автоматом подстроит визуальный стиль заголовков и пунктов под текущую систему (fix me?).
      А вот TScrollBar это не сделает. Кстати, если использовать этот компонент, скроллбар, как отделить пункты рамкой (горизонтальной чертой?). Может есть какой то межплатформенный TBorder, который отображается в нужной стиле? А если использовать TLine то какого цвета его делать (DarkGray?), кто нибудь знает?
      Спасибо.
    • От chaplin.u@gmail.com
      Как сделать разделители между итемами. Как на картинке.

    • От AlexG
      Привет друзья!
      Возникла странная ситуация при работе с TListBox. А именно - при попытке прокрутки списка в его конец.
      Условно:
      - есть список итемов (сообщения чата);
      - загрузка сообщений происходит в процедуре "синхронизированной" с главным потоком и заключена в TListBox(listbox1).BeginUpdate  и TListBox(listbox1).EndUpdate;
      - все замечательно грузится
      НО! После загрузки Итемов требуется прокрутить список в его конец. И вот тут начинаются "приколы".
      Как только не пытаться прокрутить список в его конец (разные способы, см.ниже) - всегда получается, что список прокручивается до конца, но немного "откатывается" вверх. Размер его автоматического скролла "обратно" зависит от количества Item в TListBox! Чем больше кол-во Item - тем больше назад откатывается скролл.
      Способы прокрутки в конец списка - значения не имеют. Всегда одно и то же.
      procedure TChatListBoxEx.ScrollToLast; var   Item: TListBoxItem; begin // ВАРИАНТ 1   Item := ListItems[Items.Count - 1];   if Assigned(Item) then     ScrollToItem(Item); // ВАРИАНТ 2   ViewportPosition:= TPointF.Create(0, Item.ParentedRect.Top); // ВАРИАНТ 3   ScrollBy(0, ViewportPosition.Y - Item.ParentedRect.Top); // ВАРИАНТ 4   BeginUpdate;   try     ItemIndex := Items.Count - 1;   finally     EndUpdate;   end; end; Предупреждая ваши вопросы, сразу скажу - пробовал и другие варианты, просто перечислять не стал все. Пробовал и эмитировать нажатие клавиши END при "активном" списке.
      Все синхронизируется, типа 
      TThread.Synchronize(nil, listbox1.ScrollToLast); Эффект всегда один и тот же...
      НО! Если загрузить список, независимо от кол-ва элементов списка, а потом в программе вызвать ScrollToLast, подождав некоторое время, а не сразу, например по нажатию на какую-нибудь кнопку, то список прокрутится в конец НОРМАЛЬНО!
      Будьте добры - кто сталкивался с подобной ситуацией, или кто что-то может посоветовать?
      Или наши Гуру смогут ответить на этот вопрос?
      Видео, чтобы было понятнее что происходит, прилагаю.
      RAD Studio 10.1 Berlin (эффект наблюдается на всех версиях Windows - XP, Vista, 7, 8, 10. На других ОС пока не пробовал...)
      Заранее благодарен!
      P.S. Возник вопрос (как вариант решения проблемы) - как узнать, что произошло событие окончания отрисовки TListBox? А именно - список заполнился, выполнилась отрисовка и можно прокручивать.
    • От M1shQa
      Есть один листбокс..) В общем парился я парился, так и не понял как запилить стиль по человечески для итемов в боксе и нашел кнопку Edit default Style. Нашел куда впилить TimageViewer и поставил ему свойство client. Все бы ничего, да вот размер итемов не статичен, а картинка не растягивается, к тому же pngшная картинка не отделяется от фона. Подскажите, как картинку растягивать в зависимости от длины и ширины итемов листбокса и как правильно юзать pngшные картинки (что бы они сохраняли прозрачность). Может я вообще не туда рою и нужно другими способами вставлять картинки под каждый item? Видел много гайдов под listview, но к сожалению мне нужно именно для бокса..
      ----
      п.с. что бы было проще: как нарисовать ровную плашку позади каждого элемента листбокс?
    • От chaplin.u@gmail.com
      Поставил несколько TCheckBox на TListBox и на 4 инчевой  мобилке очень плохо реагируют на нажатия пальцами. В лучшем случае требуется пару раз тапнуть а то и пять-шесть.
      Причём пока никакого кода не вводил. По умолчанию у всех стоит  HitTest = True.
  • Последние посетители   0 пользователей онлайн

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