De handleiding voor Android-ontwikkelaars voor betere typografie

...

Typografie kan een groot verschil maken in de aantrekkelijkheid en bruikbaarheid van een app, en nu kunnen Android-ontwikkelaars lettertypen uit de Google Fonts-catalogus gebruiken. Het is eenvoudig, efficiënt en biedt een reeks nieuwe typografische opties.

Elke ontwikkelaar weet dat ontwerp een belangrijke rol speelt in de gebruikerservaring - het kan een kritieke factor zijn in het succes of falen van uw app. Toch is er altijd de verleiding om standaardlettertypen te gebruiken, om door te gaan met een release, om de complexiteit van het integreren van aangepaste lettertypen te omzeilen, of gewoon om de schijnbaar mysterieuze kunst van typekeuze te vermijden.

Gelukkig heeft Android Studio het eenvoudiger gemaakt om een ​​app met onderscheidende typografie te bouwen met behulp van de nieuwe functie "Downloadbare lettertypen". Met deze functie hebt u de volledige Google Fonts-catalogus binnen handbereik en kunt u typografie op JellyBean en hoger (SDK level 16+) eenvoudig aanpassen met gratis, betrouwbare, hoogwaardige Google Fonts.

Naast esthetische verbeteringen, kan het gebruik van downloadbare lettertypen ook de totale grootte van APK-bestanden verminderen en het geheugengebruik verminderen, omdat gedownloade lettertypen worden gedeeld met alle toepassingen. Uw APK wordt kleiner omdat het niet nodig is om de lettertypen vooraf te bundelen. Nadat een lettertype is gedownload van Google Fonts voor één app, bewaart Android het op schijf zodat andere apps het ook kunnen gebruiken zonder extra opslag. Net als onze web-API, die lettertypen rechtstreeks aan websites aanbiedt, geldt dat hoe meer mensen Google-lettertypen gebruiken, hoe groter de latentiewinst bij het delen.

In deze zelfstudie verbeteren we de typografie van een voorbeeldtoepassing door het standaardlettertype te vervangen voor iets met een meer onderscheidend en dynamisch scala aan stijlen uit de Google Fonts-catalogus. We gebruiken een lettertype met de naam Alegreya, dat bekend staat als een 'superfamilie' omdat het een breed scala aan stijlen, gewichten en varianten biedt. Het gebruik van een superfamilie betekent dat we veel typografische opties hebben om het uiterlijk van onze interface te verfijnen.

De app waarmee we zullen werken is Plaid, van Nick Butcher, een schuifbare feed van nieuwsartikelen met betrekking tot Material Design. Deze worden gepresenteerd als full-bleed tegels, waarop je kunt tikken of klikken om uit te breiden naar een ‘dribbel’ pagina met favorieten en statistieken voor ‘likes’ en ‘views’.

Deze tutorial is bedoeld voor ontwikkelaars, maar legt ook enkele 'waarom'-beslissingen achter het ontwerp uit, dus houd beide hoeden vast!

Voordat we aan de slag gaan

Installeer Android Studio 3.0 en kloon vervolgens het "Plaid" -project van Github en betaal b76937, de versie die we voor deze zelfstudie zullen gebruiken:

git-kloon https://github.com/rsheeter/plaid.git;
cd plaid;
git afrekenen b76937;

Open nu het project in Android Studio 3.0.

Als u de Google Fonts-provider wilt gebruiken, moet Google Play Services versie 12+ zijn geïnstalleerd. Als u werkt met een apparaat dat is ingesteld om updates te ontvangen, kunt u doorgaan; maar als u een emulator gebruikt die is gestart via Android Studio, gebruikt deze mogelijk een oudere versie van Google Play Services. Volg deze stappen om het virtuele Android-apparaat bij te werken vanuit Android Studio.

1. Maak een virtueel apparaat (Extra> Android> AVD Manager) met Play Store, aangegeven door het pictogram in de kolom Play Store:

2. Start een virtueel apparaat in Android Studio. Om de "Uitgebreide bedieningselementen" aan de rechterkant van het emulatiescherm te openen, tikt of klikt u op het laatste ... pictogram onderaan het verticale knoppenpaneel:

3. Selecteer Google Play en controleer het versienummer. Als u 11.2 of lager gebruikt, tikt of klikt u op de knop Bijwerken. Dit zou je naar de Play Store moeten brengen, waar je vervolgens op de groene knop Update moet tikken of klikken:

4. Nu u bent bijgewerkt naar versie 11.2 of hoger, ondersteunt het apparaat downloadbare lettertypen.

Werk de About-pagina bij

Laten we eerst de pagina Over updaten. De paragraaf 'hoofdtekst' in de onderste helft van de pagina is momenteel ingesteld in Roboto Regular, een lettertype zonder schreef, terwijl de titel (in de bovenste helft) is ingesteld in Roboto Mono Regular. Laten we het veranderen in het serif-lettertype Alegreya, een energiek, eigentijds ontwerp met een dynamisch en gevarieerd ritme geïnspireerd op kalligrafische lettervormen. Het systeem van het Alegreya-type is een 'superfamilie', oorspronkelijk bedoeld voor literatuur, en omvat serif en sans-serif zusterfamilies.

De titeltekst dient als een 'heldenafbeelding', een grote afbeelding die mensen naar de pagina leidt en een emotionele toon zet. Dit gebruikt de lettervormen van de titel als een "masker" dat de mintgroene voorgrond uitsnijdt, zodat een afbeelding van achteren kan doorkijken. Overschakelen van Roboto Mono Regular naar Alegreya Black zorgt voor een groter oppervlak waar dat beeld doorheen kan schijnen.

Stijl de tekst 'Over activiteit'

Aangezien de tekst 'Over activiteit' momenteel de 'standaard'-tekststijl Roboto Regular vraagt, moeten we een andere handmatig instellen:

  1. Open de app / src / main / res / layout / about_plaid.xml
  2. Selecteer het tabblad Ontwerpen
  3. Open about_description in het deelvenster Componentenstructuur
  4. Open in het paneel Kenmerken de vervolgkeuzelijst fontFamily en selecteer Meer lettertypen ... (Mogelijk moet u klikken op Alle attributen weergeven om fontFamily te zien)
  5. Selecteer familie Alegreya
  6. Selecteer stijl Normaal
Volg stappen 1–6 om de tekst 'Over activiteit' te stijlen

Android Studio heeft onze app geconfigureerd om het lettertype op te halen van de ‘provider 'van Google Fonts. Om dit te doen, heeft het een aantal wijzigingen aangebracht in onze bronstructuur:

app / src / main / res / font / (meer informatie)
Deze nieuwe map bevat XML-bestanden die lettertypebronnen beschrijven. In dit geval geeft het instructies voor het laden van een lettertype van de Google Fonts Provider.

app / src / main / res / values ​​/ font_certs.xml (meer informatie)
Om ervoor te zorgen dat fontverzoeken alleen door vertrouwde partijen worden beantwoord, geeft dit bestand de handtekening van de fontprovider op.

app / src / main / res / values ​​/ preloaded_fonts.xml (meer informatie)
Dit is een lijst met lettertypen die vroeg in het opstarten van de toepassing moeten worden geladen. Gecorrigeerd 12/12/2018; gaf eerder ten onrechte aan dat deze lettertypen tijdens de installatie werden geladen.

app / src / main / AndroidManifest.xml: :
Dit is een lijst met lettertypen die de Google Fonts-provider zal proberen te laden tijdens het installeren (of bijwerken) van de app.

Je kunt een voorbeeld van een diff zien voor deze stap in commit a1e711c.

Werk de uitgesneden tekstweergave bij

De tekststijl is momenteel Roboto Mono Regular. Laten we het veranderen door verder te gaan waar we in de vorige stap waren gebleven:

7. Selecteer in de ontwerpweergave “CutoutTextView”

8. Open de vervolgkeuzelijst "fontFamily" en selecteer "More Fonts ..."

9. Selecteer familie “Alegreya”

10. Selecteer stijl "Zwart"

11. (Voor stap 11, zie hieronder)

Volg stappen 7–11 om de CutoutTextView bij te werken

Als je dit nu zou proberen, zou het lettertype nog steeds Roboto Regular zijn, niet Alegreya Black. De reden is dat declaratieve lettertypen standaard asynchroon worden opgehaald (meer informatie.). Na voltooiing probeert het systeem het lettertype van een TextView bij te werken met setTypeface, maar dit zal mislukken omdat CutoutTextView TextView niet uitbreidt.

CutoutTextView implementeert echter de eigenschap fontFamily (hier). Als we het ophalen van het lettertype markeren als blokkeren, is het lettertype Family gereed wanneer we erom vragen. Als we dit niet als blokkeren markeren, is de geretourneerde waarde voor font Family nog niet bruikbaar. (We kunnen ook coderen dat async onszelf ophaalt, maar laten we dat voor later bewaren.)

11. Open app / src / main / res / font / alegreya.xml en alegreya-black.xml en voeg dit kenmerk toe aan het einde van de elementen :

app: fontProviderFetchStrategy =”blokkeren”

Probeer het nu eens! (Je kunt een voorbeeld van een diff voor deze stap zien op commit f1c997)

Tekstgrootte bijwerken

Bekijk de tekst 'Over'. Het is grijs op een ietwat lichtere grijze achtergrond. Alegreya is een serif-lettertype met hoge ‘streekmodulatie’, wat betekent dat de lettervormen sterk variëren van hun dikste tot hun dunste punten. Enigszins contra-intuïtief leidt dit tot een lager visueel contrast in het algemeen. Fijne variaties in een lettervorm kunnen het wazig doen lijken, vooral bij kleine formaten.

Om dit probleem te verminderen, laten we de tekstgrootte van de alinea vergroten van 16sp naar 18sp. Dit verhoogt het schijnbare contrast van de tekst tegen de achtergrond.

De TextView voor about_plaid.xml gebruikt een stijl met de naam TextAppearance.About. Als u de tekstgrootte wilt wijzigen van 16sp naar 18sp, moet u dit gedeelte van app / src / main / res / values ​​/ styles.xml bewerken:

Je kunt een voorbeeld van een diff voor deze stap bekijken op github.com/rsheeter/plaid/commit/4dda25

Update de app-titel

Vervolgens zullen we de titel van onze app wijzigen door een lettertype programmatisch op te halen. De titel is momenteel ingesteld in Roboto met de OpenType "small caps" -functie toegepast. We hebben ook extra ‘tracking’ gebruikt om de letters van elkaar te scheiden.

(Dit detail is ontleend aan een conventie van boektypografie, waar hoofdstuktitels vaak in kleine hoofdletters bovenaan de pagina's worden afgedrukt. Lees het boek Shaping Text van Jan Middendorp voor meer informatie over typografie.)

Async ophalen zal mislukken omdat Toolbar geen TextView is, net zoals CutoutTextView dat niet is. Toolbar implementeert ook niet de eigenschap fontFamily, dus we kunnen niet gewoon instellen dat het probleem wordt opgelost.

Laten we in plaats daarvan proberen het lettertype programmatisch op te halen en toe te wijzen. Inapp / src / main / java / io / plaidapp / ui / HomeActivity.java gebruik FontsContractCompat (referentie) om het lettertype aan te vragen door deze vier stappen te volgen.

1. We hebben een thread nodig om de aankomst van het lettertype af te wachten. Verklaar een variabele om deze vast te houden:

private Handler lettertype Handler;

2. Voeg een methode toe om de thread voor het verwerken van lettertypen te beheren:

3. Voeg een methode toe om een ​​lettertype (verwijzing) toe te passen op de werkbalk:

4. Start in onCreate een async-ophaalactie van de lettertypeprovider:

Schakel over naar Alegreya Sans SC Black

Als u de hoofdpagina bekijkt, ziet u dat de titel een beetje te dun lijkt. Zoals veel serif-lettertypen, leiden de sterk gemoduleerde lijnen van Alegreya tot een lager visueel contrast, vooral in vergelijking met de gemiddelde schreefloze serif.

Gelukkig is Alegreya een 'superfamilie' met zowel serif- als sans-variëteiten in verschillende gewichten. Het koppelen van deze twee lettertypen en het gebruik van verschillende gewichten kan structuur geven aan een interface, waardoor de gebruikersinterface wordt afgebakend van inhoud. Laten we Alegreya Sans Small Caps (SC.) Proberen

De small caps-variant van Alegreya is inherent kleiner, maar we kunnen dit corrigeren door het gewicht te verhogen. Laten we het Black (900) -gewicht proberen.

  1. Kopieer res / font / alegreya.xml om res / font / font / alegreya_sans_sc_black.xml te maken
  2. Bewerk alegreya_sans_sc_black.xml om de app te wijzigen: fontProviderQuery to name = Alegreya Sans SC & amp; weight = 900
  3. Bewerk res / values ​​/ preloaded_fonts.xml om het nieuwe lettertype toe te voegen:

4. Geef de nieuwe query op in HomeActivity.java:

Verander Alegreya Black naar Bold

Kijk nog eens naar de titel op de hoofdpagina

Het zwarte gewicht is hier iets te sterk, dus laten we het op Bold zetten (700.)

  1. Hernoem alegreya_sans_sc_black.xml naar alegreya_sans_sc_bold.xml en bewerk om de app te wijzigen: fontProviderQuery to name = Alegreya Sans SC & amp; weight = 700
  2. Update de zoekopdracht in HomeActivity.java:

Je kunt een voorbeeld van een diff zien voor de uiteindelijke status van de app (met Alegreya Sans SC Bold) op commit ac55478. Zie hoe uw project zich verhoudt.

Update Dribble View

Tik of klik op een kaart op het hoofdscherm om naar de weergave 'Dribbel' in de app te gaan. Laten we nogmaals Roboto Mono Regular vervangen door Alegreya Black.

Merk in app / src / main / res / layout / dribbble_shot_title.xml op dat de titel en beschrijving zijn opgemaakt met @ style / TextAppearance.DribbbleShotTitle en @ style / TextAppearance.DribbbleShotDescription. Vind deze in app / src / main / res / values ​​/ styles.xml (hint: Ctrl + klik.) Wijzig nu het lettertype:

Je kunt een voorbeeld van een diff hiervoor zien op commit 0e53b56.

Cijferstijlen wijzigen

Er is nog een ding om de weergave “dribbel” te verbeteren.

De knoppen "Vind ik leuk" en "Weergaven" gebruiken zogenaamde "oude stijl" cijfers. Deze zijn ontworpen om op te gaan in kleine Latijnse letters in alinea's van tekst. Maar op zichzelf lijken oude stijlcijfers niet op hun plaats, omdat hun daaltjes soms onder de basislijn van de andere tekst hangen.

Laten we in plaats daarvan de functie lum gebruiken. Dit vertelt de app om 'voering'-cijfers te gebruiken, die er bekender uitzien omdat ze dezelfde hoogte hebben als hoofdletters. (Meer informatie van onze vrienden op Typekit)

Kijkend naar app / src / main / res / layout / dribbble_shot_description.xml kunnen we zien dat de "likes" en "views" tellers worden vormgegeven door @ style / Widget.Plaid.InlineActionButton.

Zoek @ style / Widget.Plaid.InlineActionButton in app / src / main / res / values ​​/ styles.xml (hint: Ctrl + klik.)

Voeg nu een instructie toe om lijnnummers te gebruiken voor deze tellers:

Je kunt een voorbeeld van een diff hiervoor zien bij commit 4dda25.

Gevolgtrekking

Na het toepassen van deze eenvoudige wijzigingen, heeft mijn vork van de Plaid-app nu meer opvallende en functionele typografie getrokken uit de bibliotheek van Google met gratis, open-source lettertypen. Met de nieuwe functie Downloadbare lettertypen van Android kunt u alles in de map Google Fonts gebruiken om de typografie in uw app aan te passen. Zoals u in deze zelfstudie hebt gezien, kunnen slechts enkele wijzigingen een echt verschil maken in leesbaarheid en gebruikerservaring. We zijn verheugd om te zien wat je doet!