Страницы

▼

вторник, 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
на