Использование иконок разных размеров в ImageList для динамически создаваемых компонентов на экранах с высоким DPI в Delphi

Delphi , Компоненты и Классы , TImage и TImageList

Введение

При разработке современных приложений на Delphi, которые должны корректно отображаться на экранах с различной плотностью пикселей (DPI), важно правильно работать с иконками и изображениями. Особенно сложной эта задача становится, когда компоненты создаются динамически во время выполнения программы. В этой статье мы рассмотрим, как правильно загружать и использовать иконки разных размеров в компоненте TImageList для динамически создаваемых компонентов.

Основная проблема

Когда вы создаете компоненты в дизайнере Delphi, вы можете использовать редактор ImageList для загрузки иконок разных размеров. Однако при динамическом создании компонентов этот подход не работает напрямую. Вам нужно:

1. Зарегистрировать поддерживаемые разрешения иконок
2. Загрузить иконки разных размеров
3. Правильно добавить их в ImageList
4. Убедиться, что ImageList корректно масштабируется

Решение

Рассмотрим решение, предложенное пользователем wp на форуме, и дополним его полезными деталями.

1. Настройка ImageList

procedure TForm1.FormCreate(Sender: TObject);
var
  ImageList: TImageList;
begin
  ImageList := TImageList.Create(Self);
  ImageList.Scaled := True; // Включаем масштабирование
  ImageList.RegisterResolutions([16, 24, 32]); // Регистрируем поддерживаемые размеры
  // Далее загрузка иконок...
end;

Ключевые моменты: - Scaled := True - включает поддержку масштабирования - RegisterResolutions - сообщает ImageList, какие размеры иконок будут доступны

2. Загрузка иконок разных размеров

var
  bmp16, bmp24, bmp32: TCustomBitmap;
begin
  bmp16 := TPortableNetworkGraphic.Create;
  bmp24 := TPortableNetworkGraphic.Create;
  bmp32 := TPortableNetworkGraphic.Create;
  try
    bmp16.LoadFromResourceName(HINSTANCE, 'cc_class');       // 16x16 (100%)
    bmp24.LoadFromResourceName(HINSTANCE, 'cc_class_150');   // 24x24 (150%)
    bmp32.LoadFromResourceName(HINSTANCE, 'cc_class_200');   // 32x32 (200%)

    // Добавляем все размеры одним вызовом
    ImageList.AddMultipleResolutions([bmp16, bmp24, bmp32]);
  finally
    bmp32.Free;
    bmp24.Free;
    bmp16.Free;
  end;
end;

Важно: - Иконки должны быть упорядочены от меньшего размера к большему - Используйте AddMultipleResolutions вместо отдельных вызовов Add

3. Как ImageList выбирает нужный размер иконки

ImageList автоматически выбирает подходящий размер иконки в зависимости от:
1. Текущего DPI экрана
2. Свойства ImagesWidth компонента, использующего ImageList

Если ImagesWidth = 0, используется размер по умолчанию (ImageList.Width/Height). При изменении DPI система выбирает иконку, наиболее подходящую для текущего масштаба.

4. Альтернативный подход: использование SVG

Для более гибкого масштабирования можно рассмотреть использование SVG-изображений:

uses
  SVG, SVGImageList;

procedure TForm1.UseSVGImageList;
var
  SVGImageList: TSVGImageList;
begin
  SVGImageList := TSVGImageList.Create(Self);
  SVGImageList.AddFromText('<?xml version="1.0"?><svg>...</svg>', 'icon_name');
  // Компонент будет автоматически масштабировать SVG до нужного размера
end;

Преимущества SVG: - Идеальное масштабирование на любом DPI - Меньший размер файлов - Поддержка сложных графических эффектов

Практический пример с TTreeView

Рассмотрим полный пример работы с динамически создаваемым TTreeView:

procedure TForm1.CreateDynamicTreeView;
var
  TreeView: TTreeView;
  ImageList: TImageList;
  bmp16, bmp24, bmp32: TCustomBitmap;
  RootNode, ChildNode: TTreeNode;
begin
  // Создаем ImageList
  ImageList := TImageList.Create(Self);
  ImageList.Scaled := True;
  ImageList.RegisterResolutions([16, 24, 32]);

  // Загружаем иконки
  bmp16 := TPortableNetworkGraphic.Create;
  bmp24 := TPortableNetworkGraphic.Create;
  bmp32 := TPortableNetworkGraphic.Create;
  try
    bmp16.LoadFromResourceName(HINSTANCE, 'cc_class');
    bmp24.LoadFromResourceName(HINSTANCE, 'cc_class_150');
    bmp32.LoadFromResourceName(HINSTANCE, 'cc_class_200');
    ImageList.AddMultipleResolutions([bmp16, bmp24, bmp32]);
  finally
    bmp32.Free;
    bmp24.Free;
    bmp16.Free;
  end;

  // Создаем TreeView
  TreeView := TTreeView.Create(Self);
  TreeView.Parent := Self;
  TreeView.Align := alClient;
  TreeView.Images := ImageList;

  // Добавляем узлы
  RootNode := TreeView.Items.Add(nil, 'Корневой узел');
  RootNode.ImageIndex := 0;
  RootNode.SelectedIndex := 0;

  ChildNode := TreeView.Items.AddChild(RootNode, 'Дочерний узел');
  ChildNode.ImageIndex := 0;
  ChildNode.SelectedIndex := 0;
end;

Советы по работе с высоким DPI

1. Всегда тестируйте приложение на мониторах с разным DPI
2. Используйте системные настройки для проверки поведения при разных масштабах
3. Для сложных случаев переопределите ImageList.GetWidthForPPI: pascal ImageList.GetWidthForPPI := MyCustomWidthForPPIHandler;
4. Рассмотрите возможность использования TScaledImageList в новых версиях Delphi

Заключение

Работа с иконками в приложениях с поддержкой высокого DPI требует внимания к деталям, особенно при динамическом создании компонентов. Использование методов RegisterResolutions и AddMultipleResolutions позволяет легко реализовать поддержку нескольких разрешений иконок. Для максимальной гибкости рассмотрите возможность использования SVG-изображений, которые обеспечивают идеальное масштабирование на любых экранах.

Правильная реализация поддержки высокого DPI не только улучшит внешний вид вашего приложения, но и повысит удовлетворенность пользователей, работающих на современных дисплеях с высокой плотностью пикселей.

Создано по материалам из источника по ссылке.

Статья описывает методы работы с иконками разных размеров в ImageList для динамически создаваемых компонентов в Delphi с учетом экранов с высоким DPI, включая настройку, загрузку и альтернативные подходы, такие как использование SVG.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: TImage и TImageList ::