Android-udviklerens vejledning til bedre typografi

...

Typografi kan gøre en stor forskel i en apps tiltrækningskraft og anvendelighed, og nu kan Android-udviklere bruge skrifttyper fra Google Fonts katalog. Det er enkelt, effektivt og åbner en række nye typografiske indstillinger.

Enhver udvikler ved, at design spiller en stor rolle i brugeroplevelsen - det kan være en kritisk faktor i succes eller fiasko af din app. Der er stadig altid fristelsen til at bruge standardskrifttyper, uanset om man skal gå videre med en udgivelse, for at undgå kompleksiteten ved at integrere brugerdefinerede skrifttyper eller bare for at undgå den tilsyneladende arkane kunst ved typevalg.

Heldigvis har Android Studio gjort det lettere at opbygge en app med karakteristisk typografi ved hjælp af den nye "Downloadbare skrifttyper" -funktion. Denne funktion sætter det komplette Google Font-katalog lige ved hånden og gør det let at tilpasse typografi på JellyBean og senere (SDK-niveau 16+) med gratis, pålidelige Google-skrifttyper i høj kvalitet.

Ud over æstetiske forbedringer kan brug af downloadbare skrifttyper også reducere den samlede størrelse af APK-filer og reducere hukommelsesforbruget, fordi downloadede skrifttyper deles mellem alle applikationer. Din APK vil være mindre, fordi den ikke behøver at bundtage skrifterne på forhånd. Når en skrifttype er hentet fra Google-skrifttyper til en app, holder Android den på disken, så andre apps også kan bruge den uden yderligere lagerplads. Ligesom vores web-API, der serverer skrifttyper direkte til websteder, jo mere folk bruger Google-skrifttyper, jo større er latensgevinsten ved deling.

I denne selvstudie forbedrer vi typografien af ​​en eksempelprogram ved at skifte standardskrifttype til noget med et mere markant og dynamisk interval af stilarter fra Google Fonts katalog. Vi bruger et skrifttype kaldet Alegreya, der er kendt som en "superfamilie", fordi det tilbyder en bred vifte af stilarter, vægte og varianter. Brug af en superfamilie betyder, at vi har masser af typografiske muligheder for at finjustere udseendet på vores interface.

Den app, vi arbejder med, er Plaid, af Nick Butcher, som er et rullbart foder af materialedesignrelaterede nyhedsartikler. Disse præsenteres som fuldblæste fliser, som du kan trykke på eller klikke for at udvide til en 'driblings' side med favorisering og statistik for 'likes' og 'visninger'.

Denne tutorial er beregnet til udviklere, men den forklarer også nogle af ”hvorfor” -beslutningerne bag designet, så hold fast på begge hatte!

Før vi kommer i gang

Installer Android Studio 3.0, klon derefter "Plaid" -projektet fra Github og kassen b76937, den version, vi bruger til denne tutorial:

git klon https://github.com/rsheeter/plaid.git;
cd plaid;
git checkout b76937;

Åbn nu projektet i Android Studio 3.0.

For at bruge Google Fonts-udbyderen skal du have Google Play Services version 12+ installeret. Hvis du arbejder med en enhed, der er konfigureret til at modtage opdateringer, kan du springe videre; men hvis du bruger en emulator, der er lanceret via Android Studio, bruger den muligvis en ældre version af Google Play Services. Følg disse trin for at opdatere den virtuelle Android-enhed fra Android Studio.

1. Opret en virtuel enhed (Værktøjer> Android> AVD Manager) med Play Store, angivet med ikonet i kolonnen Play Butik:

2. Start en virtuel enhed i Android Studio. For at åbne "Udvidede kontroller" til højre på emulatorskærmen skal du trykke på eller klikke på det sidste ... -ikon i bunden af ​​det lodrette knappanel:

3. Vælg Google Play, og kontroller versionnummeret. Hvis du kører 11.2 eller lavere, skal du trykke på eller klikke på knappen Opdater. Dette skal tage dig til Play Store, hvor du derefter skal trykke på eller klikke på den grønne opdateringsknap:

4. Nu, hvor du har opdateret til version 11.2 eller nyere, understøtter enheden downloadbare skrifttyper.

Opdater om siden

Lad os først opdatere siden Om. "Kropstekst" -afsnittet i den nedre halvdel af siden er i øjeblikket indstillet i Roboto Regular, en sans font, mens titlen (i øverste halvdel) er indstillet i Roboto Mono Regular. Lad os skifte til serif-skrifttypen Alegreya, et energisk, moderne design med en dynamisk og varieret rytme inspireret af kalligrafiske bogstaver. Systemet Alegreya er en "superfamilie", der oprindeligt var beregnet til litteratur, og inkluderer serif- og sans-serif-søsterfamilier.

Titelteksten fungerer som et ”heltebillede”, en stor grafik, der fører folk ind på siden og sætter en følelsesladet tone. Dette bruger titlens bogstaver som en "maske", der skærer den myntgrønne forgrund ud, så et billede kan kigge bagfra. Skift fra Roboto Mono Regular til Alegreya Black giver et større overfladeareal, så billedet kan skinne igennem.

Stil teksten "Om aktivitet"

Da teksten "Om aktivitet" i øjeblikket kræver "standard" -tekststil, Roboto Regular, bliver vi nødt til at indstille en anden manuelt:

  1. Åbn app / src / main / res / layout / about_plaid.xml
  2. Vælg fanen Design
  3. Åbn om_beskrivelse i panelet Komponenttræ
  4. I panelet Attributter skal du åbne rullemenuen fontFamily og vælge Flere skrifter ... (Du skal muligvis klikke på Vis alle attributter for at se fontFamily)
  5. Vælg familie Alegreya
  6. Vælg stil Regelmæssig
Følg trin 1–6 for at style teksten “Om aktivitet”

Android Studio har konfigureret vores app til at hente skrifttypen fra udbyderen af ​​Google-skrifttyper. For at gøre det foretagede den en række ændringer i vores kildetræ:

app / src / main / res / font / (lære mere)
Denne nye mappe indeholder XML-filer, der beskriver fontressourcer. I dette tilfælde giver det instruktioner til indlæsning af et skrifttype fra Google Font-udbyder.

app / src / main / res / Values ​​/ font_certs.xml (lære mere)
For at sikre, at skrifttypeanmodninger kun besvares af betroede parter, specificerer denne fil underskrift af fontudbyderen.

app / src / main / res / Values ​​/ preloaded_fonts.xml (lære mere)
Dette er en liste over skrifttyper, der skal indlæses tidligt i programstart. Rettet 4/12/2018; tidligere angivet fejlagtigt disse skrifttyper indlæses på installationstidspunktet.

app / src / main / AndroidManifest.xml: :
Dette er en liste over skrifttyper, som Google Fonts-udbyder vil prøve at indlæse på appinstallations (eller opdatering) tid.

Du kan se en sample diff for dette trin i commit a1e711c.

Opdater udskrivningstekstvisningen

Tekststilen er i øjeblikket Roboto Mono Regular. Lad os ændre det ved at fortsætte, hvor vi slap i det forrige trin:

7. I designvisningen skal du vælge “CutoutTextView”

8. Åbn rullemenuen "fontFamily", og vælg "Flere skrifttyper ..."

9. Vælg familie “Alegreya”

10. Vælg stil "Sort"

11. (Se trin 11 nedenfor)

Følg trin 7–11 for at opdatere CutoutTextView

Hvis du prøvede dette lige nu, ville skrifttypen stadig være Roboto Regular, ikke Alegreya Black. Årsagen er, at deklarative skrifttyper hentes asynkront som standard (lære mere.) Efter færdiggørelse forsøger systemet at opdatere skrifttypen til en TextView ved hjælp af setTypeface, men dette vil mislykkes, fordi CutoutTextView ikke udvider TextView.

CutoutTextView implementerer dog egenskapen fontFamily (her). Hvis vi markerer font hent som blokerende, vil fontFamily være klar, når vi beder om den. Hvis vi ikke markerer det som blokerende, vil den returnerede værdi for fontFamily ikke være brugbar endnu. (Vi kunne også kode async hente os selv, men lad os gemme det til senere.)

11. Åbn app / src / main / res / font / alegreya.xml og alegreya-black.xml, og tilføj derefter denne attribut til slutningen af ​​ -elementerne:

app: fontProviderFetchStrategy =”blokering”

Prøv det nu! (Du kan se en sample diff for dette trin ved commit f1c997)

Opdater tekststørrelse

Se på teksten "Om". Den er grå på en lidt lysere grå baggrund. Alegreya er en serif-skrifttype med høj ‘slagmodulering’, hvilket betyder, at dens bogstaver varierer meget fra deres tykeste til deres tyndeste punkter. Noget modsat, fører dette til lavere visuel kontrast generelt. Fine variationer i en bogstavform kan få den til at se sløret ud, især i små størrelser.

Lad os øge tekststørrelsen på afsnittet fra 16 sp til 18 sp for at afhjælpe dette problem. Dette vil øge den tilsyneladende kontrast for teksten på baggrund af den.

TextView til about_plaid.xml bruger en stil kaldet TextAppearance. About. For at ændre tekststørrelsen fra 16sp til 18sp skal du redigere dette afsnit af app / src / main / res / Values ​​/ styles.xml:

Du kan se en diff-diff for dette trin på github.com/rsheeter/plaid/commit/4dda25

Opdater appens titel

Dernæst ændrer vi titlen på vores app ved at hente en skrifttype programmatisk. Titlen er i øjeblikket indstillet i Roboto med OpenType “small caps” -funktionen anvendt. Vi har også brugt ekstra 'tracking' til at placere bogstaverne.

(Denne detalje er udlånt fra en konvention af bokkypografi, hvor kapiteltitler ofte udskrives i små kasketter langs toppen af ​​siderne. For at lære mere om typografi skal du tjekke bogen Shaping Text af Jan Middendorp.)

Async-hentning mislykkes, fordi værktøjslinjen ikke er en TextView, ligesom CutoutTextView ikke er. Værktøjslinjen implementerer heller ikke egenskaben fontFamily, så vi kan ikke bare indstille blokeringen til at rette den.

Lad os i stedet prøve at hente og tildele skrifttypen programmatisk. Inapp / src / main / java / io / plaidapp / ui / HomeActivity.java brug FontsContractCompat (reference) til at anmode om skrifttypen ved at følge disse fire trin.

1. Vi har brug for en tråd for at vente på ankomsten af ​​skrifttypen. Angiv en variabel til at holde den:

privat Handler fontHandler;

2. Tilføj en metode til at administrere fonthåndteringstråden:

3. Tilføj en metode til at anvende et skrifttype (reference) på værktøjslinjen:

4. I onCreate skal du starte en async-hentning fra fontudbyderen:

Skift til Alegreya Sans SC Black

Gennemgang af hovedsiden, bemærk at titlen ser lidt for tynd ud. Ligesom mange serif-skrifttyper fører Alegreya's meget modulerede streger til lavere visuel kontrast, især når man sammenligner det gennemsnitlige sans-serif.

Heldigvis er Alegreya en "superfamilie" med både serif og sans sorter i en række vægte. Parring af disse to skrifttyper og anvendelse af forskellige vægte kan give struktur til en grænseflade, hvorved UI afgrænses fra indholdet. Lad os prøve Alegreya Sans Small Caps (SC.)

Den lille cap variant af Alegreya er i sagens natur mindre, men vi kan korrigere for dette ved at øge dens vægt. Lad os prøve den sorte (900) vægt.

  1. Kopier res / font / alegreya.xml for at oprette res / font / font / alegreya_sans_sc_black.xml
  2. Rediger alegreya_sans_sc_black.xml for at ændre app: fontProviderQuery til name = Alegreya Sans SC & vægt = 900
  3. Rediger res / Values ​​/ preloaded_fonts.xml for at tilføje den nye skrifttype:

4. Angiv den nye forespørgsel i HomeActivity.java:

Skift Alegreya Sort til Fed

Se igen på titlen på hovedsiden

Den sorte vægt er lidt for stærk her, så lad os ringe den ned til Fed (700.)

  1. Omdøb alegreya_sans_sc_black.xml til alegreya_sans_sc_bold.xml og rediger for at ændre app: fontProviderQuery til name = Alegreya Sans SC & vægt = 700
  2. Opdater forespørgslen i HomeActivity.java:

Du kan se en eksempeldiff for den endelige tilstand af appen (ved hjælp af Alegreya Sans SC Bold) på commit ac55478. Se, hvordan dit projekt sammenligner.

Opdater Dribble View

For at komme til "driblings" -visningen i appen skal du trykke på eller klikke på et kort på hovedskærmen. Igen, lad os erstatte Roboto Mono Regular med Alegreya Black.

I app / src / main / res / layout / dribbble_shot_title.xml skal du bemærke, at titlen og beskrivelsen er stylet ved hjælp af @ style / TextAppearance.DribbbleShotTitle og @ style / TextAppearance.DribbbleShotDescription. Find disse i app / src / main / res / Values ​​/ styles.xml (tip: Ctrl + Klik.) Skift nu skrifttypen:

Du kan se en sample diff for dette på commit 0e53b56.

Skift numeriske stilarter

Der er kun én ting mere at forbedre på "driblings" -visningen.

Knapperne "lide" og "visninger" bruger det, der kaldes "gammel stil" -tal. Disse er designet til at blandes med små bogstaver med små bogstaver i tekstafsnit. Men på egen hånd ser gamle stilnumre ude af sted, fordi deres efterkommere undertiden hænger under grundlinjen i den anden tekst.

Lad os i stedet bruge lnum-funktionen. Dette fortæller appen at bruge "foring" -tal, som er mere kendte, fordi de er designet til at være i samme højde som store bogstaver. (Lær mere fra vores venner på Typekit)

Når vi ser på app / src / main / res / layout / dribbble_shot_description.xml kan vi se, at tællerne med "lide" og "visninger" er stylet af @ style / Widget.Plaid.InlineActionButton.

Find @ style / Widget.Plaid.InlineActionButton i app / src / main / res / Values ​​/ styles.xml (tip: Ctrl + Klik.)

Tilføj nu en instruktion om at bruge foringsnumre til disse tællere:

Du kan se en sample diff for dette på commit 4dda25.

Konklusion

Efter at have anvendt disse enkle ændringer har min gaffel til Plaid-appen nu mere slående og funktionel typografi trukket fra Googles bibliotek med gratis open source-skrifttyper. Med Android's nye funktion, der kan downloades, kan du bruge alt i Google Font-biblioteket til at tilpasse typografi i din app. Som du har set i denne tutorial, kan kun et par ændringer gøre en reel forskel i læsbarhed og brugeroplevelse. Vi er glade for at se, hvad du gør!