W poniedziałek podejdę do Was z komputerem i zainstaluję Wam aplikację bezpośrednio na wszystkich urządzeniach a z androidem, jakimi dysponujecie. 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
