Translate

воскресенье, 27 ноября 2016 г.

#1 ModernListView - горизонтальный режим

Доброго времени суток!

Я уже кратко рассказал о ModernListView в предыдущем посте, теперь бы хотел чуть подробней рассказать о горизонтальном режиме.


В одном из своих проектов мне потребовалось сделать горизонтальный список, который использовался как фильтр для выбора категорий товаров, я пробовал использовать разные сочетания компонентов, таких как TPresentedScrollBox, TListBox, но быстродействие мне не понравилось. В качестве бреда решил перевернуть отрисовку в TListView с Y на X.
Первое решение было в виде отдельного компонента для Seattle, называлось оно TListViewHorz. С выходом Berlin'a значительную часть TListView переписали и портировать TListViewHorz было сложно, я принял решение повторить такой же трюк, но уже в рамках надстройки, а не отдельного компонента.

Для переворота TListView в горизонтальный режим, пришлось внести много кода, но в основном это было смена параметров в отрисовке элементов Y -> X, Height -> Width, это если кратко 😄 Подробней можете посмотреть в исходниках.

Немного кода
class procedure TmyLVConfig.makeCategory(const aLV: TListView);
const
  CTitle: array [0 .. 5] of string = ('Лучшее', 'Игры', 'Категории', 'Бета', 'Для всей семьи', 'Выбор редакции');
var
  I: Integer;
begin
  aLV.Horizontal := true;
  aLV.ItemAppearance.ItemAppearance := 'ListItem';
  aLV.ItemAppearance.ItemHeight := 100;
  aLV.ItemAppearanceObjects.ItemObjects.Accessory.Visible := false;
  aLV.ItemAppearanceObjects.ItemObjects.Text.TextAlign := TTextAlign.Center;
  aLV.StyleLookup := 'listviewstyle_panel';
  aLV.ShowScrollBar := false;
  aLV.MakeSelectedItemVisible := false;

  for I := Low(CTitle) to High(CTitle) do
  begin
    with aLV.Items.Add do
      Text := CTitle[I];
  end;
end;

Тут все стандартно, опишу только некоторые моменты
  •  ВАЖНО помнить! <TListView>.ItemAppearance.ItemHeight - в горизонтальном режиме TListView принимает это значение не для высоты, а для ширины Item'a, высотой Item'a будет <TListView>.Height 
  • <TListView>.StyleLookup := 'listviewstyle_panel' - в демо проекте приложил стиль для отображения Item'ов плитками
  • <TListView>.ShowScrollBar := false - скрываем полосу прокрутки
  • <TListView>.MakeSelectedItemVisible := false - при нажатии на Item TListView позиционирует его в видимую область, это очень напрягает, поэтому отключаем
В горизонтальном режиме использование хидеров не красиво реализовано, это попробую профиктить как будет время. Но в основном работа отлажена и пригодна к использованию

Демо проект выложен на GitHub, там же есть второй пример с картинкой