Создание иконок для приложения это довольно сложный процесс. Не только с точки зрения креативности, но также из-за трудностей при показе изображений на разных размерах экрана и разных разрешениях. У веб-разработчиков меж тем есть чрезвычайно удобный пакет иконок Font Awesome. И сегодня мы научимся с ним работать в мобильных приложениях.
Перед тем, как перейти к коду, разберёмся почему вообще использование шрифтов это отличное решения для мобильных приложений.
Представим, что у вас есть приложение, в котором используются 20 разных иконок. Android работает на различных экранах с большим количеством разрешений, требуя разный размер иконок для каждого из них. К примеру, каждая иконка должна иметь разные размеры для mdpi, hdpi, xhdpi, xxhdpi, и xxxhdpi экранов. В принципе, не так сложно нагенерировать иконки для всех этих размеров, но они довольно сильно скажутся на размере приложения в будущем.
При использовании шрифтов, вы добавляете к проекту всего один файл шрифта, размером ~100 кб, в котором есть сотни разных иконок. Эти иконки будут автоматически масштабироваться, исходя из разрешения экрана, без увеличения размера приложения.
Итак, приступим.
Начнём с чистого проекта NativeScript для Android и iOS. В консоли выполните следующие команды:
tns create ExampleProject
cd ExampleProject
tns platform add ios
tns platform add android
Теперь скачаем свежий релиз Font Awesome. Распакуем архив и найдём файл TTF. Скорее всего, он будет называться fonts/fontawesome-webfont.ttf. Скопируем этот файл в нашу папку так: app/fonts/fontawesome-webfont.ttf.
Приложение NativeScript автоматически подхватит шрифты из папки fonts.
Теперь откроем файл app/app.css и создадим класс с новым свойством font-family. Вот так должно работать:
.font-awesome {
font-family: "FontAwesome";
}
Не важно, как будет называться наш класс, главное — указать свойство font-family. Имя шрифта я нашёл в официальной документации к Font Awesome.
Откроем файл app/main-page.xml и немного его изменим:
Мы просто добавили наш класс в тег Button и прописали значение иконки в unicode. В нашем случае, &#хf1e0; это иконка типа «Поделиться с…».
Хотите использовать другую иконку? Идём в список иконок Font Awesome, кликаем на нужную, и копируем её unicode-значение.
Вот так всё просто!
Заключение
Использовать иконочные шрифты в приложениях NativeScript — великолепная идея. Это легко сделать, а размер приложения остаётся небольшим. При этом иконки выглядят потрясающе на любом разрешении экрана. И не ограничивайте себя только Font Awesome. Попробуйте также IonIcons, или Material Design icons.
Nic Raboy: Use Font Awesome Glyph Icons With NativeScript
Разработчик: java, kotlin, c#, javascript, dart, 1C, python, php.
Пишите: @ighar. Buy me a coffee, please :).