Share
In questo tutorial, ti mostrerò come usare il FontAwesome icon pack in un progetto Android. FontAwesome è un grande risparmio di tempo per diversi motivi.
Innanzitutto, non devi preoccuparti delle diverse densità dello schermo su diversi smartphone. Se vuoi usarlo PNG file, devi includere nel tuo pacchetto almeno quattro diverse versioni di ogni icona. Non solo, su alcuni schermi HD ultra-densi, le tue icone potrebbero apparire sgranate. Questo è qualcosa che certamente vuoi evitare. Con FontAwesome, tuttavia, devi solo includere un singolo TTF file.
In secondo luogo, puoi contare su uno dei set di icone più completi e completi disponibili gratuitamente. Ormai, gli utenti sono abituati allo stile di FontAwesome, perché è ampiamente utilizzato sul web. Non devi perdere tempo a cercare un set di icone che sia bello, completo e gratuito per uso commerciale. Non sto dicendo che questi set non esistono, perché lo fanno, ma sono piuttosto rari.
Prendiamo un momento per capire come funziona FontAwesome. L'idea alla base del pacchetto di icone FontAwesome è semplice, le icone sono trattate come caratteri. Potresti aver notato che alcuni caratteri esotici sono trattati come testo. Ad esempio, puoi facilmente copiarlo e incollarlo β personaggio o questo Σ personaggio. Puoi anche farlo in un semplice editor di testo. È anche possibile cambiarne taglia e colore. Questo perché il browser e l'editor di testo vedono questi caratteri come testo.
FontAwesome espande questo concetto includendo una vasta gamma di icone. È possibile confrontarlo con un dizionario che corrisponde a caratteri Unicode che non possono essere digitati, e che non vengono utilizzati, con un'icona specifica.
Dai un'occhiata al cheatsheet di FontAwesome per vedere di cosa sto parlando. Scegli un'icona dall'elenco, prendi nota del suo carattere Unicode e usalo in a TextView, dicendo ad Android di renderlo usando il font FontAwesome.
Diamo un'occhiata a un esempio. Scarica e importa il file FontAwesome TrueType nel tuo progetto. Puoi scaricare le risorse FontAwesome da GitHub.
Quando si scarica FontAwesome, si finisce con un archivio che include un certo numero di file e cartelle. Molti di questi sono utili per i progetti web. Ci interessa solo fontawesome-webfont.ttf, che si trova nel font cartella.
Nel tuo progetto Android, vai a app> src> principale. Il principale la directory dovrebbe includere una cartella chiamata risorse. Se non ce n'è uno, quindi crearlo. Nel risorse directory, crea un'altra cartella, font, e aggiungi fontawesome-webfont.ttf a questa cartella.
Si noti che il font la directory non è richiesta. È possibile aggiungere il file di font FontAwesome nel risorse directory, ma è conveniente avere file dello stesso tipo in una directory dedicata. Finché il file FontAwesome si trova nel file risorse directory, o una sua sottodirectory, sei a posto.
Ora che hai incluso con successo il font FontAwesome nel tuo progetto Android, è ora di usarlo. Creeremo una classe di supporto per renderlo più semplice. La classe che useremo è android.graphics.Typeface. Il carattere tipografico class specifica il carattere tipografico e lo stile intrinseco di un font. Questo è usato per specificare come il testo appare quando viene disegnato (e misurato).
Iniziamo creando la classe helper. Crea una nuova classe Java e chiamala FontManager:
public class FontManager public static final String ROOT = "fonts /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; public static Typeface getTypeface (Context context, String font) return Typeface.createFromAsset (context.getAssets (), font);
Se si desidera utilizzare altri caratteri tipografici nel progetto, è facile aggiungere altri tipi di carattere alla classe helper. L'idea è simile:
yourTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));
Questo è tutto ciò che dobbiamo fare, ma possiamo fare di meglio. Spingiamolo un po 'oltre. Usando il metodo sopra, abbiamo bisogno di creare una variabile per ciascuno TextView vogliamo usare come un'icona. Va bene. Ma, come programmatori, siamo pigri. Destra?
Le icone sono spesso contenute in un singolo ViewGroup, come un RelativeLayout o a LinearLayout. Possiamo scrivere un metodo salite l'albero di un dato genitore XML e sovrascrive in modo ricorsivo il carattere tipografico di ciascuno TextView trova.
public class FontManager // ... public static void markAsIconContainer (Visualizza v, Typeface typeface) if (v instanceof ViewGroup) ViewGroup vg = (ViewGroup) v; per (int i = 0; i < vg.getChildCount(); i++) View child = vg.getChildAt(i); markAsIconContainer(child); else if (v instanceof TextView) ((TextView) v).setTypeface(typeface);
Supponiamo che il tuo file di layout assomigli a questo:
Per segnare i tre TextView istanze come icone, noi sovrascriviamo il onCreate metodo e aggiungere il seguente frammento di codice:
Typeface iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);
Ora arriva la parte divertente. Visita la pagina GitHub di FontAwesome e sfoglia le icone disponibili. Scegli tre icone che ti piacciono. Selezionerò tre grafici, l'icona del grafico ad area, l'icona del grafico a torta e l'icona del grafico a linee.
Nel tuo progetto, vai a valori cartella e creare un nuovo file, icons.xml. Questo file servirà da dizionario, ovvero abbinerà il carattere Unicode associato a un'icona specifica a un nome leggibile dall'uomo. Ciò significa che dobbiamo creare una voce per ogni icona. Ecco come funziona.
& # Xf1fe; & # Xf200; & # Xf201;
Puoi trovare il codice nel cheatheet FontAwesome o nella pagina dei dettagli dell'icona a cui sei interessato.
Il prossimo passo è fare riferimento alle voci di stringa nel file TextView istanze del tuo layout. Questo è il risultato finale:
Se apri l'editor di layout di Android Studio, vedrai che non è in grado di visualizzare le icone. Questo non è normale. Costruisci e avvia la tua applicazione. Ora dovresti vedere le icone visualizzate correttamente:
)
Sono piccoli, no? È molto facile cambiare la dimensione delle icone. Tutto quello che devi fare è cambiare il dimensione del testo attributo. Cambiare il colore dell'icona è altrettanto facile. Modifica il colore del testo attributo e il gioco è fatto.
)
Come puoi vedere, le icone sono nitide e nitide. Questo perché le icone FontAwesome sono visualizzate in fase di esecuzione. Loro sono vettore invece di raster File.
In questo suggerimento rapido, ti ho mostrato come utilizzare l'icona FontAwesome impostata in un progetto Android. FontAwesome è ampiamente conosciuto, molto ricco e gratuito. Il risultato sono icone nitide e nitide, anche su display ad alta risoluzione. Come bonus aggiuntivo, la modifica delle dimensioni o del colore di un'icona è semplice quanto la modifica di un attributo XML.
Accentsconagua