Добавляем иконки Font Awesome в приложение NativeScript

Разработка /
Разработка: Добавляем иконки Font Awesome в приложение NativeScript

Создание иконок для приложения это довольно сложный процесс. Не только с точки зрения креативности, но также из-за трудностей при показе изображений на разных размерах экрана и разных разрешениях. У веб-разработчиков меж тем есть чрезвычайно удобный пакет иконок . И сегодня мы научимся с ним работать в мобильных приложениях.

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

Представим, что у вас есть приложение, в котором используются 20 разных иконок. работает на различных экранах с большим количеством разрешений, требуя разный размер иконок для каждого из них. К примеру, каждая иконка должна иметь разные размеры для mdpi, hdpi, xhdpi, xxhdpi, и xxxhdpi экранов. В принципе, не так сложно нагенерировать иконки для всех этих размеров, но они довольно сильно скажутся на размере приложения в будущем.

При использовании шрифтов, вы добавляете к проекту всего один файл шрифта, размером ~100 кб, в котором есть сотни разных иконок. Эти иконки будут автоматически масштабироваться, исходя из разрешения экрана, без увеличения размера приложения.

Итак, приступим.

Начнём с чистого проекта NativeScript для Android и . В консоли выполните следующие команды:

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 и немного его изменим:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="Tap the button" class="title"/>
        <Button text="&#хf1e0; Test" tap="{{ tapAction }}" class="font-awesome" />
        <Label text="{{ message }}" class="message" textWrap="true"/>
    </StackLayout>
</Page>

Мы просто добавили наш класс в тег Button и прописали значение иконки в unicode. В нашем случае, &#хf1e0; это иконка типа «Поделиться с...».

Хотите использовать другую иконку? Идём в список иконок Font Awesome, кликаем на нужную, и копируем её unicode-значение.

Вот так всё просто!

Заключение


Использовать иконочные шрифты в приложениях NativeScript — великолепная идея. Это легко сделать, а размер приложения остаётся небольшим. При этом иконки выглядят потрясающе на любом разрешении экрана. И не ограничивайте себя только Font Awesome. Попробуйте также IonIcons, или Material Design icons.

Nic Raboy: Use Font Awesome Glyph Icons With NativeScript
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.