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

Код начала урока:

gitzip

Структура урока:

Видео версия урока

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

UserInfoLayout.png

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

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

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

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

  • Text
  • Text.Primary
  • Text.Secondary

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

styles.xml

<resources>

    <!-- Остальные элементы сверху не изменились -->

    <style name="Text">
        <item name="android:textSize">16sp</item>
        <item name="fontFamily">sans-serif</item>
    </style>

    <!-- Остальные элементы снизу не изменились -->

</resources>

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

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

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

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

Добавление веса текста для первого TextView

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

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

styles.xml

<resources>

    <!-- Остальные элементы сверху не изменились -->

    <style name="TextView.Primary.Header">
        <item name="android:textAppearance">@style/Text.Primary.Header</item>
    </style>

    <style name="Text.Primary.Header">
        <item name="android:textSize">22sp</item>
        <item name="android:textStyle">bold</item>
    </style>

    <!-- Остальные элементы снизу не изменились -->

</resources>

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

activity_user_info.xml

<RelativeLayout>

    <!-- Остальные элементы сверху не изменились -->

    <TextView
        android:id="@+id/user_name_text_view"
        android:layout_below="@id/user_image_view"
        style="@style/TextView.Primary.Header"
        android:layout_marginTop="@dimen/text_small_margin"
        android:text="Имя"/>

    <!-- Остальные элементы снизу не изменились -->

</RelativeLayout>

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

UserInfoTypography.png

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

Добавление элементов, отображающих количество читателей и читаемых

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

FollowersCountRow.png

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

styles.xml

<resources>

    <!-- Остальные элементы сверху не изменились -->

    <style name="Text.Primary.Bold">
        <item name="android:textStyle">bold</item>
    </style>

    <style name="TextView.Primary.Bold">
        <item name="android:textAppearance">@style/Text.Primary.Bold</item>
    </style>
</resources>

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

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

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

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

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

activity_user_info.xml

<RelativeLayout>

    <!-- Остальные элементы сверху не изменились -->

    <TextView
        android:id="@+id/following_count_text_view"
        android:layout_below="@id/user_location_text_view"
        style="@style/TextView.Primary.Bold"
        android:layout_marginTop="@dimen/text_small_margin"
        android:text="4"/>

    <TextView
        android:id="@+id/following_text_view"
        android:layout_toEndOf="@+id/following_count_text_view"
        android:layout_below="@id/user_location_text_view"
        style="@style/TextView.Secondary"
        android:layout_marginTop="@dimen/text_small_margin"
        android:layout_marginStart="5dp"
        android:text="@string/following_hint"/>

    <TextView
        android:id="@+id/followers_count_text_view"
        android:layout_toEndOf="@+id/following_text_view"
        android:layout_below="@id/user_location_text_view"
        style="@style/TextView.Primary.Bold"
        android:layout_marginTop="@dimen/text_small_margin"
        android:layout_marginStart="20dp"
        android:text="4"/>

    <TextView
        android:id="@+id/followers_text_view"
        android:layout_below="@id/user_location_text_view"
        android:layout_toEndOf="@+id/followers_count_text_view"
        style="@style/TextView.Secondary"
        android:layout_marginTop="@dimen/text_small_margin"
        android:layout_marginStart="10dp"
        android:text="@string/followers_hint"/>
</RelativeLayout>

Добавление текстовой иконки местоположения

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

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

LocationIcon.png

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

activity_user_info.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout>

    <!-- Остальные элементы сверху не изменились -->

    <TextView
        android:id="@+id/user_location_icon_text_view"
        android:layout_below="@id/user_description_text_view"
        style="@style/TextView.Secondary"
        android:layout_marginTop="@dimen/text_small_margin"
        android:text="i"/>

    <TextView
        android:id="@+id/user_location_text_view"
        android:text="Местоположение"
        android:layout_below="@id/user_description_text_view"
        android:layout_toEndOf="@id/user_location_icon_text_view"
        android:layout_marginStart="10dp"
        android:layout_marginTop="@dimen/text_small_margin"
        style="@style/TextView.Secondary"/>

    <!-- Остальные элементы снизу не изменились -->

</RelativeLayout>

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

UserInfoLayoutFullRaw.png

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

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

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

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

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

FontsFolderMenu.png

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

FontsFolderReady.png

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

FontsFolderCreated.png

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

FontAwesomeSite.png

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

FontAwesomeFreeDownload.png

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

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

FontAwesomeInProject.png

Поиск иконки

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

FaLocationIcon.png

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

strings.xml

<resources>

    <!-- Остальные элементы сверху не изменились -->

    <string name="fa_map_marker">\uf041</string>
</resources>

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

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

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

styles.xml

<resources>

    <!-- Остальные элементы сверху не изменились -->

    <style name="TextIcon" parent="TextView.Secondary">
        <item name="fontFamily">@font/font_awesome</item>
    </style>
</resources>

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

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

activity_user_info.xml

<RelativeLayout>

    <!-- Остальные элементы снизу не изменились -->

    <TextView
        android:id="@+id/user_location_icon_text_view"
        android:layout_below="@id/user_description_text_view"
        style="@style/TextIcon"
        android:layout_marginTop="@dimen/text_small_margin"
        android:text="@string/fa_map_marker"/>

    <!-- Остальные элементы снизу не изменились -->

</RelativeLayout>

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

UserInfoFaPreview.png

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

UserInfoLayoutFaDone.png

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

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

activity_user_info.xml

<RelativeLayout>

    <!-- Остальные элементы снизу не изменились -->

    <TextView
        android:id="@+id/user_location_icon_text_view"
        android:layout_below="@id/user_description_text_view"
        android:layout_alignBaseline="@id/user_location_text_view"
        style="@style/TextIcon"
        android:layout_marginTop="@dimen/text_small_margin"
        android:text="@string/fa_map_marker"/>

    <!-- Остальные элементы снизу не изменились -->

</RelativeLayout>

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

UserInfoLayoutFaCompleted.png

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

  • Вы можете менять размер, цвет font иконок, меняя атрибуты текста. В случае с .png вам надо использовать графический редактор и каждый раз изменять картинку.
  • Текстовые иконки растягиваются в зависимости от плотности и разрешения экрана, не теряя при этом качества. Для .png нам надо создавать файлы для каждого разрешения экрана, что тоже занимает немало времени.

Ссылки:

Полезные материалы:

Полный листинг изменений кода:

Code diff

УВИДЕТЬ ВСЕ Добавить заметку
ВЫ
Добавить ваш комментарий