Cum se utilizează FontAwesome într-o aplicație Android

În acest tutorial, vă voi arăta cum să utilizați FontAwesome icon pack într-un proiect Android. FontAwesome este o mare oportunitate pentru mai multe motive.

În primul rând, nu trebuie să vă faceți griji cu privire la densitățile ecranului diferite pe diferite smartphone-uri. Dacă doriți să utilizați PNG fișiere, trebuie să includeți în pachetul dvs. cel puțin patru versiuni diferite ale fiecărei pictograme. Nu numai că, pe unele ecrane HD ultra-dense, icoanele dvs. pot arăta granulate. Acesta este un lucru pe care cu siguranță doriți să-l evitați. Cu FontAwesome, totuși, trebuie să includeți un single TET fişier.

În al doilea rând, vă puteți baza pe unul dintre cele mai bogate și complete seturi de pictograme disponibile gratuit. Până acum, utilizatorii sunt obișnuiți cu stilul FontAwesome, deoarece este utilizat pe scară largă pe web. Nu trebuie să pierdeți timpul în căutarea unui set de icoane care să fie frumoase, cuprinzătoare și gratuite pentru uz comercial. Nu spun că aceste seturi nu există, deoarece ele o fac, dar ele sunt destul de rare.

1. Cum funcționează FontAwesome

Să facem un moment pentru a înțelege cum funcționează FontAwesome. Ideea din spatele pachetului de pictograme FontAwesome este simplă, pictogramele sunt tratate ca caractere. S-ar putea să fi observat că unele personaje exotice sunt tratate ca text. De exemplu, puteți copia și lipi cu ușurință acest lucru β caracter sau asta Σ caracter. Puteți face acest lucru chiar și într-un simplu editor de text. De asemenea, este posibil să se modifice dimensiunea și culoarea lor. Acest lucru se datorează faptului că browserul și editorul de text văd aceste caractere ca text.

FontAwesome extinde acest concept prin includerea unei game largi de icoane. Puteți să o comparați cu un dicționar care se potrivește cu caracterele Unicode care nu pot fi tipărite - și care nu sunt utilizate - cu o anumită pictogramă.

Uitați-vă la cheatsheet-ul FontAwesome pentru a vedea ce vorbesc. Alegeți o pictogramă din listă, luați notă de caracterul său Unicode și folosiți-o într-un TextView, spunând Android să o facă folosind fontul FontAwesome.

2. Importați fișierul de fonturi

Să aruncăm o privire la un exemplu. Descărcați și importați fișierul TrueType FontAwesome în proiectul dvs. Puteți descărca activele FontAwesome de la GitHub.

Când descărcați FontAwesome, veți termina cu o arhivă care include un număr de fișiere și foldere. Cele mai multe dintre acestea sunt utile pentru proiectele web. Suntem interesați doar de asta fontawesome-webfont.ttf, care este situat în fonturi pliant.

În proiectul Android, navigați la app> src> main.  principal director ar trebui să includă un folder numit bunuri. Dacă nu există una, creați-o. În bunuri director, creați un alt dosar, fonturi, si adauga fontawesome-webfont.ttf la acest dosar.

Rețineți că fonturi directorul nu este necesar. Puteți adăuga fișierul font FontAwesome în bunuri , dar este convenabil să aveți fișiere de același tip într-un director dedicat. Atâta timp cât fișierul font FontAwesome este localizat în bunuri director sau un subdirector al acestuia, esti bine sa pleci.

3. Creați o clasă Helper

Acum că ați inclus fișierul cu fonturi FontAwesome în proiectul dvs. Android, este timpul să îl utilizați. Vom crea o clasă de ajutor pentru a face acest lucru mai ușor. Clasa pe care o vom folosi este android.graphics.Typeface.  Fontul clasa specifică stilul și stilul intrinsec al unui font. Acesta este folosit pentru a specifica modul în care apare textul atunci când este tras (și măsurat).

Să începem prin crearea clasei de ajutor. Creați o nouă clasă Java și denumiți-o FontManager:

clasa publica FontManager public static final String ROOT = "fonturi /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; public static Typeface getTypeface (Context context, font String) returnează Typeface.createFromAsset (context.getAssets (), font); 

Dacă doriți să utilizați alte tipuri de fonturi în proiectul dvs., este ușor să adăugați alte fonturi în clasa de ajutor. Ideea este similară:

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

Asta e tot ce trebuie să facem, dar putem face mai bine. Să-l împingem puțin mai departe. Folosind metoda de mai sus, trebuie să creați o variabilă pentru fiecare TextView dorim să utilizăm ca icoană. E in regula. Dar, ca programatori, suntem leneși. Dreapta?

Icoanele sunt adesea conținute într-un singur ViewGroup, cum ar fi a RelativeLayout sau a LinearLayout. Putem scrie o metodă ascensiuni arborele unei anumite părinte XML și suprascrie recursiv fontul fiecăruia TextView găsește.

clasa publica FontManager // ... public static void markAsIconContainer (Vizualizare v, Typeface typeface) if (v din ViewGroup) ViewGroup vg = (ViewGroup) v; pentru (int i = 0; i < vg.getChildCount(); i++)  View child = vg.getChildAt(i); markAsIconContainer(child);   else if (v instanceof TextView)  ((TextView) v).setTypeface(typeface);   

Să presupunem că fișierul de aspect are un astfel de aspect:

    

Pentru a marca cele trei TextView instanțe ca icoane, suprascrieți onCreate și adăugați următorul fragment de cod:

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

4. Folosiți pictogramele pe care le doriți

Acum vine distracția. Accesați pagina GitHub a FontAwesome și răsfoiți pictogramele disponibile. Alegeți trei pictograme care vă plac. Voi alege trei diagrame, pictograma diagramă zonă, pictograma diagramei pieptene și pictograma diagramă linie.

În proiectul dvs., navigați la valorile și creați un fișier nou, icons.xml. Acest fișier va servi drept dicționar, adică se va potrivi cu caracterele Unicode asociate cu o anumită pictogramă unui nume care poate fi citit de om. Aceasta înseamnă că trebuie să creați o intrare pentru fiecare pictogramă. Asa functioneaza.

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

Puteți găsi codul în foaia de calcul FontAwesome sau pe pagina cu detalii a pictogramei care vă interesează.

Următorul pas este de a face referire la intrările de șir din TextView instanțe ale aspectului dvs. Acesta este rezultatul final:

  

Dacă deschideți editorul de layout al aplicației Android Studio, veți vedea că nu poate face pictogramele. Acest lucru nu este normal. Creați și lansați aplicația. Ar trebui să vedeți acum pictogramele redate corect:

Sunt mici, nu-i așa? Este foarte ușor să modificați dimensiunea pictogramelor. Tot ce trebuie să faceți este să schimbați Mărimea textului atribut. Schimbarea culorii pictogramei este la fel de ușoară. Editați culoarea textului atributul și ați terminat.

După cum puteți vedea, pictogramele sunt clare și clare. Asta pentru ca icoanele FontAwesome sunt redate la timpul de executie. Sunt vector in loc de raster fișiere.

Concluzie

În acest sfat rapid, v-am arătat cum să utilizați setul de pictograme FontAwesome într-un proiect Android. FontAwesome este cunoscut, foarte bogat și gratuit. Rezultatul este icoane clare și clare, chiar și pe afișaje de înaltă rezoluție. Ca un bonus adăugat, schimbarea dimensiunii sau a culorii unei pictograme este la fel de simplă ca schimbarea unui atribut XML.

Cod