TListBox в FireMonkey. Создание своих стилизованных итемов для TListBox. 1 часть

Компонент TListBox обладает большими возможностями по стилизации своих итемов (элементов). О том, как сделать так же, как на приведенном ниже рисунке, и пойдет речь в этой статье.

Введение

В этом примере будет продемонстрирован один из способов создания своих итемов для ListBox и заполнение их своими данными. В примере буду представлены три типа итемов: по умолчанию и два своих.

Ссылка на архив проекта: http://cc.embarcadero.com/Item/29075

Немного теории

Пара слов о загрузке стилей

Из моей предыдущей статьи вы узнали, что стиль – это по сути иерархия оъектов прикрепленная к стилизуемому компоненту. Как только стиль загружен (иерархия объектов прикреплена к компоненту) – сразу приходит оповещение об этом через событие TStyledControl.OnApplyStyleLookup, компонент получает полный доступ к объектам стиля и, пользуясь этим, задает им нужные значения.

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

Например, при загрузке стиля кнопки, кнопке нужно указать свое название в соответствующий объект TText у стиля.
При смене стиля, нужно это сделать повторно.

Эта информация понадобиться нам для понимания процесса передачи своих данных в стиль ListBoxItem.

Пара слов о работе TListBox

Представьте себе, например, лист бокс с 10 000 элементов. Для каждого элемента нужно загрузить свой стиль. Это требует большого объема дополнительной памяти для хранения каждого стиля в памяти. Однако, реально мы можем видеть только малую часть из всех элементов.

Так зачем же нам грузить стили для всех элементов?

Правильно, не за чем. Именно по этому наш TListBox может иметь сколь угодно большое число элементов, однако стили будут только у видимой части элементов. Это сокращает в разы расход память, однако дает нам дополнительную задачу о передачи данных элементов (TListBoxItem.Text, TListBoxItem.isChecked) в объекты стилей. Для решения этой задачи каждый TListBoxItem хранит в себе значение Text и isChecked. Поэтому при загрузке стиля, он их проставляет в стиль в момент загрузки стиля TListBoxItem.ApplyStyle.

А как быть, если мы хотим задать в стиль свои данные?

Например, хотим использовать TListBox как средство отображения загружаемых файлов. Включить в стиль TProgressBar и отображать в нем процесс загрузки файла.

На этот вопрос есть два способа. Отличающиеся только местом хранения данные для последующей передачи их в стиль.

1 способ. Простой.

Мы храним наши данные у себя в моделе.

Например. Храним в моделе список файлов, их состояния загрузки (загружен или нет) и размеры загруженных частей.
Далее в обработчике событий TListBoxItem.OnApplyStyleLookup мы передаем эти данные в соответствующие элементы стиля.

2 способ. Посложнее.

Мы создаем отдельный класс итема отнаследовавшись от TListBoxItem, храним наши данные там и в момент загрузки стиля TStyledControl.ApplyStyle передаем их в стиль. Таким способом сделан, например, TMetropolisUIListBoxItem.

В наших прикладных задачах удобнее использовать 1 способ. Поскольку, как правило формируемые для отображения данные уже где-то созданы и централизованно хранятся (списки, модели и тд). Поэтому в этом примере мы реализуем первый способ.

Практика

Вначале сделаем набросок формы, как на приведенном ниже рисунке. Самое главное для нас – это непосредственно сам TListBox и хранилище наших стилей TStyledBook.

На этой форме опции группы “ListBox options”, позволяют менять некоторые настройки лист бокса:

1. Прокрутка итемов с использованием мышки, а не с использованием ScroolBox.
2. Многоколоночное отображение.
3. Отображение и скрытие CheckBox у итемов.

Группа контролов “Action” позволяет нам заполнить лист бокс итемами с выбранным стилей.

Создание стилей

В этом примере мы создадим два своих стиля для отображения своих данных в элементах ListBox. На каждом из них помимо стандартных данных (Текст и чекбокс), будут еще: индикатор загрузки (TAniIndicator), полоса состояния (TProgressBar), кнопка (TButton) и прямоугольник для отображения цвета (TRectangle). Пример этих стилей приведен ниже.

Для создания стиля, открываем дизайнер стилей (двойное нажатие на TStyleBook ). В панели “Structure” отображаются текущие стили выбранного StyleBook.

Создание стилей производится путем перетаскивания нужных компонентов с “Tool Palette” в дерево стилей на панели “Structure”. Принцип создание стиля такой же, как создание интерфейса формы.

По умолчанию в структуре отображается корневой элемент - контейнер стилей, в него будут складываться все наши стили. Все дочерние узлы считаются стилями.

Чтобы задать имя стиля, нужно использовать свойство TStyledControl.StyleName.

Из доступных компонентов я набросал два стиля (См. рисунки ниже).

Используя свойство StyleName у TLayout верхнего уровня, я условно назвал стили CustomStyle1 и CustomStyle2.

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

Примечание: Свойство Name не используется для поиска составных частей стиля.

У меня получилось, что каждый стиль содержит следующие именованные составные части:

1. TCheckBox.styleName = check
2. TText.styleName = text
3. TAniIndicator.styleName = aniindicator
4. TButton.styleName = button
5. TProgressBar.styleName = progress
6. TRectangle.styleName = rectangle

Стили почти готовы. Осталось только разобраться со свойством HitTest. Поскольку стиль встраивается в контрол, то все события перемещения мыши, фокус, и тд. в начале перехватываются контролами непосредственно лежащие ближе к нам (по оси Z), а именно контролы стиля. А затем, если они не могут их обработать, то события спускаются вниз до тех пор, пока кто-нибудь их не обработает. HitTest отвечает за то, будет ли контрол перехватывать события мыши или их стоит передать родительскому контролу.

Поскольку для реализации прокрутки элементов TListBox требуется спустить событие мыши до TListBox, то соответственно всем котролам стиля объекта TListBoxItem, не используемым события мыши, нужно проставить HitTest = False.

Например: Кнопке нужны события мыши, потому что благодаря им, она перехватывает события клика кнопки.
А вот TText не требуется события мыши, потому как этот объект в нашем случае только отображает данные.

Теперь стили готовы и нам осталось только осуществить связь наших данных с составными частями стилей.

Реализация

Для хранения наших данных элементов, я создал запись следующего вида:

TListItemData = record
  Text: string;
  Checked: Boolean;
  InProgress: Boolean;
  Progress: Byte;
  Color: TAlphaColor;
  Click: TNotifyEvent;
end;

В качестве хранилища данных выбрал словарь (“Идентификатор элемента – его данные”). Идентификатор нам понадобиться для дальнейшего получения данных для ListBoxItem:

FItemsData: TDictionary;

Данные в этом примере будут генерироваться произвольным образом:

procedure TFormMain.GenerateItemsData(const ACount: Integer);
var
  I: Integer;
  ItemData: TListItemData;
begin
  for I := 1 to ACount do
  begin
    Inc(LastItemId);
    ItemData.Text := 'Item ' + IntToStr(LastItemId);
    ItemData.Checked := Random(2) = 1;
    ItemData.Progress := Random(100);
    ItemData.InProgress := Random(2) = 1;
    ItemData.Color := MakeColor(Random(255), Random(255), Random(255), 255);
    ItemData.Click := ActionItemClick.OnExecute;

    FItemsData.Add(LastItemId, ItemData);
  end;
end;

Теперь процедура динамического создания итемов и передачи наших данных в составные части стиля для лист бокса:

procedure TFormMain.CreateListBoxItem(const AItemKey: Integer; const AStyleName: string);
var
  Item: TListBoxItem;
Begin
  // Создаем элемент
  Item := TListBoxItem.Create(Self);
  // Вставляем его в листбокс
  Item.Parent := ListBox;
  // Через свойство Tag передаю ключ записи из нашего хранилища.
  // В дальнейшем через него мы получим доступ к данным хранилища FItemsData
  Item.Tag := AItemKey;
  // Подвешиваем обработчик, в котором будет происходить непосредственно
  // передача наших данных в составные части стиля
  Item.OnApplyStyleLookup := DoItemApplyStyle;
  // Указываем имя стиля
  Item.StyleLookup := AStyleName;
end;

procedure TFormMain.DoItemApplyStyle(Sender: TObject);
var
  Item: TListBoxItem;
  ItemKey: Integer;
  StyleObject: TFmxObject;
  AniIndicator: TAniIndicator;
  Rectangle: TRectangle;
begin
  Assert(Sender is TListBoxItem, 'This handler is not intended for other objects. Only for TListBoxItem');

  if not (Sender is TListBoxItem) then
    Exit;
  // Вытаскиваем TListBoxItem, в который загружен стиль, и ключ для получения данных из FItemsData
  Item := Sender as TListBoxItem;
  ItemKey := Item.Tag;
  // TListBoxItem сам хранит значения (текста и CheckBox) и предоставляет нам
  // свойства Text, IsChecked для их задания.
  Item.Text := FItemsData[ItemKey].Text;
  Item.IsChecked := FItemsData[ItemKey].Checked;
  // StyledData – это один из способов передачи данных в указанный элемент стиля (через StyleName),
  // используемый механизм RTTI. Фактически внутри идет проверка типа передаваемого значения
  // TValue и в соответствии с ним происходит задание предопределенных свойств.
  // Отмечу, что этим способом можно задать значения только для некоторых свойств.
  Item.StylesData['progress'] := TValue.From(FItemsData[ItemKey].Progress);
  Item.StylesData['button'] := TValue.From(FItemsData[ItemKey].Click);

  // Этот способ самый универсальный.
  // Метод FindStylResource ищет в стиле объект с указанным stylename.
  StyleObject := Item.FindStyleResource('aniindicator');
  if Assigned(StyleObject) and (StyleObject is TAniIndicator) then
  begin
    AniIndicator := StyleObject as TAniIndicator;
    AniIndicator.Enabled := FItemsData[ItemKey].InProgress;
  end;

  StyleObject := Item.FindStyleResource('rectangle');
  if Assigned(StyleObject) and (StyleObject is TRectangle) then
  begin
    Rectangle := StyleObject as TRectangle;
    Rectangle.Fill.Color := FItemsData[ItemKey].Color;
  end;
end;

Вот в принципе и все важные детали. Остальное смотрите в примере, который можно скачить от сюда http://cc.embarcadero.com/Item/29075 Смотрите, пробуйте, спрашивайте.

Posted by ybrovin on October 11th, 2012 under Firemonkey (RUS) |