Share
In deze tutorial zal ik je laten zien hoe je de FontAwesome icon pack in een Android-project. FontAwesome is om verschillende redenen een geweldige tijdsspeler.
Ten eerste hoeft u zich geen zorgen te maken over verschillende schermdichtheden op verschillende smartphones. Als je wilt gebruiken PNG bestanden, moet u in elk pakket ten minste vier verschillende versies van elk pictogram opnemen. Niet alleen dat, op sommige ultra-dichte HD-schermen, uw pictogrammen er korrelig uit kunnen zien. Dit is iets dat je zeker wilt vermijden. Met FontAwesome hoef je echter alleen een single in te voegen TTF het dossier.
Ten tweede kunt u vertrouwen op een van de meest rijke en complete icon-sets die gratis beschikbaar zijn. Inmiddels zijn gebruikers gewend aan de stijl van FontAwesome, omdat het op grote schaal wordt gebruikt op internet. U hoeft geen tijd te verspillen met het zoeken naar een reeks pictogrammen die mooi, volledig en gratis voor commercieel gebruik is. Ik zeg niet dat deze sets niet bestaan, omdat ze dat wel doen, maar ze zijn vrij zeldzaam.
Laten we een moment nemen om te begrijpen hoe FontAwesome werkt. Het idee achter het FontAwesome-pictogrampakket is eenvoudig, pictogrammen worden als tekens behandeld. Je hebt misschien gemerkt dat sommige exotische karakters als tekst worden behandeld. U kunt dit bijvoorbeeld gemakkelijk kopiëren en plakken β karakter of dit Σ karakter. U kunt dit zelfs doen in een eenvoudige teksteditor. Het is ook mogelijk om hun grootte en kleur te wijzigen. Dat komt omdat de browser - en de teksteditor - deze tekens als tekst ziet.
FontAwesome breidt dit concept uit door een breed scala aan pictogrammen op te nemen. U kunt het vergelijken met een woordenboek dat overeenkomt met Unicode-tekens die niet kunnen worden getypt - en die niet worden gebruikt - met een specifiek pictogram.
Neem een kijkje in de cheatsheet van FontAwesome om te zien waar ik het over heb. U kiest een pictogram uit de lijst, noteert het Unicode-teken en gebruikt dit in a Tekstweergave, Android vertellen om het te renderen met het FontAwesome-lettertype.
Laten we een voorbeeld bekijken. Download en importeer het FontAwesome TrueType-bestand in uw project. Je kunt de FontAwesome-assets downloaden van GitHub.
Wanneer u FontAwesome downloadt, krijgt u een archief met een aantal bestanden en mappen. De meeste hiervan zijn handig voor webprojecten. Wij zijn alleen geïnteresseerd in fontawesome-webfont.ttf, die zich in de fonts map.
Ga in uw Android-project naar app> src> main. De hoofd map moet een map bevatten met de naam middelen. Als er geen is, maak het dan. In de middelen map, maak een andere map, fonts, en voeg toe fontawesome-webfont.ttf naar deze map.
Merk op dat de fonts map is niet verplicht. U kunt het FontAwesome-lettertypebestand toevoegen in de middelen map, maar het is handig om bestanden van hetzelfde type in een speciale map te hebben. Zolang het lettertype FontAwesome zich in de middelen map, of een submap daarvan, je bent klaar om te gaan.
Nu u met succes het FontAwesome-lettertypebestand in uw Android-project hebt opgenomen, is het tijd om het te gebruiken. We zullen een helperklasse maken om dit gemakkelijker te maken. De klas die we gaan gebruiken is android.graphics.Typeface. De Typeface class specificeert het lettertype en de intrinsieke stijl van een lettertype. Dit wordt gebruikt om aan te geven hoe tekst verschijnt wanneer getekend (en gemeten).
Laten we beginnen met het maken van de helperklasse. Maak een nieuwe Java-klasse en geef deze een naam FontManager:
public class FontManager public static final String ROOT = "fonts /", FONTAWESOME = ROOT + "fontawesome-webfont.ttf"; public static Typeface getTypeface (Context-context, String-lettertype) return Typeface.createFromAsset (context.getAssets (), font);
Als u andere lettertypen in uw project wilt gebruiken, kunt u eenvoudig andere lettertypen aan de helperklasse toevoegen. Het idee is vergelijkbaar:
yourTextView.setTypeface (FontManager.getTypeface (FontManager.YOURFONT));
Dit is alles wat we moeten doen, maar we kunnen het beter doen. Laten we het een beetje verder duwen. Met behulp van de bovenstaande methode moeten we voor elk een variabele maken Tekstweergave we willen gebruiken als een pictogram. Dat is prima. Maar als programmeurs zijn we lui. Rechts?
Iconen zitten vaak in een single ViewGroup, zoals een Relatieve layout of a LinearLayout. We kunnen een methode schrijven die beklimmingen de boom van een bepaalde XML-ouder en overschrijft recursief het lettertype van elk Tekstweergave het vindt.
public class FontManager // ... public static void markAsIconContainer (View v, Typeface lettertype) if (v instanceof ViewGroup) ViewGroup vg = (ViewGroup) v; voor (int i = 0; i < vg.getChildCount(); i++) View child = vg.getChildAt(i); markAsIconContainer(child); else if (v instanceof TextView) ((TextView) v).setTypeface(typeface);
Laten we aannemen dat je lay-outbestand er ongeveer zo uitziet:
Om de drie te markeren Tekstweergave exemplaren als pictogrammen overschrijven we de onCreate methode en voeg het volgende codefragment toe:
Typeface iconFont = FontManager.getTypeface (getApplicationContext (), FontManager.FONTAWESOME); FontManager.markAsIconContainer (findViewById (R.id.icons_container), iconFont);
Nu komt het leuke gedeelte. Ga naar de GitHub-pagina van FontAwesome en blader door de beschikbare pictogrammen. Kies drie iconen die je leuk vindt. Ik ga drie diagrammen kiezen, het pictogram van het vlakdiagram, het cirkeldiagrampictogram en het lijngrafiekpictogram.
Ga in uw project naar de waarden map en maak een nieuw bestand aan, icons.xml. Dit bestand zal als een woordenboek dienen, dat wil zeggen dat het het Unicode-teken dat bij een specifiek pictogram hoort, koppelt aan een voor mensen leesbare naam. Dit betekent dat we een vermelding voor elk pictogram moeten maken. Dit is hoe het werkt.
& # Xf1fe; & # Xf200; & # Xf201;
Je kunt de code vinden in de cheatsheet van FontAwesome of op de detailpagina van het pictogram waarin je bent geïnteresseerd.
De volgende stap is om te verwijzen naar de string-items in de Tekstweergave exemplaren van uw lay-out. Dit is hoe het eindresultaat eruit ziet:
Als u de lay-outeditor van Android Studio opent, ziet u dat de pictogrammen niet kunnen worden gerenderd. Dit is niet normaal. Bouw en start uw applicatie. U zou nu de pictogrammen correct weergegeven moeten zien:
)
Ze zijn klein, toch? Het is heel eenvoudig om de grootte van de pictogrammen te wijzigen. Het enige dat u hoeft te doen is het veranderen van de lettergrootte attribuut. De kleur van het pictogram wijzigen is net zo eenvoudig. Bewerk de tekst kleur attribuut en je bent klaar.
)
Zoals u kunt zien, zijn de pictogrammen scherp en helder. Dat komt omdat FontAwesome-pictogrammen tijdens runtime worden gerenderd. Zij zijn vector in plaats van raster bestanden.
In deze snelle tip heb ik je laten zien hoe je het FontAwesome-pictogram gebruikt dat is ingesteld in een Android-project. FontAwesome is algemeen bekend, erg rijk en gratis. Het resultaat is scherpe en heldere pictogrammen, zelfs op schermen met een hoge resolutie. Als toegevoegde bonus is het wijzigen van de grootte of kleur van een pictogram net zo eenvoudig als het wijzigen van een XML-kenmerk.
Accentsconagua