2. díl – Různé density a rozlišení Android zařízení

Nezávislé Android novinky na WhatsAppu. Stačí kliknout a odebírat

reklama

Rozhodl jsem se, že článek o historii GUI Android vynechám. Důvodem je to, že se mi nepodařilo získat dostatek informací (a nemám ani dostatek zkušeností), které bych mohl někomu předat. Původně jsem tento článek promýšlel tak, že si uděláme výlet do minulosti a projdeme několik vývojových etap v grafice u Androidu. Ale upustil jsem od toho a budu raději soustředit svůj čas a energii na články ze současnosti. Druhý článek ze seriálu bude o tvorbě grafiky na různá zařízení. V první části článku se podíváme na suchou teorii a pak přejdeme do praxe.

Jsi fanda do technologií? Umíš psát? Staň se redaktorem Svět Androida!

reklama

Obecná teorie různorodosti grafiky na Android OS

Nejprve je potřeba říct podstatnou – charakterizující věc pro OS Android a to je jeho otevřenost, díky které tento systém využívají různí výrobci mobilních zařízení a implementují ho na své produkty. Co to znamená? Stovky zařízení o různých velikostí displaye, rozlišení, hustotě a také “technologii dotyku” (kapacitní vs. rezistivní display). A to není vše. OS Android je v různých verzích, u kterých se může lišit třeba velikost některých nativních prvků, které nám můžou totálně rozhodit ostatní grafické prvky. Další faktor, který vstupuje do té různorodosti je režim zobrazení (já mu říkám režim orientace) portrait a landscape (na výšku nebo na šířku zařízení). A poslední je výbava mobilního zařízení. Představte si aplikaci, která využívá fotoaparát, kterou nainstalujete na zařízení bez fotoaparátu. Graficky je možné místo tlačítka “vyfotit” zobrazit tlačítko “zařízení nedisponuje fotoaparátem”, limitující může být třeba i HW klávesnice atd. Je to pěkná směsice, pojďme si udělat přehled:

1. Šířka displaye ovlivňuje velikost zobrazovací plochy pro grafiku
2. Rozlišení a fyzická hustota pixelů ovlivňuje velikost grafických prvků
3. Technologie dotyku může ovlivnit velikost a umístění některých prvků
4. Verze OS Android ovlivňuje velikost a vzhled nativních prvků
5. Režim orientace ovlivňuje počet velikostí jednotlivých prvků
6. Výbava zařízení ovlivňuje použitelnost a tedy výskyt grafických prvků

Všechny tyhle faktory musíme při tvorbě grafiky brát do úvahy, protože zásadně ovlivňují uživatelské rozhraní aplikace. Vývojář (programátor) může v kódu aplikaci omezit (deklarovat), na jaká zařízení bude možné aplikaci instalovat. Před přípravou grafiky je nezbytné získat (třeba od zadavatele nebo vývojáře) informaci o tom, pro jaké režimy a zařízení bude aplikace funkční. Tyto faktury ovlivňují  způsob přípravy grafiky, ale i potřebný čas (a tedy i finance) kladené na designéra. Nebudu zde rozepisovat, jak je důležité přemýšlet při návrhu UI nějaké aplikace, třeba nad tím, zda bude mít landscape režim, to by bylo na samostatný článek. Navíc tohoto tématu se trošku dotkneme v článku o návrhu skic aplikace. Teď to pro nás nebude podstatné.

Tohle jsou nejlepší aplikace a hry na Google Play roku 2024. Souhlasíte s výběrem?

Zprávičky Adam Kurfürst

Verze OS Android

Toto je klíčová informace, kterou je potřeba pro budoucí aplikaci vědět. Podívejte se na graf, který je z dubna 2011.

Tvorbu grafiky budu popisovat pro verzi Android 1.6 a vyšší. Za poslední měsíc maximálně přibylo uživatelů na straně Android 3.0 (nově 3.1) a také 2.2 a 2.3.3. Verze 1.6 a nižší určitě oslabila. Verze 1.5 a nižší má při vývoji limitující možnosti. V případě, že budete mít potřebu dělat grafiku pro takto nízkou verzi OS nebo by měla být aplikace kompatibilní  mrkněte se do oficiální příručky https://developer.android.com/guide/practices/screens-support-1.5.html a komunikujte s vývojářem na použití grafiky pro tyto nízké verze. Já se jim vyhnu.

Obecné velikosti a rozlišení obrazovky

Je téměř nemožné vytvářet grafiku pro konkrétní zařízení, protože by to bylo úmorná a nekončící práce. Proto byly vytvořené 4 kategorie hustoty a velikosti. Jedná se v podstatě o takové rozsahy, do kterých následně spadají jednotlivá zařízení. To znamená, že zařízení zobrazí grafické prvky ze své skupiny. Podívejte se na následující obrázky:

Rozměry displaye:

• Small (2-3 palců)

• Normal (3-5 palců)

• Large (4-7 palců)

• Xlarge (7-10 palců)

Rozlišení (hustota) displaye:

• ldpi (100-120 dpi)

• mdpi (120-160 dpi)

• hdpi (160-240 dpi)

• xhdpi (240-320 dpi)

Praxe při tvorbě grafiky pro jednotlivá rozlišení

Máme za sebou nudnou teorii. Ale Vás určitě nejvíc  zajímá, jak se taková grafika v praxi tvoří. Pokud víme, že aplikace musí fungovat na “všech” mobilních zařízení typu smartphone. Tedy zařízení řádově s rozlišeními displaye: 480×800, 320×480, 240×320. Budeme muset vytvořit grafiku v těchto třech rozlišeních. Na scénu přichází zařízení HTC Sensation, které má rozlišení 540x960px, takže bude otázka, zda již designeři začnou připravovat extra grafiku pro toto rozlišení nebo se grafika bude roztahovat, to uvidíme. Každopádně za všech okolností, vždy začínejte kreslit jednotlivé prvky v největším rozlišení, ve kterém je budete potřebovat. V našem případě HDPI = 480x800px (případně 480×854). Řekněme, že potřebujeme nakreslit tlačítko, které bude mít v tomto rozlišení 100x100px. Jakou velikost bude mít pro MDPI a LDPI? Používá se jednoduchý vzoreček. Základ se bere jako MDPI a poté se počítá HDPI (x1,5) a LDPI (x0,75). Pro názornost naše tlačítko 100x100px bude mít pro MDPI = 66x66px a LDPI 50x50px. Pokud při dělení vyjde necelé číslo, je jedno zda zaokouhlíte nahoru nebo dolů. Důležité je se rozhodnout v daném projektu a dělat to všude stejně, aby Vás nepřekvapilo, že grafika pro nestlačené tlačítko má 66x66px a pro stlačený stav pak 67x67px. Podívejte se na následující obrázek, kde je Android apliakce Gmail ve třech rozlišeních. Té grafiky tu není moc, ale zaměřte svou pozornost na ikonku hvězdy, jak se mění její velikost dle rozlišení.

Android novinky na Redditu. Klikni a sleduj!

reklama

To jak se grafika řeže a strukturuje pro Android aplikaci bude náplní jiného článku. Takže to tu opět utnu :).

Zdroje pro tvorbu grafiky

V poslední části se v rychlosti podíváme na některé zdroje, které sám využívám při tvorbě grafiky na OS Android a myslím si, že pro Vás budou také užitečné. První je oficiální DevGuide od Googlu https://developer.android.com/guide/index.html. Odkud jsem čerpal třeba obrázky o densitách atd.

Další výborný zdroj pro grafika jsou dvě příručky: Mutual mobile – Android Design Guidelines 1.1, a Kyle Stewart – Android HIG, kde jsou i další informace, které postupně budeme probírat v následujících článcích.

A nakonec Vám předám jedno PSD, kde najdete jedno zařízení od HTC ve velkém rozlišení. Layout screenu má přesně 480x800px (HDPI), takže je iedální pro start při tvorbě grafiky pro nějakou aplikaci. Navíc je skvělý pro případnou prezentaci designu aplikace.

Těch zdrojů mám více, ale na to se podíváme až příště.

Takže se těšte :-)

Autorem článku je Michal Feltl