Så här använder du FontAwesome i en Android App

I denna handledning visar jag dig hur du använder FontAwesome ikon pack i ett Android-projekt. FontAwesome är en stor timesaver av flera skäl.

För det första behöver du inte oroa sig för olika skärmdensiteter på olika smartphones. Om du vill använda PNG filer, måste du inkludera i ditt paket minst fyra olika versioner av varje ikon. Inte bara det, på vissa ultra-täta HD-skärmar, kan dina ikoner se korniga ut. Det här är något du verkligen vill undvika. Med FontAwesome måste du dock bara inkludera en singel TTF fil.

För det andra kan du lita på en av de mest rika och kompletta ikonuppsättningarna som finns gratis. Användare är vana vid FontAwesome, eftersom det används ofta på webben. Du behöver inte slösa tid på att leta efter en uppsättning ikoner som är vackra, omfattande och gratis för kommersiell användning. Jag säger inte att dessa uppsättningar inte existerar, för de gör de, men de är ganska sällsynta.

1. Hur FontAwesome fungerar

Låt oss ta en stund att förstå hur FontAwesome fungerar. Tanken bakom FontAwesome-ikonen är enkelt, ikoner behandlas som tecken. Du kanske har märkt att vissa exotiska tecken behandlas som text. Du kan till exempel enkelt kopiera och klistra in det här β tecken eller detta Σ karaktär. Du kan även göra det i en enkel textredigerare. Det är också möjligt att ändra storlek och färg. Det beror på att webbläsaren och textredigeraren ser dessa tecken som text.

FontAwesome expanderar på detta koncept genom att inkludera ett stort antal ikoner. Du kan jämföra den med en ordlista som matchar Unicode-tecken som inte kan skrivas-och som inte används - med en viss ikon.

Ta en titt på FontAwesomes cheatsheet för att se vad jag pratar om. Du väljer en ikon från listan, noterar dess Unicode-tecken och använder den i en Textview, berätta för Android att göra det med hjälp av FontAwesome-teckensnittet.

2. Importera fontfilen

Låt oss ta en titt på ett exempel. Hämta och importera FontAwesome TrueType-filen till ditt projekt. Du kan ladda ner FontAwesome-tillgångarna från GitHub.

När du laddar ner FontAwesome slutar du med ett arkiv som innehåller ett antal filer och mappar. De flesta av dessa är användbara för webbprojekt. Vi är bara intresserade av fontawesome-webfont.ttf, som ligger i typsnitt mapp.

Navigera till ditt Android-projekt app> src> main. De huvud katalog bör innehålla en mapp som heter tillgångar. Om det inte finns en, skapa sedan den. I tillgångar katalog, skapa en annan mapp, typsnitt, och lägg till fontawesome-webfont.ttf till den här mappen.

Observera att typsnitt katalog är inte nödvändig. Du kan lägga till FontAwesome typsnitt i filen tillgångar katalog, men det är bekvämt att ha filer av samma typ i en dedikerad katalog. Så länge FontAwesome-fontfilen finns i tillgångar katalog eller en underkatalog därav, du är bra att gå.

3. Skapa en hjälparklass

Nu när du har tagit med FontAwesome typsnittfilen i ditt Android-projekt är det dags att använda det. Vi kommer att skapa en hjälpklass för att underlätta detta. Den klass vi ska använda är android.graphics.Typeface. De typsnitt klassen specificerar typsnittet och inneboende stil för en typsnitt. Detta används för att ange hur texten visas när den ritas (och mäts).

Låt oss börja med att skapa hjälparklassen. Skapa en ny Java-klass och namnge den FontManager:

offentlig klass FontManager offentlig statisk slutsträng ROOT = "fonts /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; offentliga statiska Typeface getTypeface (Kontexttext, String font) return Typeface.createFromAsset (context.getAssets (), typsnitt); 

Om du vill använda andra teckensnitt i ditt projekt är det enkelt att lägga till andra teckensnitt i hjälparklassen. Tanken är liknande:

yourTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));

Det här är allt vi behöver göra, men det kan vi göra bättre. Låt oss driva det lite längre. Med hjälp av ovanstående metod måste vi skapa en variabel för varje Textview vi vill använda som en ikon Det är okej. Men som programmerare är vi lat. Höger?

Ikoner finns ofta i en enda ViewGroup, så som en RelativeLayout eller a Linear. Vi kan skriva en metod som klättrar träd av en given XML-förälder och rekursivt överträder typsnittet för varje Textview den finner.

public class FontManager // ... offentliga statiska tomrumsAsIconContainer (Visa v, Typeface typsnitt) om (v instanceof 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);   

Låt oss anta att din layoutfil ser något ut så här:

    

För att markera de tre Textview instanser som ikoner, åsidosätter vi onCreate metod och lägg till följande kodbit:

Typeface iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);

4. Använd de ikoner du vill ha

Nu kommer den roliga delen. Besök FontAwesome's GitHub-sida och bläddra bland de tillgängliga ikonerna. Välj tre ikoner du gillar. Jag ska välja tre diagram, ikonet för områdeskartan, cirkeldiagramikonen och linjediagramikonen.

I ditt projekt, navigera till värden mapp och skapa en ny fil, icons.xml. Den här filen kommer att fungera som en ordbok, det vill säga det kommer att matcha Unicode-tecknet som är associerat med en viss ikon till ett personligt läsbart namn. Det betyder att vi måste skapa en post för varje ikon. Så här fungerar det.

 & # Xf1fe; & # Xf200; & # Xf201; 

Du kan hitta koden i FontAwesome cheatsheet eller på detaljsidan för ikonen du är intresserad av.

Nästa steg är att hänvisa strängposter i Textview instanser av din layout. Så här ser slutresultatet ut:

  

Om du öppnar layoutredigeraren för Android Studio ser du att den inte kan ge ikonerna. Detta är inte normalt. Bygg och starta din ansökan. Du ska nu se ikonerna som är korrekt gjorda:

De är små, eller hur? Det är väldigt enkelt att ändra ikonernas storlek. Allt du behöver göra är att ändra textstorlek attribut. Att ändra ikonens färg är lika lätt. Redigera text färg attribut och du är klar.

Som du kan se är ikonerna skarpa och skarpa. Det beror på att FontAwesome-ikonerna görs vid körning. Dom är vektor istället för raster filer.

Slutsats

I det här snabba tipset visade jag dig hur du använder ikonen FontAwesome i ett Android-projekt. FontAwesome är allmänt känd, mycket rik och gratis. Resultatet är skarpa och klara ikoner, även på högupplösta skärmar. Som en extra bonus kan du ändra en ikons storlek eller färg så enkelt som att ändra ett XML-attribut.