• 0
ENERGY

TListView Custom checkboxes (иконка чекбокс "избранное")

Вопрос

Привет.

Я к своему стыду так и не научился толком работать с TListView. 

TListBox это сделать просто, а вот как это сделать в TListView... Это сложный компонент.

Подскажите как правильно реализовать.

Нужно добавить с правой стороны каждого Item иконку избранное, которая работала бы как чекбокс - если нажать по ней то звездочка становится желтой и без заливки (Checked/unchecked) .

Насколько я понял в GlyphButton нельзя добавить картинку.. Как же тогда это сделать?

Спасибо.

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

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


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

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

  • 0
17 часов назад, Равиль Зарипов (ZuBy) сказал:

как-то так, но это наверное сложно для понимания)

LVStars.rar

Огромное спасибо Равиль! Как хорошо что вы помогаете.

Итак для тех кто не знает, в TListView есть режим DynamicAppearance , который позволяет добавлять предустановленные элементы - картинки, текст, GlyphButon. В хелпе  написано что их может быть любое количество.

Итак добавляем TListView, в панели Structure  выбираем TListView > ItemAppearance > Item.

В инспекторе объектов выбрать свойство Appearance и  комбобоксе Dynamic Appearance. Рядом в инспекторе появится свойство Objects - нажать на него и там уже добавляем нужные поля. Там же можно переименовать поле, в AppearanceObjectName чтобы позже использовать в RunTime. У меня периодически на этих этапах вылетает Catastrophic Failure и среду приходится терминировать с диспетчера (Berlin Update 2).

Дальше, жмем правой кнопкой мыши по ListView и выбираем Toggle Design Mode, где можно увидеть эти добавленные Custom поля и расставить их мышкой и указать выравнивание.

Это имя затем можно использовать в Runtime, для картинки это индекс в ImageList, который нужно указать в ListView  таким образом (за это еще раз спасибо Равилю! :), почему это сделали так неочевидно и почему это не указано в мануале, остается загадкой.. 

Для TImageObjectAppearance с именем Star - 

ListView1.Items.Add.Data['Star'] := Integer(1);

Например заполняем список с картинками с индексами 0 и 1:

procedure TForm5.FormShow(Sender: TObject);
var
  I: Integer;
begin
  for I := 0 to 9 do
  begin
    with ListView1.Items.Add do
    begin
      Text := 'Item ' + I.ToString;
      Data['Star'] := Integer(I mod 2 = 0);
    end;
  end;
end;


Переключаем с картинки с индексом 1 на 0 и наоборот.

procedure TForm5.ListView1ItemClick(const Sender: TObject; const AItem: TListViewItem);
begin
  AItem.Data['Star'] := AItem.Data['Star'].AsInteger xor 1;
end

;
 

 

 

Равиль Зарипов (ZuBy) и Rusland понравилось это

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


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

Создайте аккаунт или войдите для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!


Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.


Войти сейчас

  • Похожие публикации

    • Автор: ENERGY
      Нужно сделать компонент TGrid. Стандартный Grid не подходит, потому что нужно чтобы строки (raws) были разной высоты, а также чтобы была возможность соединять (сливать) ячейки.
      Я решил сделать его на основе TListView и его DynamicAppearance. Использовать кастомные объекты, отнаследованные от TListItemObject + возможность рисовать на Canvas каждого ListItem, например прямоугольники.
      Т.к. колонки он не поддерживает, есть идея использовать THeader и подстраивать их под размер своих колонок. Также важно быстродействие компонента.
      Как вы думаете есть ли в этом смысл?
      Возможно кто-то уже занимался подобным, и может что-нибудь посоветовать.
      Спасибо.
       
    • Автор: Евгений Корепов
      Господа и товарищи, помогите тупому мне! Столкнулся с странным. Под windows все отлично работает, а под android не могу добиться загрузки картинок. Мозг уже сломал.
      Собрал тестовый проект - в ListView (DynamicAppearance) добавляем 4 ListViewItem, в ListViewUpdatingObjects все создаем и грузим картинки из инета (потоки и прочее убрал для упрощения). Картанка слева, текст (URL) справа, проще некуда. Прилагаю к сообщению архив проекта и код.
      unit Unit1; interface uses System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants, FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.ListView.Types, FMX.ListView.Appearances, FMX.ListView.Adapters.Base, FMX.ListView, System.Net.HTTPClient, FMX.Objects; type TFormMain = class(TForm) ListView: TListView; procedure ListViewUpdatingObjects(const Sender: TObject; const AItem: TListViewItem; var AHandled: Boolean); procedure FormShow(Sender: TObject); procedure FormCreate(Sender: TObject); private { Private declarations } public { Public declarations } ListViewUpdate : Boolean; procedure MyListViewUpdateObjects(const AListView: TListView; const AItem: TListViewItem); procedure InitListView(AListView : TListView); function LoadImageFromURL(AURL : String) : TBitmap; end; var FormMain: TFormMain; implementation {$R *.fmx} procedure TFormMain.FormCreate(Sender: TObject); begin ListViewUpdate:=False; end; procedure TFormMain.FormShow(Sender: TObject); begin InitListView(ListView); end; procedure TFormMain.InitListView(AListView : TListView); Var AListViewItem : TListViewItem; AImageURL : String; begin AImageURL:='http://kayfolom.ru/images/test/'; ListViewUpdate:=True; AListViewItem:=AListView.Items.Add; AListViewItem.Data['ImageURL']:=AImageURL + 'logo.png'; ListViewUpdate:=False; AListViewItem.Adapter.ResetView(AListViewItem); ListViewUpdate:=True; AListViewItem:=AListView.Items.Add; AListViewItem.Data['ImageURL']:=AImageURL + '000487806d3a2ab98aeb2c47b810fc8b.jpg'; ListViewUpdate:=False; AListViewItem.Adapter.ResetView(AListViewItem); ListViewUpdate:=True; AListViewItem:=AListView.Items.Add; AListViewItem.Data['ImageURL']:=AImageURL + '0012ef6cb42e95268a4cd1d832a2b93a.jpg'; ListViewUpdate:=False; AListViewItem.Adapter.ResetView(AListViewItem); ListViewUpdate:=True; AListViewItem:=AListView.Items.Add; AListViewItem.Data['ImageURL']:=AImageURL + '0022454ccb4f81a701cb3a3c89d52d2f.jpg'; ListViewUpdate:=False; AListViewItem.Adapter.ResetView(AListViewItem); end; procedure TFormMain.ListViewUpdatingObjects(const Sender: TObject; const AItem: TListViewItem; var AHandled: Boolean); begin if Not ListViewUpdate then begin MyListViewUpdateObjects(Sender as TListView, AItem); AHandled:=True; end; end; procedure TFormMain.MyListViewUpdateObjects(const AListView: TListView; const AItem: TListViewItem); Var AName : TListItemText; AImage : TListItemImage; AvailableWidth, ImageWidth, ImageHeight : single; function SetupTextObject(const AName, AText : String; AFontSize : Single; AFontStyles : TFontStyles; AWidth, AHeight, X , Y : Single; AAlign, AVertAlign: TListItemAlign; ATextAlign, ATextVertAlign: TTextAlign) : TListItemText; begin Result:=TListItemText(AItem.View.FindDrawable(AName)); if Result=Nil then Result:=TListItemText.Create(AItem); Result.Name:=AName; Result.Width:=AWidth; Result.WordWrap:=True; Result.Font.Size:=AFontSize; Result.Font.Style:=Result.Font.Style + AFontStyles; Result.Trimming:=TTextTrimming.None; Result.Text:=AText; Result.PlaceOffset.X:=X; Result.PlaceOffset.Y:=Y; Result.Align:=AAlign; Result.VertAlign:=AVertAlign; Result.TextAlign:=ATextAlign; Result.TextVertAlign:=ATextVertAlign; Result.Height:=AHeight; end; function SetupImageObject(const AName : String; AWidth, AHeight, X , Y : Single; AAlign, AVertAlign: TListItemAlign) : TListItemImage; Var AImageURL : String; begin Result:=TListItemImage(AItem.View.FindDrawable(AName)); if Result=Nil then begin Result:=TListItemImage.Create(AItem); AImageURL:=AItem.Data['ImageURL'].AsString; Result.Bitmap:=LoadImageFromURL(AImageURL); end; Result.Name:=AName; Result.Width:=AWidth; Result.Height:=AHeight; Result.PlaceOffset.X:=X; Result.PlaceOffset.Y:=Y; Result.Align:=AAlign; Result.VertAlign:=AVertAlign; Result.ScalingMode:=TImageScalingMode.StretchWithAspect; end; begin AvailableWidth:=AListView.Width - AListView.ItemSpaces.Left - AListView.ItemSpaces.Right; // Изображение размещаем слева ImageWidth:=AvailableWidth / 3; ImageHeight:=AvailableWidth / 3; AImage:=SetupImageObject('Image', ImageWidth, ImageHeight, 0, 0, TListItemAlign.Leading, TListItemAlign.Leading); // Текст справа AName:=SetupTextObject('Name', AItem.Data['ImageURL'].AsString, 14, [], AvailableWidth - ImageWidth, ImageHeight, ImageWidth, 0, TListItemAlign.Leading, TListItemAlign.Leading, TTextAlign.Center, TTextAlign.Center); AItem.Height:=Round(ImageHeight + AListView.ItemSpaces.Top + AListView.ItemSpaces.Bottom); end; function TFormMain.LoadImageFromURL(AURL : String) : TBitmap; Var AHTTPClient : THTTPClient; AStream : TMemoryStream; HTTPResponse : IHTTPResponse; begin Result:=Nil; AHTTPClient:=THTTPClient.Create; AStream:=TMemoryStream.Create; try HTTPResponse:=AHTTPClient.Get(AURL, AStream); finally if HTTPResponse.StatusCode=200 then Result:=TBitmap.CreateFromStream(AStream); end; end; end.  
      test092 ListView with Image.7z
    • Автор: Евгений Корепов
      При расчете высоты TListItemText приходилось использовать костыль - указывать размер шрифта отличный от 12 (например 12.01 и т.д.), если эти пренебречь, то расчет высоты не работал и текст или резался или высота итема оказывалась гораздо больше текста. Проблема в том, что на стадиях расчета высоты, к TListItemText еще не применен стиль, и параметры шрифта не соответствуют тому как будет выглядеть окончательный вариант на экране.
      Для правильного расчета высоты нужно выдернуть шрифт из стиля, делается это вот так:
      Var AFontObject : TFontObject; AListItemText : TListItemText; ... AListItemText:=TListItemText(AItem.View.FindDrawable(AName)); if AListItemText=Nil then AListItemText:=TListItemText.Create(AItem); AFontObject:=(AListView.FindStyleResource('font') as TFontObject); if Assigned(AFontObject) then AListItemText.Font.Assign(AFontObject.Font); //Теперь вычисление высоты имеет смысл и не нужно задавать размер шрифта - он берется из стиля. AListItemText.Height:=CalculateHeight(AListItemText, AListView, FTextLayout); Или можно затолкать это действие в функцию вычисления высоты:
      function CalculateHeight(const AListItemText : TListItemText; const AListView : TListView; const FTextLayout : TTextLayout) : Single; Var AFontObject : TFontObject; begin FTextLayout.BeginUpdate; try FTextLayout.Text:=AListItemText.Text; FTextLayout.MaxSize:=TPointF.Create(AListItemText.Width, TTextLayout.MaxLayoutSize.Y); AFontObject:=(AListView.FindStyleResource('font') as TFontObject); if Assigned(AFontObject) then FTextLayout.Font.Assign(AFontObject.Font) else FTextLayout.Font.Assign(AListItemText.Font); FTextLayout.WordWrap:=AListItemText.WordWrap; FTextLayout.Trimming:=AListItemText.Trimming; FTextLayout.HorizontalAlign:=AListItemText.TextAlign; FTextLayout.VerticalAlign:=AListItemText.TextVertAlign; finally FTextLayout.EndUpdate; end; // Result:=FTextLayout.Height * 1.4; // Теперь этот костыль не нужен Result:=FTextLayout.Height; end; Внимание! Если вы заполняете еще невидимый на экране ListView, не забудьте выполнить ListView.ApplyStyleLookup перед добавлением Items, иначе не получите правильный размер шрифта из стиля.
    • Автор: ENERGY
      Меня это проблема преследует со времен VCL...
      Подскажите как же ее решить...
      FMX TListView - ItemAppearanceName = ImageListItem.   Лежит fmx TimageList, в настройках указано 16x16 и прорачный цвет clNone, добавил одну иконку 16x16 с прозрачностью. Если запустить под Windows 10  все ок. Если запустить под Android то при выделении (selected) вместо прозрачности белый цвет. В результате иконка некрасиво обрамлена в белом квадрате.. Иконку делал в Axiallis IconWorkShop, сохранил как ico,  Пробовал заливать белым вместо прозрачного, и затем ставить в TimageList белый как прозрачный - тоже самое...
      Что же делать...
    • Автор: gresaggr
      Добрый день.
      Подскажите, пожалуйста, как можно реализовать на Berlin для Андроида такую таблицу без StringGrid'а (динамически)?

       
    • Автор: Равиль Зарипов (ZuBy)
      Ссылка: http://blog.rzaripov.kz/2016/12/3-modernlistview.html
      Автор: Зарипов Равиль @ZuBy
      Описание:  Реализация динамической подгрузки контента:
      Бесконечный скроллинг (например как лента в ВК) Паджинация/Пагинация (постраничная загрузка)
    • Автор: AlexG
      Добрый вечер, друзья!
      Кто в курсе, подскажите - возможен ли плавный скроллинг содержимого TListView при работе приложения под Windows?
      Если с мобильным вариантом все ОК, на "автомате" - т.е. плавный скроллинг там работает по умолчанию, то с работой под Windows что-то не понятно как это включить/реализовать.
      Например, чтобы сделать плавный скролл содержимого TListBox, достаточно написать
      TScrollBox(__listbox1___).AniCalculations.Animation := True; А есть ли что-то аналогичное для TListView?
      Заранее благодарен за ответы!
    • Автор: Равиль Зарипов (ZuBy)
      Ссылка: http://blog.rzaripov.kz/2016/11/2-modernlistview.html
      Автор: Зарипов Равиль @ZuBy
      Описание: Как сделать режим мультивыделения в TListView

    • Автор: Равиль Зарипов (ZuBy)
      Ссылка: http://blog.rzaripov.kz/2016/11/1-modernlistview.html
      Автор: Зарипов Равиль @ZuBy
      Описание: Чуть подробней о горизонтальном режиме

    • Автор: Равиль Зарипов (ZuBy)
      Ссылка: http://blog.rzaripov.kz/2016/11/0-modernlistview.html
      Автор: Равиль Зарипов @ZuBy
      Описание: Знакомство с ModernListView
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу