Share
Dans ce tutoriel, je vais vous montrer comment utiliser le FontAwesome pack d'icônes dans un projet Android. FontAwesome est un gain de temps considérable pour plusieurs raisons.
Tout d'abord, vous n'avez pas à vous soucier des différentes densités d'écran sur différents smartphones. Si vous voulez utiliser PNG fichiers, vous devez inclure dans votre package au moins quatre versions différentes de chaque icône. De plus, sur certains écrans HD ultra-denses, vos icônes peuvent paraître granuleuses. C'est quelque chose que vous voulez certainement éviter. Cependant, avec FontAwesome, il vous suffit d'inclure un seul TTF fichier.
Deuxièmement, vous pouvez compter sur l'un des jeux d'icônes les plus riches et complets disponibles gratuitement. À présent, les utilisateurs sont habitués au style de FontAwesome, car il est largement utilisé sur le Web. Vous n'avez pas à perdre votre temps à chercher un ensemble d'icônes beau, complet et gratuit pour un usage commercial. Je ne dis pas que ces ensembles n'existent pas, parce qu'ils existent, mais ils sont assez rares.
Prenons un moment pour comprendre le fonctionnement de FontAwesome. L'idée derrière le pack d'icônes FontAwesome est simple, les icônes sont traitées comme des caractères. Vous avez peut-être remarqué que certains caractères exotiques sont traités comme du texte. Par exemple, vous pouvez facilement copier et coller cette β personnage ou ce Σ personnage. Vous pouvez même le faire dans un simple éditeur de texte. Il est également possible de changer leur taille et leur couleur. En effet, le navigateur et l'éditeur de texte voient ces caractères sous forme de texte..
FontAwesome développe ce concept en incluant un large éventail d’icônes. Vous pouvez le comparer à un dictionnaire qui correspond à des caractères Unicode qui ne peuvent pas être saisis et qui ne sont pas utilisés avec une icône spécifique.
Jetez un coup d'œil à la feuille de triche de FontAwesome pour voir de quoi je parle. Vous choisissez une icône dans la liste, prenez note de son caractère Unicode et utilisez-la dans Affichage, dire à Android de le rendre en utilisant la police FontAwesome.
Jetons un coup d'oeil à un exemple. Téléchargez et importez le fichier FontAwesome TrueType dans votre projet. Vous pouvez télécharger les actifs de FontAwesome à partir de GitHub..
Lorsque vous téléchargez FontAwesome, vous vous retrouvez avec une archive comprenant un certain nombre de fichiers et de dossiers. La plupart d'entre eux sont utiles pour les projets Web. Nous ne sommes intéressés que par fontawesome-webfont.ttf, qui est situé dans le les polices dossier.
Dans votre projet Android, accédez à app> src> main. le principale Le répertoire doit inclure un dossier nommé les atouts. S'il n'y en a pas, créez-le. dans le les atouts répertoire, créer un autre dossier, les polices, et ajouter fontawesome-webfont.ttf dans ce dossier.
Notez que le les polices le répertoire n'est pas requis. Vous pouvez ajouter le fichier de police FontAwesome dans le les atouts répertoire, mais il est pratique d’avoir des fichiers du même type dans un répertoire dédié. Tant que le fichier de police FontAwesome se trouve dans le répertoire les atouts répertoire, ou un sous-répertoire de celui-ci, vous êtes bon pour aller.
Maintenant que vous avez inclus avec succès le fichier de police FontAwesome dans votre projet Android, il est temps de l'utiliser. Nous allons créer une classe d'assistance pour rendre cela plus facile. La classe que nous allons utiliser est android.graphics.Typeface. le Police de caractères class spécifie la police de caractères et le style intrinsèque d'une police. Ceci est utilisé pour spécifier comment le texte apparaît lorsque dessiné (et mesuré).
Commençons par créer la classe d'assistance. Créez une nouvelle classe Java et nommez-la. FontManager:
classe publique FontManager public static final String ROOT = "fonts /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; public Typeface statique getTypeface (contexte de contexte, police de caractères) return Typeface.createFromAsset (context.getAssets (), font);
Si vous souhaitez utiliser d'autres polices dans votre projet, il est facile d'ajouter d'autres polices à la classe d'assistance. L'idée est similaire:
votreTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));
C'est tout ce que nous devons faire, mais nous pouvons faire mieux. Poussons un peu plus loin. En utilisant la méthode ci-dessus, nous devons créer une variable pour chaque Affichage nous voulons utiliser comme une icône. C'est très bien. Mais, en tant que programmeurs, nous sommes paresseux. Droite?
Les icônes sont souvent contenues dans un seul ViewGroup, tel qu'un Disposition relative ou un LinearLayout. Nous pouvons écrire une méthode qui monte l’arbre d’un parent XML donné et remplace de manière récursive la police de caractères de chaque Affichage il trouve.
classe publique FontManager //… void statique public markAsIconContainer (View v, police de caractères) if (v instance de ViewGroup) ViewGroup vg = (ViewGroup) v; pour (int i = 0; i < vg.getChildCount(); i++) View child = vg.getChildAt(i); markAsIconContainer(child); else if (v instanceof TextView) ((TextView) v).setTypeface(typeface);
Supposons que votre fichier de présentation ressemble à ceci:
Pour marquer les trois Affichage instances sous forme d'icônes, nous substituons la onCreate method et ajoutez l'extrait de code suivant:
Police de caractères iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);
Maintenant vient la partie amusante. Visitez la page GitHub de FontAwesome et parcourez les icônes disponibles. Choisissez trois icônes que vous aimez. Je vais choisir trois graphiques, l'icône de graphique en secteurs, de camembert et de graphique en courbes..
Dans votre projet, accédez au valeurs dossier et créer un nouveau fichier, icons.xml. Ce fichier servira de dictionnaire, c’est-à-dire qu’il fera correspondre le caractère Unicode associé à une icône spécifique à un nom lisible par l’homme. Cela signifie que nous devons créer une entrée pour chaque icône. Voilà comment cela fonctionne.
& # xf1fe; & # xf200; & # xf201;
Vous pouvez trouver le code dans la feuille de triche de FontAwesome ou sur la page de détail de l'icône qui vous intéresse.
L’étape suivante consiste à référencer les entrées de chaîne dans le Affichage instances de votre mise en page. Voici à quoi ressemble le résultat final:
Si vous ouvrez l'éditeur de disposition d'Android Studio, vous verrez qu'il ne peut pas restituer les icônes. Ce n'est pas normal Construisez et lancez votre application. Vous devriez maintenant voir les icônes correctement rendues:
)
Ils sont petits, n'est-ce pas? Il est très facile de changer la taille des icônes. Tout ce que vous devez faire est de changer le taille du texte attribut. Changer la couleur de l'icône est tout aussi facile. Modifier le textColor attribuer et vous avez terminé.
)
Comme vous pouvez le constater, les icônes sont tranchantes. En effet, les icônes FontAwesome sont rendues au moment de l'exécution. Elles sont vecteur au lieu de raster des dossiers.
Dans cette astuce, je vous ai montré comment utiliser le jeu d'icônes FontAwesome dans un projet Android. FontAwesome est largement connu, très riche et gratuit. Le résultat est des icônes nettes et précises, même sur des écrans haute résolution. En prime, modifier la taille ou la couleur d'une icône est aussi simple que de modifier un attribut XML..
Accentsconagua