dnekrasov

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

В теме 13 сообщений

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

Уж очень мне не нравится стандартный механизм добавления картинки на кнопку, поэтому, пару лет назад, начал искать альтернативу и остановился на символьных шрифтах (таких как 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 сказал:

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

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

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


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

Вверху первый запуск демки, внизу запуск второго экземпляра демки - все появляется!

Скрин2.png

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


Ссылка на сообщение
Поделиться на другие сайты
В 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 - думаю это правильнее всего.

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


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

Было бы хорошо, перед регистрацией шрифта, проверять наличие его в системе.

Это снизит время запуска приложения.

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


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

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От ingword
      Здравствуйте.
      Подскажите пожалуйста.
      Можно ли с помощью стилей создать кнопку в которой размер текста будет меняться автоматически вместе с размером кнопки, так что бы текст "правильно" и "красиво" вписывался в размер кнопки, с учетом WordWrap и без него.
    • От dim
      Создаю динамически ListBoxItem и размещаю на них кнопу
      lbi:=TListBoxItem.Create(ListBox2); lbi.Parent:=ListBox2; lbi.StyleLookup:='listboxitembottomdetail'; lbi.Height:=57; lbi.ItemData.Text:='Добавить'; lbi.ItemData.Detail:=''; SpeedButton2:=TSpeedButton.Create(lbi); SpeedButton2.Action:=del_adres; SpeedButton2.Align:=TAlignLayout.Right; SpeedButton2.StyleLookup:='trashtoolbutton'; SpeedButton2.Width:=48; SpeedButton2.Parent:=lbi; SpeedButton2.Tag:=ListBox2.Count-2; как при нажатии на кнопку получить ее ListBoxItem чтобы удалить
    • От rakhmet
      TListView, как внезапно выяснилось, напрочь игнорирует системный размер шрифта и в iOS, и в Android. Есть решение, как его можно заставить соответствовать системным настройкам, или же никто не грузит себя этой ерундой?
      Наверняка и многие другие компоненты не утруждают себя соответствием системным настройкам, но меня пока интересует только TListView.
    • От Кривяков Виталий
      Добрый день!
      Столкнулся с проблемой вывода текста разного размера по одной линии. Не получается использовать BaseLine доступную для Firemonkey. 
      Baseline -   воображаемая прямая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов. В строке символы текста стоят на базовой линии, а нижние выносные элементы текста «свисают» с неё.
      Из описанного выше ясно, что выводимые символы должны лежать на это линии, но в реале как то все некорректно выводится.
      Сделал два примера VCL (черный фонт) и FireMonkey(черный полупрозрачный фонт), оказалось, что вывод текста осуществляется по разному, при одном и том же значении размера шрифта. Базовая линия в обоих примерах 356.
      Совмещаем отображение символов: GlyphsEqual.png Символы совпали, но базовая линия смещена.
      Совмещаем базовую линию: PosEqual.png Базовая линия совпала, как и верхний край контролов, а вот текст (серый) значительно ниже.
      А теперь собственно вопрос вопрос, где ошибка? Как рассчитать базовую линию для FMX?
       
      P.S.
      Про attributes у TTextLayout знаю.


      BaseLine.rar

    • От Martifan
      Доброго времени сутки.
      Хочу в приложение использовать FontAwesome шрифт, но как в примере указана я все так делаю проект деплоится но когда собираюсь записывать телефоне то выдаёт ошибку.
      может кто нибудь знает в чем проблема?
      заранее благодарю
       

    • От Error
      *** Небольшой обмен опытом ***
      Вижу что вопросы о размере текста довольно частые, поделюсь своими наработками.
      function CalcTextSize(Text: string; Font: TFont; Size: Single = 0): TSizeF;
      Функция для расчета размера прямоугольника, занимаемого однострочным текстом.
      Параметры:
      Text - Текст Font - Шрифт с которым будет выводиться текст Size - если 0, то Font.Size будет использоваться из Font, иначе из данного параметра Исходный код:
      uses System.Types, FMX.Types, FMX.Graphics, FMX.TextLayout, System.Math, System.SysUtils; function CalcTextSize(Text: string; Font: TFont; Size: Single = 0): TSizeF; var TextLayout: TTextLayout; begin TextLayout := TTextLayoutManager.DefaultTextLayout.Create; try TextLayout.BeginUpdate; try TextLayout.Text := Text; TextLayout.MaxSize := TPointF.Create(9999, 9999); TextLayout.Font.Assign(Font); if not SameValue(0, Size) then begin TextLayout.Font.Size := Size; end; TextLayout.WordWrap := False; TextLayout.Trimming := TTextTrimming.None; TextLayout.HorizontalAlign := TTextAlign.Leading; TextLayout.VerticalAlign := TTextAlign.Leading; finally TextLayout.EndUpdate; end; Result.Width := TextLayout.Width; Result.Height := TextLayout.Height; finally TextLayout.Free; end; end;   function FontSizeForBox(Text: string; Font: TFont; Width, Height: Single; MaxFontSize: Single = cMaxFontSize): Integer;
      Функция возвращающая максимально возможный размер шрифта, для текста вписанного в заданный прямоугольник.
      Параметры:
      Text - Текст Font - Шрифт с которым будет выводиться текст Width, Height - Ширина и высота прямоугольника MaxFontSize - Максимально возможный размер шрифта Исходный код:
      uses System.Types, FMX.Types, FMX.Graphics, FMX.TextLayout, System.Math, System.SysUtils; const cMaxFontSize = 512; function FontSizeForBox(Text: string; Font: TFont; Width, Height: Single; MaxFontSize: Single = cMaxFontSize): Integer; var Size, Max, Min, MaxIterations: Integer; Current: TSizeF; begin Max := Trunc(MaxFontSize); Min := 0; MaxIterations := 20; repeat Size := (Max + Min) div 2; Current := CalcTextSize(Text, Font, Size); if ((Abs(Width - Current.Width) < 1) and (Width >= Current.Width)) and ((Abs(Height - Current.Height) < 1) and (Height >= Current.Height)) then break else if (Width < Current.Width) or (Height < Current.Height) then Max := Size else Min := Size; Dec(MaxIterations); until MaxIterations = 0; Result := Size; end; ---
      Также данные функции можно найти в этом юните
    • От Pax Beach
      Коллеги, хочу раскрасить кнопки, не могу найти свойство в DesignTime. Может нет такового?
      А в RunTime это делать через SpeedButton.Canvas.FillRect и перерисовку текста или картинки?
      Подскажите пожалуйста, кто знает?
       
    • От Равиль Зарипов (ZuBy)
      Шаблон проекта с кастомным шрифтом FontAwesome
      Намного удобней и менее затратно использовать Шрифт с Иконками, чем заботиться о качестве картинок, скейлах, их хранении и загрузке
      Поэтому давно перешел на шрифты, пару скриншотов (без использования картинок)

      Seattle CustomFont.7z
      Berlin CustomFont(Berlin).zip
       
      WINDOWS/MACOS - установить шрифт в систему
      IOS - в деплой добавить шрифт и с помощью IOS9Fix прописать в .plist следующее:
      ANDROID - в деплой добавить шрифт (Remote Path -> assets\internal) и подключить к проекту измененные файлы FMX.FontGlyphs.Android.pas, FMX.FontGlyphs.pas
    • От Rusland
      Как сделать чтобы при нажатии на кнопку GlowEffect активировался, при отпускании кнопки деактивировался? 
      PS. Сейчас у меня задан стиль кнопки, в нем прилеплен GlowEffect и он сразу активен.
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу