Share
I denne veiledningen vil jeg vise deg hvordan du bruker FontAwesome ikonpakke i et Android-prosjekt. FontAwesome er en flott timesaver av flere grunner.
For det første trenger du ikke å bekymre deg for forskjellige skjermdensiteter på forskjellige smarttelefoner. Hvis du vil bruke PNG filer, må du inkludere minst fire forskjellige versjoner av hvert ikon i pakken. Ikke bare det, på noen ultra-tette HD-skjermer, kan ikonene dine se kornete ut. Dette er noe du absolutt vil unngå. Med FontAwesome må du bare inkludere en enkelt TTF fil.
For det andre kan du stole på et av de mest rike og komplette ikonene som er tilgjengelige gratis. Nå er brukerne vant til stilen til FontAwesome, fordi den er mye brukt på nettet. Du trenger ikke å kaste bort tiden på jakt etter et sett med ikoner som er vakre, omfattende og gratis for kommersiell bruk. Jeg sier ikke at disse settene ikke eksisterer, fordi de gjør de, men de er ganske sjeldne.
La oss ta et øyeblikk for å forstå hvordan FontAwesome fungerer. Ideen bak FontAwesome ikonet pakken er enkel, ikoner behandles som tegn. Du har kanskje lagt merke til at noen eksotiske tegn behandles som tekst. For eksempel kan du enkelt kopiere og lime inn dette β tegn eller dette Σ karakter. Du kan til og med gjøre dette i et enkelt tekstredigeringsprogram. Det er også mulig å endre størrelse og farge. Det er fordi nettleseren og teksteditoren ser disse tegnene som tekst.
FontAwesome utvides på dette konseptet ved å inkludere et bredt spekter av ikoner. Du kan sammenligne den med en ordbok som samsvarer med Unicode-tegn som ikke kan skrives - og som ikke brukes - med et bestemt ikon.
Ta en titt på FontAwesome's cheatsheet for å se hva jeg snakker om. Du velger et ikon fra listen, legger merke til dets Unicode-tegn, og bruker det i en TextView, forteller Android for å gjengi det ved hjelp av FontAwesome-skrifttypen.
La oss ta en titt på et eksempel. Last ned og importer FontAwesome TrueType-filen til prosjektet. Du kan laste ned FontAwesome-eiendelene fra GitHub.
Når du laster ned FontAwesome, kommer du til et arkiv som inneholder et antall filer og mapper. De fleste av disse er nyttige for webprosjekter. Vi er bare interessert i fontawesome-webfont.ttf, som ligger i fonter mappe.
I ditt Android-prosjekt navigerer du til app> src> main. De hoved- katalog bør inneholde en mappe som heter eiendeler. Hvis det ikke er en, så opprett det. I eiendeler katalog, opprett en annen mappe, fonter, og legg til fontawesome-webfont.ttf til denne mappen.
Legg merke til at fonter katalog er ikke nødvendig. Du kan legge til FontAwesome skrifttypefilen i eiendeler katalog, men det er praktisk å ha filer av samme type i en dedikert katalog. Så lenge FontAwesome skrifttypefilen er plassert i eiendeler katalog eller en underkatalog derav, du er god til å gå.
Nå som du har tatt med FontAwesome-fontfilen i Android-prosjektet, er det på tide å bruke det. Vi vil skape en hjelperklasse for å gjøre dette lettere. Klassen vi skal bruke er android.graphics.Typeface. De skriftsnitt Klassen spesifiserer skrifttypens skrifttype og egenstil. Dette brukes til å angi hvordan tekst vises når tegnet (og målt).
La oss begynne med å opprette hjelpeklassen. Opprett en ny Java-klasse og gi den navnet FontManager:
offentlig klasse FontManager offentlig statisk endelig streng ROOT = "fonts /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; offentlig statisk Typeface getTypeface (Kontekst kontekst, String font) return Typeface.createFromAsset (context.getAssets (), font);
Hvis du vil bruke andre skrifttyper i prosjektet ditt, er det enkelt å legge til andre skrifter i hjelpeklassen. Ideen er lik:
yourTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));
Dette er alt vi trenger å gjøre, men vi kan gjøre det bedre. La oss skyve det litt lenger. Ved hjelp av fremgangsmåten ovenfor må vi opprette en variabel for hver TextView Vi vil bruke som et ikon. Det er greit. Men som programmerere er vi lat. Ikke sant?
Ikoner er ofte inneholdt i en enkelt ViewGroup, som en RelativeLayout eller a LinearLayout. Vi kan skrive en metode som klatrer treet til en gitt XML-foreldre og rekursivt overstyrer skrifttypen til hver TextView det finner.
offentlig klasse FontManager // ... offentlig statisk tomrommarkAsIconContainer (Vis v, Typeface typeface) hvis (v instanceof ViewGroup) ViewGroup vg = (ViewGroup) v; for (int i = 0; i < vg.getChildCount(); i++) View child = vg.getChildAt(i); markAsIconContainer(child); else if (v instanceof TextView) ((TextView) v).setTypeface(typeface);
La oss anta at layoutfilen din ser slik ut:
For å markere de tre TextView forekommer som ikoner, tilsidesetter vi onCreate metode og legg til følgende kodestykke:
Typeface iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);
Nå kommer den morsomme delen. Besøk FontAwesome's GitHub-side og bla gjennom tilgjengelige ikoner. Velg tre ikoner du liker. Jeg skal velge tre diagrammer, områdekartikonet, kakediagramikonet og linjediagramikonet.
I prosjektet, naviger til verdier mappe og opprett en ny fil, icons.xml. Denne filen vil fungere som en ordbok, det vil si det vil samsvare med Unicode-tegnet som er tilknyttet et bestemt ikon til et menneskelig lesbart navn. Dette betyr at vi må opprette en oppføring for hvert ikon. Slik fungerer det.
& # Xf1fe; & # Xf200; & # Xf201;
Du finner koden i FontAwesome cheatsheet eller på detaljsiden av ikonet du er interessert i.
Det neste trinnet er å referere til strengoppføringene i TextView forekomster av oppsettet ditt. Slik ser det endelige resultatet ut:
Hvis du åpner layoutredigeren til Android Studio, ser du at den ikke kan gjengi ikonene. Dette er ikke normalt. Bygg og start søknaden din. Du bør nå se ikonene som er 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 Egenskap. Å endre farge på ikonet er like enkelt. Rediger textcolor attributt og du er ferdig.
)
Som du ser, er ikonene skarpe og skarpe. Det er fordi FontAwesome-ikonene blir gjengitt på kjøretid. De er vektor i stedet for raster filer.
I dette raske tipset viste jeg deg hvordan du bruker FontAwesome-ikonet i et Android-prosjekt. FontAwesome er allment kjent, veldig rik og gratis. Resultatet er skarpe og skarpe ikoner, selv på høyoppløselige skjermer. Som en ekstra bonus, er å endre et ikons størrelse eller farge like enkelt som å endre et XML-attributt.
Accentsconagua