Важно (9.07.22)

Если картинки в постах не отображаются, зайдите в блог через прокси. РКН заблокировал поддомены blogger.com на которые загружались картинки.

вторник, 27 января 2015 г.

Используем True Type шрифт для хранения иконок

Это сообщение описывает шаги, необходимые для создания Android приложения, которое использует True Type шрифт (Font Awesome), с целью хранения иконок. Использование шрифта для хранения иконок имеет ряд преимуществ, по сравнению с использованием растровых изображений:
- Иконки имеют очень маленький вес
- Иконки векторные, а значит, будут выглядеть красиво на высоких разрешениях
Данная статья содержит инструкции для C++ и Object Pascal проектов для Android платформы(в оригинальной статье есть ещё под iOS, оригинал)

Обновление от 22.11.2019. Добавил список(70+) бесплатных шрифтов для коммерческой разработки.








Обновление: Со мной связалась Dana Sallow и предложила добавить в статью список (70+) шрифтов, которые можно бесплатно использовать для коммерческой разработки.
Я ничего против не имею, так что держите ссылку на список: 70+ Best Free Fonts for Designers – Free for Commercial Use in 2019
Thanks Dana!


Что необходимо сделать для использования True Type шрифта в вашем приложении.

  1. Создаём новый проект
  2. Сохраняем проект в отдельную папку
  3. Скачиваем архив с Font Awesome, распаковываем, копируем файл  fontawesome-webfont.ttf из папки "\font-awesome-4.3.0\fonts\" в корень папки с нашим проектом
  4. Переименовываем файл fontawesome-webfont.ttf в FontAwesome.ttf
  5. Устанавливаем шрифт FontAwesome.ttf в операционную систему, чтобы он отображался в среде разработки
  6. Чтобы использовать шрифт, например для метки (Label), достаточно указать его в свойстве  TextSettings.Font.Family. Внимание! Свойство чувствительно в регистру, а также не надо указывать расширение шрифта(ttf в данном случае).


Как использовать ту или иную иконку.
Первый способ:
  1. В Windows заходим в «Таблицу символов», выбираем наш шрифт «FontAwesome», нам отображаются все доступные иконки
  2. Выбираем иконку и копируем её
  3. Выбираем компонент, свойство «Text» и вставляем туда иконку. (Прим. от переводчика: У меня такие иконки нормально отображаются на форме, но свойство выглядит как « - » (тире с пробелами))
Или можно установить иконку из кода приложения:
В C++:
SomeLabel->Text = (System::WideChar)(0xf042);
В Object Pascal:
SomeLabel.Text := widechar($f042);
Где f042 является Unicode обозначением отдельной иконки в пакете шрифта.

Автор статьи сделал демо проект, в который добавил два вспомогательных файла (для C++ и OP), которые содержат значения для всех иконок из FontAwesome пакета.
Файлы:
  • FontAwesomeCodes.pas
  • FontAwesomeCodes.h
Имена переменных совпадают с именами иконок (в имени переменной используется подчёркивание вместо тире). Имена иконок и сами иконки можно посмотреть на сайте.
Например:
SomeLabel->Text = fa_ambulance;

SomeLabel.Text = fa_ambulance;

Теперь остаётся добавить (задеплоить) шрифт в проект.
  1. Заходим в Deployment Manager
  2. Добавляем файл FontAwesome.ttf
  3. Прописываем у файла новый путь (Remote Path) «.\assets\internal»
  1. Далее копируем файл FMX.FontGlyphs.Android.pas из папки «C:\Program Files (x86)\Embarcadero\Studio\15.0\source\fmx» в корень папки с нашим проектом
  2. В Project Manager щёлкните правой кнопкой по вашему проекту и выберите меню «Add…», в открывшемся окне выберите файл FMX.FontGlyphs.Android.pas (из папки с проектом)
  3. Теперь в Project Manager щёлкните дважды по файлу FMX.FontGlyphs.Android.pas, он откроется в среде разработки
  4. Выполните следующие изменения:
  • В uses добавьте модуль System.IOUtils
uses
  FMX.FontGlyphs, Androidapi.JNI.GraphicsContentViewText, System.IOUtils;
  • Спуститесь до 64 строки и добавьте новую переменную «FontFile: string;»
var
  TypefaceFlag: Integer;
  Typeface: JTypeface;
  FamilyName: JString;
  Metrics: JPaint_FontMetricsInt;
  FontFile: string;
  • На 85 строке закомментируйте строчку Typeface := TJTypeface.JavaClass.create(FamilyName, TypefaceFlag);
  • И добавьте ниже:
FontFile := TPath.GetDocumentsPath + PathDelim + CurrentSettings.Family + '.ttf';
if FileExists(FontFile) then
  Typeface := TJTypeface.JavaClass.createFromFile(StringToJString(FontFile))
else
  Typeface := TJTypeface.JavaClass.Create(FamilyName, TypefaceFlag);
  • d) И последнее, нужно убедиться, что файл загружается только в Android. Для этого используем $IFDEF.
  • Строка 11:
interface
{$IFDEF ANDROID}
  • Строка 39:
 end;
{$ENDIF}
implementation
{$IFDEF ANDROID}
uses
  • Строка 282:
end;
{$ENDIF}
end.

Демо проект (оригинальная ссылка): http://cc.embarcadero.com/item/30120
Зеркало в моём блоге: Скачать с Google Drive

На этом всё.

Это вольный перевод статьи True Type Font Iconography for Android and iOS Apps Автор: Brian Alexakis