Dans ce tutoriel, je vais vous montrer comment utiliser le FontAwesome pack d’icônes dans un projet Android. FontAwesome est un excellent gain de temps 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 souhaitez utiliser PNG fichiers, vous devez inclure dans votre package au moins quatre versions différentes de chaque icône. Non seulement cela, sur certains écrans HD ultra-denses, vos icônes peuvent sembler granuleuses. C’est quelque chose que vous voulez certainement éviter. Avec FontAwesome, cependant, 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 les plus 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 de temps à rechercher un ensemble d’icônes beau, complet et gratuit pour un usage commercial. Je ne dis pas que ces ensembles n’existent pas, car ils ils font, mais ils sont assez rares.
1. Fonctionnement de FontAwesome
Prenons un moment pour comprendre comment fonctionne FontAwesome. L’idée derrière le pack d’icônes FontAwesome est simple, les icônes sont traitées comme des personnages. Vous avez peut-être remarqué que certains personnages exotiques sont traités comme du texte. Par exemple, vous pouvez facilement copier et coller ce β caractère ou ceci ∑ personnage. Vous pouvez même le faire dans un simple éditeur de texte. Il est également possible de changer leur taille et leur couleur. C’est parce que le navigateur – et l’éditeur de texte – considère ces caractères comme du texte.
FontAwesome élargit ce concept en incluant une large gamme d’icônes. Vous pouvez le comparer à un dictionnaire qui correspond aux caractères Unicode qui ne peuvent pas être saisis – et qui ne sont pas utilisés – avec une icône spécifique.
Jeter un coup d’œil à Aide-mémoire 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 un TextView, disant à Android de le rendre en utilisant la police FontAwesome.
2. Importer le fichier de polices
Jetons un œil à un exemple. Téléchargez et importez le fichier FontAwesome TrueType dans votre projet. Vous pouvez télécharger les ressources FontAwesome à partir de GitHub.
Lorsque vous téléchargez FontAwesome, vous vous retrouvez avec une archive qui comprend 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 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éez un autre dossier, polices, et ajouter fontawesome-webfont.ttf dans ce dossier.
Notez que le polices l’annuaire 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 les atouts répertoire, ou un sous-répertoire de celui-ci, vous êtes prêt à partir.
3. Créer une classe d’assistance
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 Typeface class spécifie la police et le style intrinsèque d’une police. Ceci est utilisé pour spécifier comment le texte apparaît lorsqu’il est dessiné (et mesuré).
Commençons par créer la classe helper. Créez une nouvelle classe Java et nommez-la 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);
}
}
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:
yourTextView.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 TextView nous voulons utiliser comme 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 RelativeLayout ou un LinearLayout. Nous pouvons écrire une méthode qui grimpe l’arborescence d’un parent XML donné et remplace récursivement la police de chaque TextView il trouve.
public class FontManager {
// ...
public static void markAsIconContainer(View v, Typeface typeface) {
if (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);
}
}
}
Supposons que votre fichier de mise en page ressemble à ceci:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="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"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1" />
</LinearLayout>
Pour marquer les trois TextView instances sous forme d’icônes, nous remplaçons les onCreate et ajoutez l’extrait de code suivant:
Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME); FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);
4. Utilisez les icônes souhaitées
Vient maintenant la partie amusante. Visite Page GitHub de FontAwesome et parcourez les icônes disponibles. Choisissez trois icônes que vous aimez. Je vais choisir trois graphiques, le icône de graphique en aires, la icône de camembert, et le icône de graphique en courbes.
Dans votre projet, accédez au valeurs dossier et créez 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.
<resources>
<string name="fa_icon_areachart"></string>
<string name="fa_icon_piechart"></string>
<string name="fa_icon_linechart"></string>
</resources>
Vous pouvez trouver le code dans le Aide-mémoire FontAwesome ou sur le 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 TextView instances de votre mise en page. Voici à quoi ressemble le résultat final:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_areachart" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_piechart" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:text="@string/fa_icon_linechart" />
Si vous ouvrez l’éditeur de mise en page d’Android Studio, vous verrez qu’il ne peut pas rendre les icônes. Ce n’est pas normal. Créez et lancez votre application. Vous devriez maintenant voir les icônes correctement rendues:
)
Ils sont petits, non? Il est très facile de changer la taille des icônes. Tout ce que vous avez à faire est de changer le textSize attribut. Changer la couleur de l’icône est tout aussi simple. Modifier le textColor attribut et vous avez terminé.
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:textSize="45sp"
android:textColor="#9b59b6"
android:text="@string/fa_icon_areachart" />
)
Comme vous pouvez le voir, les icônes sont nettes et nettes. C’est parce que les icônes FontAwesome sont rendues au moment de l’exécution. Elles sont vecteur au lieu de raster des dossiers.
Conclusion
Dans cette astuce rapide, 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 nettes, même sur des écrans haute résolution. En prime, changer la taille ou la couleur d’une icône est aussi simple que de changer un attribut XML.
