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