Aplikację zoo san diego można
pobrać z google play - w telefonie, w aplikacji Sklep play należy
odszukać aplikacji San Diego Zoo, link do aplikacji
https://play.google.com/store/apps/details?id=com.mobileroadie.app_1901
Przykład grafik przygotowanych jako .9.png też przesyłam w
załączniku (plik backgroud_shadow_46_46.9.png oraz
backgroud_shadow2_46_46.9.png)
Niestety nie znalazłem żadnej wtyczki do Photoshopa typowo do
9.png., sugeruję przygotowanie takiej grafiki w dowolnym programie
graficznym (może być to photoshop) z ustawieniem marginesów o
szerokości 1px z każdej strony. Następnie czarnym
punktem/punktami/kreską/kreskami na tym marginesie oznacza się
obszar, który będzie rozciągany. Obszar rozciągany horyzontalnie
zaznacza się punktem/punktami/kreską/kreskami na górnej krawędzi,
rozciągany wertykalnie oznacza się na lewej krawędzi. Dolna i
prawa krawędź służą do określania obszaru, w którym wstawiany może
być kontent. My rozwiążemy to w kodach, poprzez ustawienie
odpowiedniego padding, dlatego prawy i dolny obszar o szerokości
1px prosiłbym o wypełnienie w całości czarną kreską.
Grafika musi zostać zapisana w formacie png. Nazwa powinna kończyć
się na .9.png (czyli pełna nazwa pliku powinna wyglądać np. tak
obraz.9.png).
Używanie przeźroczystości jest jak najbardziej wskazane, tam gdzie
będzie to pasowało do całości layoutu.
Pod tym linkiem
http://www.roundrect.kr/en/desktop/better-9-patch/#Download
Można pobrać aplikację, przy pomocy której można podejrzeć jak
będzie zachowywała się dana grafika 9.png w przypadku rozciąganie
jej. W ten sposób można skontrolować, czy rozciąganie odbywa się
tak, jak zostało to założone. Gdybyście mieli problem z tą
aplikacją to dajcie znać, wpadnę do Was i pomogę z jej obsługą.
Pod tym linkiem
http://jgilfelt.github.io/android-actionbarstylegenerator/#name=smartzoo&compat=sherlock&theme=light&actionbarstyle=solid
Można przygotować schemat kolorów, którym dekorowany jest
actionbar (górna belka aplikacji) + zakładki (pod górną belką
aplikacji) + niektóre inne elementy nawigacyjne.
Wartości, których nie można zmieniać to:
Style name: smartzoo
Style compatibility: Sherlock
Base theme: Light
Każda zmiana poszczególnego koloru jest od razu widoczna na
przykładowym ekranie po prawej stronie. Po ustaleniu odpowiedniego
zestawu kolorów przyciskiem Download .Zip (poniżej) możecie pobrać
zipa, którego następnie prześlijcie nam - dzięki temu
zaoszczędzimy sporo czasu.
Poniżej opis rzeczy do zrealizowania, podzielonych na te z niższym
i wyższym priorytetem + wskazanie na jakich screenshotach
aplikacji można odnaleźć dany element.
Część pierwsza (najwyższy priorytet)
1. Projekt Menu Głównego (mainmenu.png) - cechy:
9 elementów menu przenoszących do odpowiednich funkcji
aplikacji (poniższy opis załączam, żebyście mieli obraz co się
dzieje pod danym elementem menu):
- Tryb AR (rozszerzona rzeczywistość - nakładanie obrazów
na obraz z kamery - bardzo ważny punkt aplikacji)
- Mapa Zoo (interaktywna mapa - bardzo ważny punkt
aplikacji)
- Katalog zwierząt (lista ze zwierzętami)
- Wyznacz trasę (wyznaczanie trasy pomiędzy dwoma punktami
w Zoo i wyświetlanie jej na mapie)
- Informacje (bieżące informacje z zoo + informacje z
kanału twitter)
- Trasy (lista predefiniowanych tras dla zwiedzających,
np. zagrożone gatunki - trasa obejmująca zagrożone gatunki
znajdujące się w Zoo)
- O Zoo (informacje o zoo typu cennik, godziny otwarcia,
historia zoo)
- Ustawienia (ustawienia aplikacji)
- O aplikacji (informacje o samej aplikacji, jej funkcjach
itp.)
Możecie założyć, że w menu można wykorzystać galerię zmieniających
się zdjęć zwierząt.
2. Background aplikacji - grafika png (nie musi być 9.png) w
rozdzielczości np. 1280x720 - w razie potrzeby będziemy ją
resize'ować. Tu może jakiejś inspiracji dostarczy Wam aplikacja
sandiego zoo. Generalnie ten background moglibyśmy użyć jako tło
pod listami itp. o ile lista (elementy listy) będzie miała
ustawioną przeźroczystość.
3. Element listy złożony (informacje.png, twitter.png, ozoo.png) -
obecnie używane background (widoczny na screenshotach) to 9.png z
załącznika (backgroud_shadow_46_46.9.png):
Tak będą wyglądały elementy listy, w które pakujemy więcej
treści
4. Element listy prosty + element grupujący (katalogzwierzat.png):
Na screenshocie elementem grupującym jest ten niebieski, a
prostym elementem listy jest ten zupełnie przeźroczysty, spod
którego przebija żółto gradientowe tło.
Elementy listy, w których jest mało treści - tak jak w
katalogu zwierząt
Część druga (niższy priorytet, ale też wysoki)
5. Paleta kolorów dla actionbara i innych elementów nawigacyjnych
(opis jak przygotować znajduje się wyżej):
Jest to widoczne na każdym screenshocie. Są to górna zielona
belka i pomorańczowe zakładki poniżej belki (np. na screenshocie
ozoo.png), dolna belka z przyciskami kontekstowymi (np. na
screenshocie opiszwierzecia.png)
6. Radar wyświetlany w trybie AR (ar.png):
Pomarańczowy element w lewym górnym rogu. Przede wszystkim
chodzi o zwiększenie kontrastu, wyróżnienie wycinka koła
przedstawiającego horyzont widoczności kamery (górny wycinek koła)
i przygotowanie grafiki wskazującej północ.
7. Background przycisków (opiszwierzecia.png):
na screenshotcie jest to ten zielony przycisk Więcej
8. Ikona pojawiająca się w przypadku braku dowolnej grafiki
(katalogzwierzat.png):
Tu chodzi o ikonę pojawiającą się w miejscu gdzie powinno być
zdjęcie, a go nie ma. Na screenshocie jest to grafika na lewo od
np. żółwia, kozy czy świnki wietnamskiej
--
Piotr Spyra,
Poznan Supercomputing and Networking Center
phone: (+48 61) 858 20 73
e-mail: pspyra@man.poznan.pl