How bruke FontAwesome i en Android App
54
Del
9
Del

Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen, vil jeg vise deg hvordan du bruker FontAwesome ikonet pakke i en Android-prosjekt. FontAwesome er en stor tidsbesparer av flere grunner.

Først trenger du ikke å bekymre deg for ulike skjerm tettheter på ulike smarttelefoner. Hvis du vil bruke PNG
filer, må du ta med i pakken minst fire forskjellige versjoner av hvert ikon. Ikke bare det, på noen ultratette HD-skjermer, kan det hende at ikonene ser kornete. Dette er noe du absolutt ønsker å unngå. Med FontAwesome, men du må bare omfatte en enkelt TTF fil.

For det andre kan du stole på en av de mest rike og komplett ikonsett tilgjengelig for gratis. Nå er brukere vant til stilen på FontAwesome, fordi det er mye brukt på nettet. Du trenger ikke å kaste bort tid på jakt etter et sett med ikoner som er vakker, omfattende, og gratis for kommersiell bruk. Jeg sier ikke at disse settene ikke eksisterer, fordi de de gjør, men de er ganske sjeldne.

1. Slik fungerer FontAwesome

La oss ta et øyeblikk å forstå hvordan det fungerer FontAwesome. Ideen bak FontAwesome ikonet pakke er enkelt, ikoner blir behandlet som tegn. Du har kanskje lagt merke til at noen eksotiske tegn behandles som tekst. For eksempel kan du enkelt kopiere og lime inn denne β karakter eller denne Σ karakter. Du kan selv gjøre dette på en enkel tekst editor. Det er også mulig å endre sin størrelse og farge. Det er fordi nettleser-og tekstredaktør ser disse tegnene som tekst.

FontAwesome utvider på dette konseptet ved å inkludere et bredt spekter av ikoner. Du kan sammenligne det med en ordbok som matcher Unicode-tegn som ikke kan skrives-og som ikke brukes-med et bestemt ikon.

Ta en titt på FontAwesome sin cheatsheet å se hva jeg snakker om. Du velger et ikon fra listen, legg merke til sin Unicode karakter, og bruke det i en TextView, forteller Android for å gjengi det ved hjelp av FontAwesome font.

2. Importer Font File

La oss ta en titt på et eksempel. Last ned og importere FontAwesome Truetype-filen inn i prosjektet. Du kan laste ned FontAwesome eiendeler fra GitHub.

Når du laster ned FontAwesome, ender du opp med et arkiv som inneholder en rekke filer og mapper. De fleste av disse er nyttige for webprosjekter. Vi er bare interessert i fontawesome-webfont.ttf, som ligger i skriftene mappen

I Android-prosjektet, navigere til app >.; src > hoved. Hovedkatalogen bør inneholde en mappe som heter eiendeler. Hvis det ikke er ett, og deretter opprette den. I eiendeler katalogen, oppretter en annen mappe, fonter, og legge fontawesome-webfont.ttf til denne mappen.

Legg merke til at katalogen fonts ikke er nødvendig. Du kan legge til FontAwesome font filen i eiendeler katalogen, men det er praktisk å ha filer av samme type i en egen katalog. Så lenge FontAwesome font filen ligger i eiendeler katalogen, eller en underkatalog av disse, er du god til å gå.

3. Lag en Helper Class

Nå som du har med hell tatt med FontAwesome font filen i Android-prosjektet, er det på tide å bruke den. Vi vil lage en hjelper klasse å gjøre dette enklere. Klassen vi skal bruke er android.graphics.Typeface. Skriftsnitt klassen angir skriftsnitt og iboende stil av en skrift. Dette brukes til å angi hvordan teksten vises når trukket (og målt).

La oss begynne med å lage hjelperen klassen. Opprett et nytt Java klasse og name it FontManager:
public class FontManager {public static endelige String ROOT = "fonter /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; public static Face getTypeface (Context kontekst, String font) {return Typeface.createFromAsset (context.getAssets (), skrift); }}

Hvis du ønsker å bruke andre skrifttyper i prosjektet, er det enkelt å legge til andre skrifter til hjelperen klassen. Ideen er lik:
yourTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));

Dette er alt vi trenger å gjøre, men vi kan gjøre bedre. La oss skyve den litt lenger. Ved hjelp av metoden ovenfor, må vi opprette en variabel for hvert TextView vi ønsker å bruke som et ikon. Det er bra. Men, som programmerere, vi er lat. Høyre?

Ikoner er ofte finnes i en enkelt ViewGroup, for eksempel en RelativeLayout eller en LinearLayout. Vi kan skrive en metode som klatrer
treet til et gitt XML forelder og rekursivt overstyrer skriftsnitt av hver TextView den finner.
Public class FontManager {//... public static void markAsIconContainer (Se v , Skrifttype skriftsnitt) {if (v instanceof ViewGroup) {ViewGroup vg = (ViewGroup) v; for (int i = 0; i < vg.getChildCount (); i ++) {Vis barnet = vg.getChildAt (i); markAsIconContainer (barn); }} Else if (v instanceof TextView) {((TextView) v) .setTypeface (skrift); }}}

La oss anta at din layout fil ser omtrent slik ut:
< LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android~~number=plural" xmlns: verktøy = "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" verktøy: kontekst = ". MainActivity" > < TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" /> < TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" /> < TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" /> < /LinearLayout >

For å markere de tre TextView instanser som ikoner Vi overstyre onCreate metode og legge inn følgende kode:
Face iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);
4. Bruk Ikoner ønsker
Du

Nå kommer den morsomme delen. Besøk FontAwesome sin GitHub side og bla gjennom tilgjengelige ikoner. Velg tre ikoner du liker. Jeg kommer til å plukke tre diagrammer, området diagrammet ikon, kakediagrammet ikonet, og linjediagram ikon.

I prosjektet, navigere til verdier mappe og opprette en ny fil, icons.xml. Denne filen vil tjene som en ordbok, som er, det vil matche Unicode karakter forbundet med et bestemt ikon til en lesbar navn. Dette betyr at vi må lage en oppføring for hvert ikon. Dette er hvordan det fungerer
. ≪ resources > < string name = "fa_icon_areachart" > & # xf1fe; < /string > < string name = "fa_icon_piechart" > & # xf200; < /string > < string name = "fa_icon_linechart" > & # xf201; < /string > < /ressurser >

Du kan finne koden i FontAwesome cheatsheet eller på detaljsiden for ikonet du er interessert i .

Det neste trinnet er å referere strengen oppføringer i TextView forekomster av layout. Dette er hva det endelige resultatet ser slik ut:
< TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" android: text = "@ string /fa_icon_areachart "/> < TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" android: text = "@ streng /fa_icon_piechart" /> < TextView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" android: text = "@ streng /fa_icon_linechart" />

Hvis du åpner oppsettet redaktør for Android Studio, vil du se at det ikke kan gjengi ikonene. Dette er ikke normalt. Bygg og starte programmet. Du skal nå se ikonene korrekt gjengitt:

De er små, er de ikke? Det er veldig enkelt å endre størrelsen på ikonene. Alt du trenger å gjøre er å endre Tekststørrelse attributtet. Endre fargen på ikonet er like enkelt. Rediger textcolor attributtet og du er ferdig
< TextView android. Layout_width = "match_parent" android: layout_height = "wrap_content" android: vekt = "center" android: layout_weight = "1" android: Tekststørrelse = "45sp "android: textcolor =" # 9b59b6 "android: text =" @ streng /fa_icon_areachart "/>

Som du kan se, ikonene er skarp og klar. Det er fordi FontAwesome ikoner gjengis under kjøring. De er vektor istedenfor rasterfiler.

Konklusjon

I denne rask spiss, viste jeg deg hvordan du bruker FontAwesome ikonet satt i en Android-prosjekt. FontAwesome er viden kjent, veldig rik, og gratis. Resultatet er skarpe og klare ikoner, selv på høyoppløselige skjermer. Som en ekstra bonus, endre et ikon størrelse eller farge er så enkelt som å endre en XML-attributtet.