Перейти к содержанию
Fire Monkey от А до Я

Символ шрифта с иконками вместо картинки на кнопке


dnekrasov

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

Механизм, который позволяет использовать иконку символьного шрифта вместо картинки на кнопках.

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

DarkPreview.png.6c9ea022024d121ed6c5d459799474a0.pngLightPreview.png.be8e685d4bf7c197211c5b8504a0284a.png

IconicFontGlyph.zip 

Под Windows работает без проблем - на других системах не пробовал.

Как это работает

  1. Добавляем в проект модуль UIExt.IconicFont.pas
  2. Добавляем в проект модули описания шрифтов, которые будут использоваться (см. ниже)
  3. Описываем символ, который будет использоваться в качестве иконки (см. ниже)
  4. В обработчике  события OnApplyStyleLookup кнопки пишем одну строчку - TIconicFont.ApplyButtonStyle(TCustomButton(Sender));

Модули описания шрифтов

Описание символа

Для описания символа используется свойство StyleName (не знаю как остальные - лично я его нигде не использую). Само описание - это строка в определённом формате:

[Короткое имя шрифта];[код символа];[размер шрифта];[цвет]

2 первых поля - обязательны. Короткое имя шрифта можно увидеть в его модуле описания (TIconicFont.Short)

Примеры можно увидеть на скриншотах выше (текст над кнопками).

Ну и напоследок - небольшая демка IconicFontDemo.zip

Ссылка на комментарий

В демке IconicFontDemo все иконки - квадратами!

Просто скачал, распаковал, запустил в Tokyo 10.2.2

скрин.png

Изменено пользователем wamaco
Ссылка на комментарий
2 минуты назад, wamaco сказал:

В демке IconicFontDemo все иконки - квадратами!

Просто скачал, распаковал, запустил в Tokyo 10.2.2

если это Windows, то шрифт должен быть установлен в системе

Ссылка на комментарий
2 минуты назад, wamaco сказал:

В демке IconicFontDemo все иконки - квадратами!

Проблема с регистрацией шрифтов.

Какая винда? Рядом с ехе-шником папка Fonts создалась? Если да - попробуйте руками установить шрифты, находящиеся в ней.

Ссылка на комментарий
Только что, sinuke сказал:

если это Windows, то шрифт должен быть установлен в системе

Я это понимаю, но я предположил, что программа, при запуске как-то регистрирует их!  Сорцы не смотрел

Ссылка на комментарий
1 минуту назад, sinuke сказал:

если это Windows, то шрифт должен быть установлен в системе

Демка сама должна регистрировать шрифты. Если нет - то где-то проблема

Ссылка на комментарий
6 минут назад, dnekrasov сказал:

Проблема с регистрацией шрифтов.

Какая винда? Рядом с ехе-шником папка Fonts создалась? Если да - попробуйте руками установить шрифты, находящиеся в ней.

Windows 10, папка Fonts  создается, права Администратора

Интересный эффект, если запустить демку один раз, то "квадраты", если не закрывая, запустить еще раз (второй экземпляр), то иконки показывает!

Изменено пользователем wamaco
Ссылка на комментарий
3 минуты назад, wamaco сказал:

Интересный эффект, если запустить демку один раз, то "квадраты", если не закрывая, запустить еще раз (второй экземпляр), то иконки показывает!

Это конечно интересно, вот только воспроизвести у меня не получается... Так что, пока, исправить не могу :(

Ссылка на комментарий
В 12.01.2018 в 16:56, wamaco сказал:

Интересный эффект, если запустить демку один раз, то "квадраты", если не закрывая, запустить еще раз (второй экземпляр), то иконки показывает!

Единственное моё предположение из-за чего это может быть - это момент регистрации шрифтов.

Т.к. у меня это воспроизвести не получается - то у меня большая просьба к @wamaco отредактируйте, плз, файл проекта и попробуйте запустить

...
begin
  TIconicFont.FontsReg;
  try
    Application.Initialize;

    TStyleManager.TrySetStyleFromResource('STYLE_Dark');

    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

Ну и если запустится нормально, то еще 2 варианта (чтоб точно знать когда надо регистрировать шрифты)

1:

...
begin
  Application.Initialize;

  TIconicFont.FontsReg;
  try
    TStyleManager.TrySetStyleFromResource('STYLE_Dark');

    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

2:

...
begin
  Application.Initialize;

  TStyleManager.TrySetStyleFromResource('STYLE_Dark');

  TIconicFont.FontsReg;
  try
    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

 

Ссылка на комментарий

Первый и второй вариант работает!

Последний - НЕТ!

Я так понимаю, по смыслу, этот самый правильный

...
begin
  Application.Initialize;

  TIconicFont.FontsReg;
  try
    TStyleManager.TrySetStyleFromResource('STYLE_Dark');

    Application.CreateForm(TMainForm, MainForm);
    Application.Run;
  finally
    TIconicFont.FontsUnreg;
  end;
end.

 

Изменено пользователем wamaco
Ссылка на комментарий
39 минут назад, wamaco сказал:

Первый и второй вариант работает!

Последний - НЕТ!

Из этого следует вывод, что шрифты надо регистрировать до применения стиля (если через TStyleManager) или до создания формы (если StyleBook).

В общем лучше делать сразу после Application.Initialize - думаю это правильнее всего.

Ссылка на комментарий
  • 1 год спустя...
  • 10 месяцев спустя...
В 1/12/2018 в 4:36 PM, dnekrasov сказал:

A mechanism that allows you to use a symbol font icon instead of a button image.

I really don’t like the standard mechanism for adding a picture to a button, so a couple of years ago I started looking for an alternative and settled on character fonts (such as FontAwesome). That's what came out of it:

DarkPreview.png.6c9ea022024d121ed6c5d459799474a0.pngLightPreview.png.be8e685d4bf7c197211c5b8504a0284a.png

IconicFontGlyph.zip 78 \ u043a \ u041147 downloads  

It works without problems under Windows - I have not tried it on other systems.

How it works

  1. Add the UIExt.IconicFont.pas module to the project 
  2. Add the font description modules to be used in the project (see below)
  3. We describe the symbol that will be used as an icon (see below)
  4. In the OnApplyStyleLookup  button event handler, write one line -  TIconicFont.ApplyButtonStyle (TCustomButton (Sender));

Font Description Modules

Character Description

To describe the symbol, the StyleName property is used (I do not know how the others are; personally, I do not use it anywhere). The description itself is a string in a specific format:

[Short font name]; [character code]; ;

The first 2 fields are required. The short font name can be seen in its description module (TIconicFont.Short)

Examples can be seen in the screenshots above (the text above the buttons).

And finally, a small demo of  IconicFontDemo.zip

If possible, run this project for Android(FMX)
No specific instructions for loading and launching fonts are included in the This Method
Thank you

Ссылка на комментарий

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

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