Перейти к содержанию
  • 0
uakmal

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

Вопросы

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

post-1400-0-24386800-1435174680.png

Отредактировал uakmal

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


Ссылка на сообщение

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

  • 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

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

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


Ссылка на сообщение
  • 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

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


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

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

    • От antarey
      Добрый день. Как програмно прокрутить TListBox на последний итем?
          TListBoxItem *logItem = new TListBoxItem(Application);     logItem->Parent = cbLog;     logItem->Name = "item" + IntToStr(itemIndex);     logItem->Text = Now().FormatString("dd:mm:yy") + " : " + text; ;     logItem->ImageIndex = ImageIndex;     logItem->TextSettings->WordWrap = true;     cbLog->ItemIndex = cbLog->Items->Count - 1;     cbLog->ScrollToItem(logItem); последние две строки, по идее должны прокрутить на последний елемент списка, но последний елемент выделяется а прокрутка в начале списка
    • От Malstream
      Недавно решил написать небольшое приложение под андроид, которое будет в удобном виде показывать расписание моего ВУЗа (они нам передают 20 летний привет в виде экселя), ну и задно изучить FMX.
      Написал за пару дней парсер, все более менее работает. Встал вопрос - какими компонентами все это удобно и красиво отобразить? Перечитал кучу инфы по стандартным компонентам и, кажется, они мне не подойдут
      Для того чтобы было понятно, чего именно я хочу - набросал схему. Границы для наглядности. 
      Каким компонентом это можно реализовать? Если все-таки коробочные тоже годятся, то ткните лицом куда читать :)
      Заранее спасибо.

    • От Вячеслав
      Добрый день, форумчане! Столкнулся со следующей задачей: 
      Имеется TListBox с 32 итемами, задаются в DesignTime. В некоторых ситуациях требуется убрать половину, оставить только первые 16 итемов. Я делаю лишние невидимыми, но при этом область прокрутки листбокса остается прежней и излишне большой. В связи с этим вопрос: можно ли как-то ограничить область прокрутки? 
      XE7, Windows.
    • От 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
      Как сделать разделители между итемами. Как на картинке.

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

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

×
×
  • Создать...