среда, 26 февраля 2020 г.

Использование шрифтов в приложениях на FGX Native


Поговорим о, казалось бы, простой теме, но если бы всё было просто, то и не было бы этой статьи. Статья применима к любому шрифту. Пример из статьи будет основан на родных (для Android) стилях шрифта Roboto.


Начнём с описания важных правил:
  1. Шрифт должен быть в одном из форматов: "ttf", "otf".
  2. Чтобы в дизайнере студии увидеть, как будет отображаться тот или иной шрифт, необходимо установить шрифт в систему.
  3. Всегда добавляйте необходимый вам стиль шрифта в своё приложение (ниже я объясню и покажу, почему нужно следовать этому правилу).
  4. Не забывайте прописывать полное название шрифта или полный путь до шрифта (в случае, если вы сложили все свои шрифты в отдельной папке).

Общее про шрифты.

Существует огромное количество различных шрифтов и ещё больше стилей этих шрифтов. Также не забывайте, что шрифты бывают как коммерческие, так и бесплатные!

При выборе шрифта, я рекомендую использовать специальный сервис Google: Google Fonts. Помимо просмотра стилей выбранного шрифта, там есть информация по скачиванию или приобретению шрифта.

Для данной статьи я выбрал шрифт Roboto и скачал его в формате «ttf». Скачивается архив сразу со всеми стилями этого шрифта.


Установка/переустановка шрифта в Windows 10.

Дизайнер FGX Native Library пока не умеет подхватывать шрифт из FGX Assets manager! Необходимо установить шрифт в Windows, после этого он появится в дизайнере студии.

Переустановка
Если в вашей системе уже установлен шрифт Roboto и по какой-то причине (может просто вышла новая версия шрифта и вы хотите использовать именно её) вы хотите его переустановить, то удаляем шрифт из Windows, сразу из папки, заходим по пути "C:\Windows\Fonts" находим там Roboto и удаляем. А далее делаем установку нового шрифта.

Установка
Распаковываем скаченный архив, выделяем все файлы с расширением ".ttf", жмём правой кнопкой мышки, в контекстном меню выбираем пункт «Установить для всех пользователей».
В результате выскочит вот такое окно:


Добавляем шрифт в свой проект. 

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

Примечание. Ниже идёт объяснение, почему нужно всегда добавлять шрифт в проект. Если вам это не интересно, то просто проскрольте страницу до заголовка "Как добавить шрифт." 

В противном случае, Android будет везде использовать версию шрифта Roboto (Regular)/sans-serif (normal).

Вот так это будет выглядеть :


Как видим, шрифт отлично применился в дизайнере, но полностью проигнорирован в рантайме.

Примечание. Нужно не забывать, что шрифты также обновляются и на девайсе может быть старая версия шрифта или более новая. 

На самом деле, данное поведение вызвано самим Android. 

Android в основном использует шрифт Roboto, но под разными именами, чаще можно встретить семейство «sans-serif», но это может быть и DroidSans и т.п. Т.е. «sans-serif» (normal) = «Roboto» (regular).

(Грубо говоря) В Android есть два «xml» файла отвечающих за шрифты, в них прописываются соответствия имён стилей, семейства и т.п. 

  • "/system/etc/fonts.xml" - отвечает за шрифты, используемые по умолчанию в общем (например, в вашем приложении).
  • "/system/etc/system_fonts.xml" - отвечает за шрифты, используемые системой.

Вот примеры этих файлов для Android 5.1.1: https://drive.google.com/open?id=1-Z-XMKrfJxF49t48LzBCwKEiBKxyP9Dm


Эти файлы могут быть изменены производителем устройства, т.е. в них может запросто не оказаться даже стандартного имени «sans-serif».

Таким образом,

  • прописав у TfgLabel: Font.Family = sans-serif-light. В дизайнере мы не увидим стиля шрифта (т.к. в Windows мы установили шрифт как Roboto), а в рантайме скорее всего всё заработает.
  • прописав у TfgLabel: Font.Family = Roboto Light. В дизайнере мы увидим изменение стиля, но в рантайме будет использоваться «sans-serif» (т.к. в файле «fonts.xml» нет имени «Roboto Light»).

На скриншоте вы видите демонстрацию шрифтов в рантайме. 

Левый столбец – шрифты указаны как Roboto * и добавлены в проект через FGX Assets manager. Подхватились и в дизайнере и в рантайме.

Правый – шрифты просто указаны как «sans-serif-*», в рантайме подхватились, в дизайнере нет.



В связи с этим, самый правильный вариант добавить нужный шрифт в FGX Assets manager.


Как добавить шрифт.
Допустим мы уже создали чистый проект, разместили на форме 6 TfgLabel и каждому задали стиль шрифта Roboto в свойстве «Font -> Family».
Теперь заходим в меню «Project -> FGX Assets manager» жмём на кнопку «A» 6 раз.


Получаем


В примере мы используем шесть стилей шрифта Roboto, соответственно, мы должны добавить все шесть в наш проект. В левом столбце указываем полное название шрифта, в правом выбираем файл шрифта. 

Указываем полные имена в соответствии с установленным в Windows шрифтом. Это необходимо для создания единого стиля отображения шрифтов в дизайнтайме и рантайме.

Вот так выглядят названия у меня:


После того как вы выбрали файлы и вписали названия шрифтов, у вас получится что-то вроде этого:


Жмём кнопку «Сохранить» и закрываем FGX Assets manager.
Теперь делаем Build и Deploy проекта. Перекидываем полученный apk на устройство и любуемся шрифтами.


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


На этом всё, спасибо за внимание!