pondělí, 25. července 2011 | 18:30
Následující článek napsal Tomáš Zvěřina z Multimedia ateliéru. Možná si pamatujete jeho předchozí dva články na tomto blogu, také o Androidu. — Filip Hráček
Vaše aplikace musí dobře vypadat. Pokud nemáte zkušenosti, talent a vkus, tak se Vám toho nepodaří docílit. Najděte si grafika, který Vám s designem pomůže. Asi Vám nebudu radit, abyste si najali i user-experience odborníka - jednak nerostou na stromech a jednak máte přeci jen určitou šanci, že ho společnými silami ve spolupráci s designérem zastoupíte. Všechno co se tu dál dočtete, platí ovšem i pro návrh UI/UX.
Tak především - není to nic těžkého. Vývojář má neomezené možnosti jak prvky na obrazovce pozicovat, překrývat je přes sebe apod. V podstatě můžete vycházet z toho, že existují dva druhy komponent - panely (Layouts) a ovládací prvky (Widgets). Panel je jenom kontejner na ovládací prvky, ovládací prvky jsou tlačítka, select-boxy, textová pole apod. Každý widget lze obarvit a kompletně předesignovat. Každému panelu lze dát nějaké pozadí (velký obrázek, dlaždice, barva, gradient) a panely lze neomezeně nořit do sebe (ok, ne neomezeně, ale stačit by to mělo). Nejlepší bude obrázek:
Pozn.: Notifikační lištu a titulek okna lze v případě potřeby schovat. Z možných widgetů mě napadají především:
- Button (má nějaké pozadí, které definuje jeho buttonový vzhled, text a může mít ikonku - vpravo/vlevo)
- ImageButton (opět buttonové pozadí a centrální ikona)
- EditText (vstupní pole pro text)
- Spinner (select, combo ...)
- CheckBox
- ListView (seznam položek, tady se můžete vyřádit libovolně, každý řádek v seznamu lze nadesignovat libovolně složitě, viz. např. GMail aplikace)
- ProgressBar ("šoupátko" od-do)
- Dialog
- atp: http://developer.android.com/resources/tutorials/views/index.html, přehled hlavních widgetů a jejoch vzhledu najdete také v závěru této kapitoly
Specialitou je tzv. Toast. Krátká zpráva, která se objeví na obrazovce a sama po krátké chvíli zmizí. Pokud například chcete uživatele uklidnit, že jsou jeho data uložená, Toast je na to ideální. Defaultní vzhled je poněkud ponurý, ale Toast je možné libovolně odesignovat:
http://developer.android.com/guide/topics/ui/notifiers/toasts.html#CustomToastView
Úskalí designu pro Android
Různé velikosti obrazovek
V současné době se nejvíce vyskytují tyto tři šířky obrazovky telefonu: 240px, 320px, 480px. Jak se k tomu postavit:
- deklarovat, že danou velikost obrazovky nebudete podporovat (viz: http://developer.android.com/guide/topics/manifest/supports-screens-element.html)
- ignorovat a doufat, že to nějak vyjde (ono to ale nejspíš nevyjde)
- deklarovat, že vaše aplikace běží nad SDK verze 3 nebo méně (tj. Android 1.5, viz: http://developer.android.com/guide/topics/manifest/uses-sdk-element.html). Tím docílíte toho, že se novější zařízení budou snažit emulovat rozlišení 320x480, které Vaše (zjevně zastaralá) aplikace pravděpodobně očekává. To sice funguje, ale na nový telefonech bude vaše aplikace poněkud ... hnusná a kostičková. Kromě toho se ochudíte o novinky v API od verze 1.6 včetně.
- nadesignovat aplikaci pro různé obrazovky - což obnáší udělat každou bitmapu ve více verzích, podle toho, kolik různých velikostí obrazovky budete podporovat
Přehled smysluplných kombinací velikostí a screen density různých zařízení najdete zde:
http://developer.android.com/guide/practices/screens_support.html#screens-table
Strašidelné, že? Developer má v zásadě dvě možnosti jak určit, který design patří ke které velikosti. Buď pomocí screen density (ldpi, mdpi a hdpi - low, medium a high) nebo pomocí velikosti obrazovky (small, normal, large, x-large). Když se ale podíváme, jaká zařízení jsou nejběžnější, trochu se nám to zjednoduší:
http://developer.android.com/resources/dashboard/screens.html
Nejčastěji tedy narazíte na telefon s velkou obrazovkou (G1, Galaxy S, Milestone, ...) a rozlišením 320x480 nebo 480x800 nebo 480x854. Poslední jmenované patří Motorola Milestone, proč potřebovali dalších 54px - to se mě neptejte. Zacílit design přesně na 800px nebo 854px se Vám ale napodaří, počítejte tedy s tím, že design musí být vůči takovému "natažení" tolerantní.
Doufám, že je zřejmé, že udělat design jako jeden veliký obrázek, který umístíte na celou obrazovku není nejštastnější řešení. Ano, něco na pozadí dejte, ale část GUI ukotvěte k hornímu okraji, část k dolnímu apod. Jednotlivé části se musí vyrovnat s tím, že se vůči sobě budou posunovat. Určete, která komponenta má držet svoje rozměry a která má vyplnit "nečekaný" prázdný prostor. Asi nějak takhle:
A nebo úplně jinak, to je na Vás. (Mimochodem, výše popsané chování docílíte použitím atributu laytout_weight u komponent umístěných v LinearLayout:
http://developer.android.com/resources/tutorials/views/hello-linearlayout.html).
Různá orientace obrazovky telefonu
Rozměry tedy máme, to nejhorší nás ale teprve čeká. Drtivá většina telefonů totiž mění orientaci obrazovky podle orientace telefonu, tj. portrait a landscape. Pokud otočíme náš příklad do landscape, zjistíme, že diky našemu velkorysému OK panelu se třetí textové pole nevešlo na obrazovku.
Vy ale máte možnost zamyslet se nad úplně jiným rozložením prvků na obrazovce. Pro landscape může být všechno úplně jinak:
NinePatch
Příjemnou Android specialitou je NinePatch. Mechanizmus, který vám umožní vytvořit překrásné stínované Web 2.0 tlačítko, které lze libovolně roztahovat a přitom se jeho okraje nezdeformují. Když vezmu malé tlačítko:
A prostě ho zvětším (například na něj potřebuju napsat delší text), dopadne to špatně:
Tlačítko se zvětší, ale je ošklivé. My bychom chtěli, aby se zůstaly zachovány rohy a okraje a zvětšování probíhalo pouze na vnitřní ploše. Např. v HTML se toho dociluje poměrně obtížně, několika vnořenými DIVy - děs. V Androidu máte možnost obrázek ve speciálním nástroji doplnit o informaci kde se smí "natahovat". Nástroj draw9patch je součástí SDK:
http://developer.android.com/guide/developing/tools/draw9patch.html. Výsledek pak vypadá přesně tak, jak potřebujete a je to prakticky bez práce.
Proč se to jmenuje nine patch? Protože se tímto postupem obrázek rozdělí na 9 částí. Prostřední se natahuje do všech stran, rohy se nemění nikdy a nijak, okraje se natahují jen v jednom směru. Po designerovi se tedy chce, aby na tuto "elasticitu myslel". Uvedu několik příkladů, které nebudou fungovat:
Na uvedených návrzích není možné najít nějakou centrální oblast, která by se mohla pružně natahovat bez toho, že by došlo k nežádoucímu zkreslení. Takovéhle tlačítko můžete navrhnout pouze v případě, že víte na pixel přesně jeho finální velikost (typicky v případě, kdy je tlačítko "unikátní" a i text tlačítka je na něm vyrenderován - to se pak ovšem špatně lokalizuje).
Vektorová grafika
Spoustu práce si ušetříte, pokud využijete možností, které Android poskytuje pro kreslení vektorové grafiky. Není toho moc, ale je to za málo peněz hodně muziky. Cokoliv, co byste chtěli vyjádřit obrázkem, můžete vyjádřit skromným vektorovým popisem. Skromným proto, že můžete v podstatě nakreslit pouze obdélník :-) To je toto:
Abych nepřeháněl, lze nakreslit ještě ovál, čáru a kolečko, ale obdélník použijete nejspíš. O takovém obdélníku pak můžete říci:
- jakou barvou a jak silně má být nakreslená obvodová čára
- jak má být vyplněná plocha
- barva
- lineární gradient (lze naklonit, ale pouze o násobky 45°, lze uvést barvu na začátku, na konci a uprostřed)
- radiální gradient (lze upřesnit kde má ležet střed - procenta výšky a šířky)
- jaký poloměr mají mít rohy (pokud jsou kulaté)
- jaký má být "padding", kolik místa se má nechat po stranách
Výhoda spočívá v tom, že se tyto tvary snadno definují, aplikují, rychle vykreslují a snadno lze aplikaci "skinovat", pouze se někde v konstantách vymění barva a voilá - celá aplikace je jinak barevná. Optimalní na tlačítka, inputy, panely apod ... V zásadě je tedy potřeba programátorovi definovat barvy, tlušťku pera atd - viz výše a on daný prvek nakonfiguruje. Případně si pak spolu sednout u jednoho počítače a finání podobu v pár iteracích odladit.Více viz:
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Texty, fonty, velikosti
Součástí designu by měla být i volba fontů, velikosti písma, apod. Vývojář může použít libovolný TrueType font (možná i jiné, dokumentace v tom směru není moc dobrá):
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Typefaces.html a také:
http://developer.android.com/reference/android/widget/TextView.html#setTypeface(android.graphics.Typeface). Moc pohodlné to ale není.
Každý nápis může vrhat stín, o kterém můžete specifikovat "dx", "dy", poloměr a barvu, což může v některých případech zlepšit čitelnost textu, např. pokud Vás okolnosti nutí psát na nějaké divočejší pozadí.
Velikosti lze udávat v pixelech, ale i v absolutních jednotkách typu milimetr nebo pt. Měly byste ale počítat také s tím, že si mohl uživatel centrálně nastavit větší písmo než je výchozí velikost - třeba se mu nechce lovit každou chvíli brýle.
Stavy widgetů
Pokud se rozhodnete přestylovat výchozí vzhled ovládacích prvků telefonu, nezapomeňte, že musíte nastylovat i nejrůznější stavy těchto prvků, alespoň tyto: normální, prvek je zvolený, má focus, je "selected", je disabled. A protože jsem dobrák, ukážu Vám, jak tyto prvky vypadají na různých telefonech. Všimněte si například, jak otřesně vypadá nezaškrtnutý checkbox na telefonu Samsung Galaxy S - daleko spíš to připomíná stav "disabled" (#fail).
Animace
A poslední věcí, nad kterou byste se měli zamyslet, jsou animace. Dneska se všechno hýbá sem a tam, uživatel je spokojený jaký má mocný přístroj a ukazuje to kamarádům. Velice snadno lze spustit "přijetí" a "odjetí", otáčení, fade-out, fade-in apod. Pokud chcete aplikaci trochu oživit (hlavně tím prosím nezdržujte uživatele), máte možnost.
Tomáš Zvěřina
Multimedia atelier