Share
In diesem Tutorial zeige ich Ihnen, wie Sie das verwenden FontAwesome Icon Pack in einem Android-Projekt. FontAwesome ist aus verschiedenen Gründen eine großartige Zeitersparnis.
Erstens müssen Sie sich nicht um unterschiedliche Bildschirmdichten auf verschiedenen Smartphones kümmern. Wenn Sie verwenden möchten PNG Dateien müssen Sie mindestens vier verschiedene Versionen jedes Symbols in Ihr Paket aufnehmen. Außerdem können Ihre Icons auf einigen ultra-dichten HD-Displays körnig aussehen. Dies ist etwas, das Sie unbedingt vermeiden möchten. Bei FontAwesome müssen Sie jedoch nur eine einzige angeben TTF Datei.
Zweitens können Sie sich auf eines der reichhaltigsten und vollständigsten Symbolsets verlassen, die kostenlos erhältlich sind. Mittlerweile sind die Benutzer an den Stil von FontAwesome gewöhnt, da dieser im Web weit verbreitet ist. Sie müssen keine Zeit mit der Suche nach einer Reihe von Symbolen verschwenden, die schön, umfassend und für den kommerziellen Gebrauch kostenlos ist. Ich sage nicht, dass diese Sets nicht existieren, weil sie es tun, aber sie sind ziemlich selten.
Nehmen wir uns einen Moment Zeit, um zu verstehen, wie FontAwesome funktioniert. Die Idee hinter dem FontAwesome-Icon-Pack ist einfach: Symbole werden als Zeichen behandelt. Möglicherweise haben Sie bemerkt, dass einige exotische Zeichen als Text behandelt werden. Sie können dies beispielsweise leicht kopieren und einfügen β Charakter oder das ∑ Charakter. Sie können dies sogar in einem einfachen Texteditor tun. Es ist auch möglich, ihre Größe und Farbe zu ändern. Das liegt daran, dass der Browser und der Texteditor diese Zeichen als Text sehen.
FontAwesome erweitert dieses Konzept um eine Vielzahl von Icons. Sie können es mit einem Wörterbuch vergleichen, das mit Unicode-Zeichen übereinstimmt, die nicht mit einem bestimmten Symbol eingegeben werden können und nicht verwendet werden.
Schauen Sie sich das Cheatheet von FontAwesome an, um zu erfahren, wovon ich spreche. Sie wählen ein Symbol aus der Liste aus, notieren dessen Unicode-Zeichen und verwenden es in einem Textvorschau, Android dazu auffordern, es mit der Schriftart FontAwesome zu rendern.
Schauen wir uns ein Beispiel an. Laden Sie die FontAwesome-TrueType-Datei herunter und importieren Sie sie in Ihr Projekt. Sie können die FontAwesome-Assets von GitHub herunterladen.
Wenn Sie FontAwesome herunterladen, erhalten Sie ein Archiv, das eine Reihe von Dateien und Ordnern enthält. Die meisten davon sind für Webprojekte nützlich. Wir interessieren uns nur für fontawesome-webfont.ttf, das befindet sich in der Schriftarten Mappe.
Navigieren Sie in Ihrem Android-Projekt zu app> src> main. Das Main Das Verzeichnis sollte einen Ordner mit dem Namen enthalten Vermögenswerte. Wenn es keine gibt, erstellen Sie sie. In dem Vermögenswerte Verzeichnis erstellen, erstellen Sie einen anderen Ordner, Schriftarten, und hinzufügen fontawesome-webfont.ttf zu diesem Ordner.
Notiere dass der Schriftarten Verzeichnis ist nicht erforderlich. Sie können die FontAwesome-Schriftartdatei in der Vermögenswerte Verzeichnis, aber es ist praktisch, Dateien des gleichen Typs in einem dedizierten Verzeichnis zu haben. Solange sich die FontAwesome-Schriftdatei im Vermögenswerte Verzeichnis oder ein Unterverzeichnis davon sind Sie bereit zu gehen.
Nachdem Sie die FontAwesome-Schriftartdatei erfolgreich in Ihr Android-Projekt eingefügt haben, ist es an der Zeit, sie zu verwenden. Wir werden eine Hilfsklasse erstellen, um dies zu erleichtern. Die Klasse, die wir verwenden werden, ist android.graphics.Typeface. Das Schrift class gibt die Schriftart und den Stil einer Schriftart an. Hiermit wird festgelegt, wie Text beim Zeichnen (und Messen) angezeigt wird..
Beginnen wir mit der Erstellung der Hilfsklasse. Erstellen Sie eine neue Java-Klasse und benennen Sie sie FontManager:
öffentliche Klasse FontManager public static final String ROOT = "fonts /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; public static Typeface getTypeface (Kontext-Kontext, String-Schriftart) return Typeface.createFromAsset (context.getAssets (), font);
Wenn Sie andere Schriftarten in Ihrem Projekt verwenden möchten, können Sie der Helper-Klasse problemlos weitere Schriftarten hinzufügen. Die Idee ist ähnlich:
yourTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));
Dies ist alles, was wir tun müssen, aber wir können es besser machen. Lass es uns ein bisschen weiter schieben. Mit der obigen Methode müssen wir für jede eine Variable erstellen Textvorschau Wir möchten als Symbol verwenden. Das ist gut. Aber als Programmierer sind wir faul. Recht?
Icons sind oft in einem enthalten ViewGroup, so wie ein RelativesLayout oder ein LinearLayout. Wir können eine Methode schreiben klettert Die Struktur eines bestimmten XML-übergeordneten Elements überschreibt rekursiv die Schriftart jedes XML-Elements Textvorschau es findet.
public class FontManager //… public static void markAsIconContainer (Ansicht v, Schriftart) if (v Instanz von ViewGroup) ViewGroup vg = (ViewGroup) v; für (int i = 0; i < vg.getChildCount(); i++) View child = vg.getChildAt(i); markAsIconContainer(child); else if (v instanceof TextView) ((TextView) v).setTypeface(typeface);
Nehmen wir an, Ihre Layoutdatei sieht ungefähr so aus:
Die drei markieren Textvorschau Instanzen als Icons überschreiben wir die onCreate Methode und fügen Sie den folgenden Code-Ausschnitt hinzu:
Typeface iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);
Jetzt kommt der lustige Teil. Besuchen Sie die GitHub-Seite von FontAwesome und durchsuchen Sie die verfügbaren Symbole. Wählen Sie drei Symbole, die Sie mögen. Ich werde drei Diagramme auswählen, das Flächendiagramm-Symbol, das Kreisdiagramm-Symbol und das Liniendiagramm-Symbol.
Navigieren Sie in Ihrem Projekt zu Werte Ordner und erstellen Sie eine neue Datei, icons.xml. Diese Datei dient als Wörterbuch, dh das mit einem bestimmten Symbol verknüpfte Unicode-Zeichen wird mit einem vom Menschen lesbaren Namen abgeglichen. Dies bedeutet, dass wir für jedes Symbol einen Eintrag erstellen müssen. So funktioniert es.
& # xf1fe; & # xf200; & # xf201;
Sie finden den Code im FontAwesome-Cheatsheet oder auf der Detailseite des Symbols, das Sie interessiert.
Der nächste Schritt besteht darin, auf die String-Einträge in zu verweisen Textvorschau Instanzen Ihres Layouts. So sieht das Endergebnis aus:
Wenn Sie den Layout-Editor von Android Studio öffnen, werden Sie feststellen, dass die Symbole nicht gerendert werden können. Das ist nicht normal. Erstellen und starten Sie Ihre Anwendung. Sie sollten jetzt die Symbole richtig dargestellt sehen:
)
Sie sind klein, nicht wahr? Es ist sehr einfach, die Größe der Symbole zu ändern. Sie müssen nur das ändern Textgröße Attribut. Das Ändern der Farbe des Symbols ist genauso einfach. Bearbeiten Sie die Textfarbe Attribut und du bist fertig.
)
Wie Sie sehen, sind die Symbole scharf und scharf. Das liegt daran, dass FontAwesome-Symbole zur Laufzeit gerendert werden. Sie sind Vektor anstatt Raster Dateien.
In diesem kurzen Tipp habe ich Ihnen gezeigt, wie Sie das FontAwesome-Symbol in einem Android-Projekt verwenden. FontAwesome ist weithin bekannt, sehr reichhaltig und kostenlos. Das Ergebnis sind scharfe und scharfe Symbole, selbst bei hochauflösenden Displays. Ein zusätzlicher Bonus: Das Ändern der Größe oder Farbe eines Symbols ist so einfach wie das Ändern eines XML-Attributs.
Accentsconagua