В этом уроке я покажу вам, как использовать пакет иконок FontAwesome в проекте Android. FontAwesome — это отличная возможность сэкономить время по нескольким причинам.
Во-первых, вам не нужно беспокоиться о разной плотности экрана на разных смартфонах. Если вы хотите использовать PNG- файлы, вы должны включить в свой пакет как минимум четыре разные версии каждого значка. Мало того, что на некоторых сверхплотных HD-дисплеях ваши значки могут выглядеть зернистыми. Это то, что вы, безусловно, хотите избежать. Однако с FontAwesome вам просто нужно включить один файл TTF .
Во-вторых, вы можете положиться на один из самых богатых и полных наборов иконок, доступных бесплатно. К настоящему времени пользователи привыкли к стилю FontAwesome, потому что он широко используется в Интернете. Вам не нужно тратить время на поиски красивых, всеобъемлющих и бесплатных иконок для коммерческого использования. Я не говорю, что этих наборов не существует, потому что они есть , но они довольно редки.
1. Как работает FontAwesome
Давайте уделим минутку, чтобы понять, как работает FontAwesome. Идея пакета значков FontAwesome проста, значки рассматриваются как символы. Возможно, вы заметили, что некоторые экзотические символы рассматриваются как текст. Например, вы можете легко скопировать и вставить этот символ β или этот символ ∑ . Вы даже можете сделать это в простом текстовом редакторе. Также возможно изменить их размер и цвет. Это потому, что браузер и текстовый редактор видят эти символы как текст.
FontAwesome расширяет эту концепцию, включая широкий спектр иконок. Вы можете сравнить его со словарем, который соответствует символам Юникода, которые не могут быть напечатаны — и которые не используются — с определенным значком.
Взгляните на таблицу FontAwesome, чтобы понять, о чем я говорю. Вы выбираете значок из списка, записываете его символ Unicode и используете его в TextView , сообщая Android, чтобы он отображался с использованием шрифта FontAwesome.
2. Импортируйте файл шрифта
Давайте посмотрим на пример. Загрузите и импортируйте файл FontAwesome TrueType в свой проект. Вы можете скачать ресурсы FontAwesome с GitHub .
Когда вы загружаете FontAwesome, вы получаете архив с несколькими файлами и папками. Большинство из них полезны для веб-проектов. Нас интересует только fontawesome-webfont.ttf , который находится в папке шрифтов .
В вашем проекте Android перейдите в приложение> src> main . Основной каталог должен содержать папку с именем assets . Если его нет, создайте его. В каталоге активов создайте еще одну папку, шрифты и добавьте fontawesome-webfont.ttf в эту папку.
Обратите внимание, что каталог шрифтов не требуется. Вы можете добавить файл шрифта FontAwesome в каталог ресурсов , но удобно иметь файлы одного типа в отдельном каталоге. Пока файл шрифта FontAwesome находится в каталоге активов или его подкаталоге, все готово.
3. Создайте вспомогательный класс
Теперь, когда вы успешно включили файл шрифта FontAwesome в свой проект Android, пришло время его использовать. Мы будем создавать вспомогательный класс, чтобы сделать это проще. Класс, который мы будем использовать, это android.graphics.Typeface . Класс Typeface определяет гарнитуру и собственный стиль шрифта. Это используется для указания того, как текст отображается при рисовании (и измерении).
Давайте начнем с создания вспомогательного класса. Создайте новый класс Java и назовите его FontManager :
|
01
02
03
04
05
06
07
08
09
10
|
public class FontManager {
public static final String ROOT = «fonts/»,
FONTAWESOME = ROOT + «fontawesome-webfont.ttf»;
public static Typeface getTypeface(Context context, String font) {
return Typeface.createFromAsset(context.getAssets(), font);
}
}
|
Если вы хотите использовать другие шрифты в своем проекте, легко добавить другие шрифты в класс помощника. Идея похожа:
|
1
|
yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));
|
Это все, что нам нужно сделать, но мы можем сделать лучше. Давайте подтолкнем это немного дальше. Используя описанный выше метод, нам нужно создать переменную для каждого TextView мы хотим использовать в качестве значка. Все в порядке. Но, как программисты, мы ленивы. Правильно?
Значки часто содержатся в одной ViewGroup , такой как RelativeLayout или LinearLayout . Мы можем написать метод, который поднимается по дереву данного родителя XML и рекурсивно переопределяет гарнитуру каждого TextView он находит.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
public class FontManager {
// …
public static void markAsIconContainer(View v, Typeface typeface) {
if (v instanceof ViewGroup) {
ViewGroup vg = (ViewGroup) v;
for (int i = 0; i < vg.getChildCount(); i++) {
View child = vg.getChildAt(i);
markAsIconContainer(child);
}
} else if (v instanceof TextView) {
((TextView) v).setTypeface(typeface);
}
}
}
|
Давайте предположим, что ваш файл макета выглядит примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<LinearLayout
xmlns:android=»http://schemas.android.com/apk/res/android»
xmlns:tools=»http://schemas.android.com/tools»
android:id=»@+id/icons_container»
android:layout_width=»match_parent»
android:layout_height=»match_parent»
android:paddingBottom=»@dimen/activity_vertical_margin»
android:paddingLeft=»@dimen/activity_horizontal_margin»
android:paddingRight=»@dimen/activity_horizontal_margin»
android:paddingTop=»@dimen/activity_vertical_margin»
tools:context=».MainActivity»>
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″ />
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″ />
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″ />
</LinearLayout>
|
Чтобы пометить три экземпляра TextView как значки, мы переопределяем метод onCreate и добавляем следующий фрагмент кода:
|
1
2
|
Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME);
FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);
|
4. Используйте иконки, которые вы хотите
Теперь самое интересное. Посетите страницу FontAwesome GitHub и просмотрите доступные значки. Выберите три иконки, которые вам нравятся. Я собираюсь выбрать три диаграммы, значок диаграммы области, значок круговой диаграммы и значок линейной диаграммы .
В своем проекте перейдите в папку значений и создайте новый файл icons.xml . Этот файл будет служить словарем, то есть он будет сопоставлять символ Unicode, связанный с определенной иконкой, с понятным для человека именем. Это означает, что нам нужно создать запись для каждой иконки. Вот как это работает.
|
1
2
3
4
5
|
<resources>
<string name=»fa_icon_areachart»></string>
<string name=»fa_icon_piechart»></string>
<string name=»fa_icon_linechart»></string>
</resources>
|
Вы можете найти код в чит-листе FontAwesome или на странице подробностей интересующего вас значка.
Следующим шагом является ссылка на строковые записи в экземплярах TextView вашего макета. Вот как выглядит окончательный результат:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″
android:text=»@string/fa_icon_areachart» />
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″
android:text=»@string/fa_icon_piechart» />
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″
android:text=»@string/fa_icon_linechart» />
|
Если вы откроете редактор макетов Android Studio, вы увидите, что он не может отображать значки. Это не нормально. Создайте и запустите ваше приложение. Теперь вы должны увидеть правильно отображенные значки:
Они маленькие, не так ли? Изменить размер значков очень просто. Все, что вам нужно сделать, это изменить атрибут textSize . Изменить цвет значка так же просто. Отредактируйте атрибут textColor и все готово.
|
1
2
3
4
5
6
7
8
|
<TextView
android:layout_width=»match_parent»
android:layout_height=»wrap_content»
android:gravity=»center»
android:layout_weight=»1″
android:textSize=»45sp»
android:textColor=»#9b59b6″
android:text=»@string/fa_icon_areachart» />
|
Как видите, значки четкие и четкие. Это потому, что значки FontAwesome отображаются во время выполнения. Это векторные, а не растровые файлы.
Вывод
В этом кратком совете я показал вам, как использовать значок FontAwesome, установленный в проекте Android. FontAwesome широко известен, очень богат и бесплатен. В результате получаются четкие и четкие значки даже на дисплеях с высоким разрешением. В качестве дополнительного бонуса изменение размера или цвета значка так же просто, как изменение атрибута XML.