Як використовувати піктограми та символи з "Шрифтового дивовижного" у програмі Native Android

Я намагаюся використовувати Font Awesome у своєму додатку, мені вдалося інтегрувати шрифт за допомогою Typeface.createFromAsset(), але я також хочу використовувати піктограми, надані цим шрифтом, але поки що мені це не вдалося.

Цей конкретний шрифт містить піктограми всередині зони приватного використання Unicode (PUA) для таких речей, як управління медіаплеєром, доступ до файлової системи, стрілки тощо.

Хтось використовував шрифти, що містять значки та символи на Android, чи це взагалі можливо?

Шрифт Awesome, здається, працює добре для мене в моєму додатку для Android. Я зробив наступне:

1. Скопійовано fontawesome-webfont.ttfу папку моїх оцінок
2. Знайшов об’єкти символів для потрібних значків, скориставшись цією сторінкою: http://fortawesome.github.io/Font-Awesome/cheatsheet/

3. Створено запис у strings.xml для кожного значка. Напр. Для серця:

   <string name="icon_heart">&#xf004;</string>

4. Згаданий згаданий запис у вигляді мого xml-макета:

    <Button
        android:id="@+id/like"
        style="?android:attr/buttonStyleSmall"
        ...
        android:text="@string/icon_heart" />

5. Завантажив шрифт у моєму методі onCreate і встановив його для відповідних переглядів:

   Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
   ...
   Button button = (Button)findViewById( R.id.like );
   button.setTypeface(font);

Спробуйте IcoMoon: http://icomoon.io

• Виберіть потрібні піктограми
• Призначте символи до кожної піктограми
• Завантажте шрифт

Скажімо, ви вибрали значок відтворення, призначили йому букву "P" та завантажили файл icomoon.ttfу папку активів. Ось як ви показуєте піктограму:

xml:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="48sp"
  android:text="P" />

java:

Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
textView.setTypeface(typeface);

Я розповів про створення прекрасних додатків для Android, що включає пояснення щодо використання шрифтів значків, а також додавання градієнтів, щоб зробити іконки ще красивішими: http://www.sqisland.com/talks/beautiful-android

Пояснення шрифту значка починається з слайда 34: http://www.sqisland.com/talks/beautiful-android/#34

Можливо, занадто пізно, але у мене була така ж потреба, тому я опублікував це https://github.com/liltof/font-awsome-for-android Це готова для Android версія xml-шрифту приголомшливо корисна, як сказав Кіт Корвін

Сподіваюся, це допоможе іншим.

Як зазначено вище, це чудовий приклад і чудово працює:

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf" );

Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

АЛЕ! > це спрацює, якщо рядок всередині кнопки, яку ви встановили з xml:

<string name="icon_heart">&#xf004;</string>
button.setText(getString(R.string.icon_heart));

Якщо вам потрібно його додати динамічно, ви можете скористатися цим:

String iconHeart = "";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

Якщо ви хочете програмного setText без додавання рядка до string.xml

переглянути його шістнадцятковий код тут:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

замінити & # xf066; до 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));

Для цієї мети створена невелика і корисна бібліотека :

dependencies {
    compile 'com.shamanland:fonticon:0.1.9'
}

Отримайте демонстрацію на Google Play .

Ви можете легко додати піктограму на основі шрифту у свій макет:

<com.shamanland.fonticon.FontIconView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ic_android"
    android:textSize="@dimen/icon_size"
    android:textColor="@color/icon_color"
    />

Ви можете надути піктограму шрифту Drawableвід xml:

<?xml version="1.0" encoding="utf-8"?>
<font-icon
    xmlns:android="http://schemas.android.com/apk/res-auto"
    android:text="@string/ic_android"
    android:textSize="@dimen/big_icon_size"
    android:textColor="@color/green_170"
    />

Код Java:

Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);

Посилання:

• Сторінка проекту
• Github repo

Я створив цей клас помічників у C # (Xamarin) для програмного встановлення властивості тексту. Це дуже добре працює для мене:

internal static class FontAwesomeManager
{
    private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf");

    private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string>
    {
        {FontAwesomeIcon.Bars, "\uf0c9"},
        {FontAwesomeIcon.Calendar, "\uf073"},
        {FontAwesomeIcon.Child, "\uf1ae"},
        {FontAwesomeIcon.Cog, "\uf013"},
        {FontAwesomeIcon.Eye, "\uf06e"},
        {FontAwesomeIcon.Filter, "\uf0b0"},
        {FontAwesomeIcon.Link, "\uf0c1"},
        {FontAwesomeIcon.ListOrderedList, "\uf0cb"},
        {FontAwesomeIcon.PencilSquareOutline, "\uf044"},
        {FontAwesomeIcon.Picture, "\uf03e"},
        {FontAwesomeIcon.PlayCircleOutline, "\uf01d"},
        {FontAwesomeIcon.SignOut, "\uf08b"},
        {FontAwesomeIcon.Sliders, "\uf1de"}
    };

    public static void Awesomify(this TextView view, FontAwesomeIcon icon)
    {
        var iconString = IconMap[icon];

        view.Text = iconString;
        view.SetTypeface(AwesomeFont, TypefaceStyle.Normal);
    }
}

enum FontAwesomeIcon
{
    Bars,
    Calendar,
    Child,
    Cog,
    Eye,
    Filter,
    Link,
    ListOrderedList,
    PencilSquareOutline,
    Picture,
    PlayCircleOutline,
    SignOut,
    Sliders
}

Думаю, має бути досить легко перетворитись на Java. Сподіваюся, це комусь допоможе!

Одна з бібліотек, яку я використовую для Font Awesome, така:

https://github.com/Bearded-Hen/Android-Bootstrap

Зокрема,

https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text

Документацію легко зрозуміти.

Спочатку додайте необхідні залежності в build.gradle:

dependencies {
    compile 'com.beardedhen:androidbootstrap:1.2.3'
}

По-друге, ви можете додати це у свій XML:

<com.beardedhen.androidbootstrap.FontAwesomeText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontawesometext:fa_icon="fa-github"
    android:layout_margin="10dp" 
    android:textSize="32sp"
/>

але переконайтесь, що ви додали це у свій макет кореня, якщо ви хочете використовувати приклад вище коду:

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

Бібліотека FontView дозволяє використовувати звичайні / unicode символи шрифту як піктограми / графіку у вашому додатку. Він може завантажувати шрифт через активи або мережеве розташування.

Перевага цієї бібліотеки полягає в тому, що:

1 - it takes care of remote resources for you
2 - scales the font size in dynamically sized views
3 - allows the font to easily be styled.

https://github.com/shellum/fontView

Приклад:

Layout:

<com.finalhack.fontview.FontView
        android:id="@+id/someActionIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

Java:

fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);

Є ще одне приємне рішення, яке ви можете використовувати у своєму макеті файлів xml безпосередньо та не вимагати використання setTypeface.

Це Iconify Джоан Запати . Ви можете прочитати тут, що нового в Iconify v2 . Він включає 9 різних бібліотек шрифтів, якими ви можете просто скористатися, додавши залежності у файл build.gradle .

У файлах макета xml можна вибирати між цими віджетами:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton

Спочатку створіть папку ресурсів та скопіюйте піктограму "Фантастика" (.ttf) Як створити папку ресурсів?

додаток -> клацніть правою кнопкою миші -> нове -> папка -> папка активів

Наступний крок завантаження як завантажити .ttf файл? натисніть тут -> і натисніть кнопку завантаження після завантаження витягу та відкриття веб-шрифтів. нарешті виберіть справжній текстовий стиль (ttf) вставити папку активів.

як розробити XML і Java-файл в Android?

app -> res -> значення string.xml

resources
    string name="calander_font" >&#xf073; <string
resources

цей приклад одного шрифту більше Unicode натисніть тут

Activity_main.xml

 <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/calander_view"/>

MainActivity.java

calander_tv = (TextView)findViewById(R.id.calander_view);

Typeface typeface = Typeface.createFromAsset(getAssets(),"/fonts/fa-solid-900.ttf");
calander_tv.setTypeface(typeface);
calander_tv.setText(R.string.calander_font);

Вихід:

Вихідне зображення

Я трохи запізнююся на вечірку, але я написав власну думку, що давайте вам це зробимо, за замовчуванням вона встановлена ​​на entypo, але ви можете змінити її для використання будь-якого iconfont: перевірте це тут: github.com/MarsVard/IconView

// редагування бібліотеки є старою і більше не підтримується ... нова тут https://github.com/MarsVard/IonIconView

Якщо вам потрібні лише декілька чудових іконок шрифту, ви також можете використовувати http://fa2png.io для створення нормальних піксельних зображень. Але якщо ви додаєте нові піктограми / кнопки регулярно, я б рекомендував .ttf версію як більш гнучку.

Якщо хтось задається питанням, як це додати програмно, це потрібно зробити так.

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part

Оскільки всі відповіді чудові, але я не хотів використовувати бібліотеку, і кожне рішення із лише одним кодом рядка Java робило моє Activitiesі Fragmentsдуже безладним. Тому я написав TextViewклас так:

public class FontAwesomeTextView extends TextView {
private static final String TAG = "TextViewFontAwesome";
public FontAwesomeTextView(Context context) {
    super(context);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void setCustomFont(Context ctx, AttributeSet attrs) {
    TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus);
    String customFont = a.getString(R.styleable.TextViewPlus_customFont);
    setCustomFont(ctx, customFont);
    a.recycle();
}

private void init() {
    if (!isInEditMode()) {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf");
        setTypeface(tf);
    }
}

public boolean setCustomFont(Context ctx, String asset) {
    Typeface typeface = null;
    try {
        typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
    } catch (Exception e) {
        Log.e(TAG, "Unable to load typeface: "+e.getMessage());
        return false;
    }

    setTypeface(typeface);
    return true;
}
}

що ви повинні зробити, це скопіювати ttfфайл шрифту в assetsпапку. І використовувати цей шпаргалку для пошуку кожного рядка значків.

сподіваюся, що це допомагає.