Verwendung von Symbolen und Symbolen aus „Font Awesome“ in der nativen Android-Anwendung

153

Ich versuche, Font Awesome in meiner Anwendung zu verwenden. Ich konnte die Schriftart mithilfe von integrieren Typeface.createFromAsset(), aber ich möchte auch die von dieser Schriftart bereitgestellten Symbole verwenden, aber bisher war dies nicht möglich.

Diese bestimmte Schriftart enthält Symbole im Unicode Private Use Area (PUA), z. B. für Media Player-Steuerelemente, Dateisystemzugriff, Pfeile usw.

Hat jemand Schriftarten verwendet, die Symbole und Symbole auf Android enthalten? Ist dies überhaupt möglich?

Julian Suarez
quelle
2
Ich habe den Link aktualisiert
Julian Suarez
23
Ich bin nicht der Meinung, dass dies für Stack Overflow kein Thema ist. Es scheint mir, dass es diesen Richtlinien ( stackoverflow.com/help/on-topic ) entspricht, da es sich um ein bestimmtes Programmierproblem handelt (wie man ein bestimmtes schriftbasiertes Symbol auf eine bestimmte mobile Plattform anwendet) praktisches, beantwortbares Problem (siehe meine Antwort unten, die meiner Meinung nach dies veranschaulicht).
Keith Corwin
Schauen Sie sich dieses Repo für die Implementierung von Font Awesome in Android Github.com/bperin/FontAwesomeAndroid
Brian
Überprüfen Sie diese Bibliothek: blog.shamanland.com/p/android-fonticon-library.html , sie ist auf Maven Central verfügbar. Siehe Demo-App: play.google.com/store/apps/…
Oleksii K.

Antworten:

307

Font Awesome scheint in meiner Android-App gut für mich zu funktionieren. Ich habe folgendes gemacht:

  1. Kopierte fontawesome-webfont.ttfin meinen assests Ordner
  2. Auf dieser Seite wurden die Zeichenentitäten für die von mir gewünschten Symbole gefunden: http://fortawesome.github.io/Font-Awesome/cheatsheet/
  3. Erstellt für jedes Symbol einen Eintrag in der Datei strings.xml. ZB für ein Herz:

    <string name="icon_heart">&#xf004;</string>
  4. In der Ansicht meines XML-Layouts wurde auf diesen Eintrag verwiesen:

     <Button
         android:id="@+id/like"
         style="?android:attr/buttonStyleSmall"
         ...
         android:text="@string/icon_heart" />
  5. Laden Sie die Schriftart in meine onCreate-Methode und legen Sie sie für die entsprechenden Ansichten fest:

    Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
    ...
    Button button = (Button)findViewById( R.id.like );
    button.setTypeface(font);
Keith Corwin
quelle
46
Großartige Idee. Achten Sie jedoch auf Speicherprobleme, wenn Sie ständig eine neue Schriftart für jedes Symbol erstellen. HashtableVerwenden Sie stattdessen so etwas wie die Wiederverwendung Ihrer Symbolschrift
saschoar
1
Ich mache es so: stackoverflow.com/questions/2973270/…
Informatic0re
4
Ich habe ein Projekt dafür erstellt: bitbucket.org/informatic0re/awesome-font-iconview
Informatic0re
1
Ich habe einige Probleme mit meinem Code: Wenn ich die Zeichenfolge strings.xmlwie <string name="faicon">&#xf001;</string>folgt deklariere und dann Text in meinen Code setze, ist dies in Ordnung. Aber wenn ich es versuche mTextView.setText("&#xf004;");, zeige ich nur den Rohtext. Könnte jemand helfen? thks
vtproduction
2
Fügen Sie der Textansicht eine dynamische Zeichenfolge hinzu: text.setText (Html.fromHtml ("& # xf000;"));
Rana_sadam
29

Probieren Sie IcoMoon aus: http://icomoon.io

  • Wählen Sie die gewünschten Symbole aus
  • Weisen Sie jedem Symbol Zeichen zu
  • Laden Sie die Schriftart herunter

Angenommen, Sie haben das Wiedergabesymbol ausgewählt, ihm den Buchstaben "P" zugewiesen und die Datei icomoon.ttfin Ihren Asset-Ordner heruntergeladen . So zeigen Sie das Symbol:

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);

Ich habe einen Vortrag über das Erstellen schöner Android-Apps gehalten, der Erklärungen zur Verwendung von Symbolschriftarten sowie das Hinzufügen von Verläufen enthält, um die Symbole noch schöner zu machen: http://www.sqisland.com/talks/beautiful-android

Die Erklärung der Symbolschrift beginnt auf Folie 34: http://www.sqisland.com/talks/beautiful-android/#34

Chiuki
quelle
10

Vielleicht zu spät, aber ich hatte das gleiche Bedürfnis, also habe ich diese https://github.com/liltof/font-awsome-for-android veröffentlicht. Es ist eine android-fähige XML-Version der Schrift, die fantastisch verwendet werden kann, genau wie Keith Corwin sagte

Hoffe, es wird anderen helfen.

liltof
quelle
1
Willkommen bei SO. Ich habe gesehen, dass Ihr Code nicht zu lang ist. Warum postest du es nicht bei dieser Antwort? Links können mit der Zeit abstürzen.
Andre Silva
Ich benutze diese großartige XML-Datei seit Wochen. Aber jetzt habe ich gemerkt, dass es fa_times verpasst. Kannst du es bitte aktualisieren? Edit: oh, es ist fa_remove. oder icon_remove in Ihrer Datei.
mobilGelistirici
Wie füge ich Text und Symbole in der Schaltfläche mit einer fantastischen Schriftart hinzu? Fügen Sie in der Schaltfläche "Drawable Left" oder "Drawable Right" hinzu.
Siddharth_Vyas
9

Wie oben ist ein gutes Beispiel und funktioniert gut:

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

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

ABER! > Dies funktioniert, wenn Sie eine Zeichenfolge innerhalb der Schaltfläche aus XML festlegen:

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

Wenn Sie es dynamisch hinzufügen müssen, können Sie Folgendes verwenden:

String iconHeart = "&#xf004;";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");
user1540907
quelle
bester Weg überhaupt! danke ich gebe + stimme _ nur Aufmerksamkeitsschaltfläche ist Textansicht und ersetze String.valueOf durch get string
erfan
Endlich eine Lösung für die Verwendung von Font Awesome. Vielen Dank!
Clamorious
4

Wenn Sie programmatic setText möchten, ohne string.xml einen String hinzuzufügen

Siehe den hexadezimalen Code hier:

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

Ersetzen Sie & # xf066; bis 0xf066

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

Es gibt eine kleine und nützliche Bibliothek, die für diese Zwecke entwickelt wurde :

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

Holen Sie sich eine Demo bei Google Play .

Geben Sie hier die Bildbeschreibung ein

Sie können Ihrem Layout ganz einfach ein auf Schriftarten basierendes Symbol hinzufügen:

<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"
    />

Sie können das Schriftart-Symbol wie Drawableaus XML aufblasen :

<?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-Code:

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

Links:

Oleksii K.
quelle
wirklich gute Bibliothek, danke. die aufblasbaren xml-Definitionen sind ein wenig Schmerzen , obwohl ich lieber direkt die FontIconView verwenden
Hotzen
Ich habe dies in einem Lenovo mit Android 4.2.2 getestet und die Symbole wurden nicht angezeigt. Was kann das sein?
Ollie Strevel
Versuchen Sie die neueste Version0.1.9
Oleksii K.
2

Ich habe diese Hilfsklasse in C # (Xamarin) erstellt, um die Texteigenschaft programmgesteuert festzulegen. Es funktioniert ziemlich gut für mich:

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
}

Sollte einfach genug sein, um nach Java zu konvertieren, denke ich. Hoffe es hilft jemandem!

Andres Sepulveda
quelle
2

Eine der Bibliotheken, die ich für Font Awesome verwende, ist folgende:

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

Speziell,

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

Die Dokumentation ist leicht zu verstehen.

Fügen Sie zunächst die erforderlichen Abhängigkeiten in build.gradle hinzu:

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

Zweitens können Sie dies in Ihr XML einfügen:

<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"
/>

Stellen Sie jedoch sicher, dass Sie dies in Ihrem Root-Layout hinzufügen, wenn Sie das obige Codebeispiel verwenden möchten:

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"
Abdul Rahman Ein Samad
quelle
Ich bin dem gefolgt, aber ich habe den Fehler erhalten: Fehler: (54) Keine Ressourcen-ID für das Attribut 'fa_icon' im Paket 'xxx.yyy' gefunden
Hajjat
@Hajjat ​​Um dies zu verwenden, müssen Sie Version 1.2.3 verwenden. Ich habe gerade den Code aktualisiert, um dies widerzuspiegeln. Versuch es.
Abdul Rahman A Samad
1

In der FontView-Bibliothek können Sie normale / Unicode-Schriftzeichen als Symbole / Grafiken in Ihrer App verwenden. Es kann die Schriftart über Assets oder einen Netzwerkspeicherort laden.

Der Vorteil dieser Bibliothek ist, dass:

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

Beispiel:

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);
Shellum
quelle
Zwischenspeichert es das Typeface-Objekt im Speicher? Beim Umgang mit Schriftarten unter Android ist ein Speicherverlust bekannt.
TheRealChx101
1

Es gibt eine weitere nette Lösung, die Sie direkt in Ihren Layout-XML-Dateien verwenden können und die Sie nicht verwenden müssen setTypeface.

Es ist Joan Zapatas Iconify . Hier können Sie lesen , was in Iconify v2 neu ist . Es enthält 9 verschiedene Schriftartenbibliotheken, die Sie einfach verwenden können, indem Sie Ihrer build.gradle- Datei Abhängigkeiten hinzufügen .

In den Layout-XML-Dateien können Sie zwischen folgenden Widgets wählen:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton
gus27
quelle
1

Erstellen Sie zunächst einen Asset-Ordner und kopieren Sie das Fontawesome-Symbol (.ttf). Wie erstelle ich einen Asset-Ordner?

App -> Rechtsklick -> Neu -> Ordner -> Asset-Ordner

nächster Schritt herunterladen Wie lade ich eine .ttf-Datei herunter? Klicken Sie hier -> und klicken Sie nach dem Download auf den Download-Button und öffnen Sie die Web-Schriftarten. Wählen Sie schließlich True Asset Style (ttf) und fügen Sie den Asset-Ordner ein.

Wie entwerfe ich XML- und Java-Dateien in Android?

app -> res -> values ​​string.xml

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

In diesem Beispiel für eine Schriftart mehr Unicode klicken Sie hier

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);

Ausgabe:

Ausgabebild

Manoj Kumar T.
quelle
0

Ich bin etwas spät zur Party, aber ich habe eine benutzerdefinierte Ansicht geschrieben, mit der Sie dies tun können. Standardmäßig ist sie auf entypo eingestellt. Sie können sie jedoch so ändern, dass sie eine beliebige Symbolschrift verwendet: Überprüfen Sie sie hier: github.com/MarsVard/IconView

// Die Bibliothek bearbeiten ist alt und wird nicht mehr unterstützt ... neue hier https://github.com/MarsVard/IonIconView

Mars
quelle
Ihre Bibliothek speichert die Schrift nicht zwischen, sondern erstellt sie jedes Mal, wenn die Ansicht gerendert wird.
Fernando Camargo
1
@ FernandoCamargo ist richtig, diese Bibliothek ist alt und sollte mit besserem Caching aktualisiert werden ... hier ist die neue Bibliothek mit besserer Leistung github.com/MarsVard/IonIconView
Mars
0

Falls Sie nur wenige großartige Symbole für Schriftarten benötigen, können Sie auch http://fa2png.io verwenden , um normale Pixelbilder zu generieren. Wenn Sie jedoch regelmäßig neue Symbole / Schaltflächen hinzufügen, würde ich die .ttf-Version als flexibler empfehlen.

j7nn7k
quelle
0

Wenn sich jemand fragt, wie man es programmgesteuert hinzufügt, muss man es so machen.

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

Da alle Antworten großartig sind, ich aber keine Bibliothek verwenden wollte und jede Lösung mit nur einem einzeiligen Java-Code meine Activitiesund Fragmentssehr chaotisch machte. Also habe ich die TextViewKlasse wie folgt überschrieben:

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;
}
}

Was Sie tun sollten, ist die Schriftartdatei ttfin den assetsOrdner zu kopieren. Und verwenden Sie diesen Spickzettel, um die einzelnen Symbolzeichenfolgen zu finden.

hoffe das hilft.

Pouya Danesh
quelle