Урок 5. Атрибут app:fontFamily. Использование Font-Awesome для отображения иконок

В этом уроке нам необходимо привести внешний вид всех TextView на нашем макете в порядок, чтобы он соответствовал тому, что мы хотели сделать вначале.

Для этого нам необходимо:

• Применить стили, TextAppearance
• Добавить шрифт Awesome-font в проект.

Работа с атрибутом fontFamily

Помните, что в предыдущем уроке мы добавили с вами 3 стиля для текста:

• Text
• Text.Primary
• Text.Secondary

В нашем приложении весь текст будет использовать стандартный Android шрифт. Круто, что мы уже добавили стили в наше приложение. Теперь нам достаточно добавить атрибут для указания шрифта в одном месте. Сделаем это, добавив атрибут <item name="fontFamily">sans-serif</item> к нашему базовому стилю для текста Text .

Атрибут <item name="fontFamily">sans-serif</item> указывается без префикса android , потому что он находится в пакете support library , позволяющей использовать виджеты и атрибуты новых версий Android на старых устройствах.

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

Наши изменения автоматически применятся к нашему layout , т.к. ссылки на стили остались те же самые.

В принципе, внешний вид не изменился, т.к. Android по умолчанию применяет этот шрифт. Мы сделали это в учебных целях.

Теперь нам осталось изменить стиль для самого первого TextView . Видим, что он значительно больше по размеру текста и шрифт имеет больший вес. Вес шрифта можно задавать атрибутом "android:textStyle"= bold | italic | normal . Мы будем использовать значение bold .

Давайте создадим ещё один стиль TextView.Primary.Header . Из названия видим, что стиль наследуется от TextView.Primary и добавляет свои атрибуты. Аналогично поступим со стилем для этого текста, который назовём Text.Primary.Header .

Применим его в layout файле:

Посмотрим, что получилось:

То, что надо. Идём дальше.

Нам необходимо добавить количество читателей и читаемых, как отображено на экране:

Вначале создадим для наших элементов отдельный стиль текста Text.Primary.Bold , в котором будем использовать атрибут android:textStyle = bold . А в стиле для элемента TextView.Primary.Bold будем просто включать в себя этот стиль для текста.

Затем нам необходимо определиться с вариантом добавления элементов на наш layout .

Есть два варианта для отображения текстов разных стилей(4 читателя), визуально которые кажутся одним TextView :

• Объединять элементы в один TextView . Изменять их стили в java коде, используя класс Spannable .
• Делать их разными TextView .

На начальном этапе использование Spannable повысит сложность, поэтому пока не будем использовать этот подход.

Мы создадим два новых TextView , которые расположим рядом с элементами following_text_view , followers_text_view .

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

Выглядит текстовая иконка, которую нам необходимо добавить, так:

Давайте пока вместо текста в TextView для этой иконки поставим букву i . Чуть ниже решим эту проблему.

После этих изменений наш layout выглядит следующим образом:

Теперь нам надо отобразить реальную иконку местоположения. Есть два варианта:

• Скачать готовую .png -картинку и использовать ImageView
• Использовать шрифт текста, который поддерживает иконки ( Font-Awesome , Ionicons и т.д.).

Второй вариант кажется намного более практичным (это вы увидите чуть позже). Давайте его и рассмотрим. Вариант с .png мы тоже рассмотрим, но не в этом уроке.

Добавление папки font в проект

Первое, что нам надо сделать это добавить в проект папку font , куда можно помещать новые шрифты, которые нам понадобятся. Для этого переходим в дерево проекта, нажимаем правой кнопкой по папке res , выбираем New->Android resource directory .

В появившемся окне необходимо ввести название папки и её тип. Вводим в поле Directory name значение font , в поле Resource type выбираем также значение font (если сперва выбрать тип, то поле с именем папки автоматически заполнится значением font ), поле Source set не меняем (должно быть значение main ). Выглядит это так.

Нажимаем OK . После этого в списке директорий должна появиться папка font .

Теперь нам осталось скачать файл шрифта Font-Awesome , который понадобится нам для отображения иконки местоположения. Для этого переходим на официальный сайт. Нажимаем на кнопку Download .

После этого выбираем вариант бесплатного скачивания и загружаем шрифт на компьютер.

Отлично, после этого открываем архив и копируем файл font-awesome-4.7.0 -> fonts->fontawesome-webfont.ttf в нашу директорию font в проекте. Только обязательно переименуйте его название (потому что Android Studio не разрешает использовать символ - в названии) на font_awesome

Это был последний шаг, теперь наш шрифт у нас в проекте. Выглядеть он должен следующим образом:

Поиск иконки

Возвращаемся на сайт за поиском необходимой нам иконки. Все иконки находятся здесь. Нужная нам иконка находится здесь:

Всё, что нам надо знать – это юникод-символ данной иконки. Давайте создадим текстовый ресурс в файле values/strings.xml .

Мы добавили ресурс fa_map_marker . Это и есть символ нашей иконки. Чтобы добавлять unicode символы необходимо ставить символ \u перед кодом.

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

Создадим стиль TextIcon , который будет добавлять шрифт font_awesome .

Мы добавили стиль TextIcon , который наследуется от TextView.Secondary (потому что все иконки в нашем приложении будут такого же цвета и размера как TextSecondary ) и добавили свойство, в котором указали, что мы будем использовать font_awesome .

Теперь изменим атрибуты нашего TextView , который отвечает за отображение иконки местоположения. Давайте добавим стиль, который мы только что создали и ссылку на ресурс иконки.

Посмотрим результат на вкладке Preview :

Выглядит, как будто ничего не заработало. Но давайте теперь запустим приложение и посмотрим, что получилось.

Проблема с некоторыми шрифтами – они не отображаются в режиме Preview , однако на обычном устройстве с ними всё хорошо.

Единственное, что бросается в глаза – иконка расположена чуть выше текста Местоположение . Для того чтобы выровнять их давайте добавим свойство android:layout_alignBaseline="@id/user_location_text_view" . Это свойство выравнивает элементы по линии текста. В нашем случае это и надо.

Видим, что теперь элементы выровнены:

Зачем столько проблем, если можно было использовать обычную .png картинку, не подключаю никаких шрифтов? Давайте перечислим преимущества font иконок перед .png :