Programowanie aplikacji dla technologii mobilnych mgr inż. Anton Smoliński
Agenda Material Design Material Design dla Androida Pryncypia Material Design Rodzaje Layoutów Kontrolki interakcji Eventy Animacje 2
Material Design 3
Material Design dla Androida Od wersji 5.0 (API 21) Android wspiera Material Design jako główny temat systemu i aplikacji. Android dostarcza takie elementy jak: A new theme New widgets for complex views New APIs for custom shadows and animations Dodatkowo zawiera domyślne palety kolorów, animacje i przejścia między aktywnościami 4
Material Design dla Androida Wprowadzono oś Z przy definiowaniu elementów, dzięki czemu można: Ustawiać cienie (im większa wartość Z, tym większy będzie cień) Przykrywać jedne kontrolki innymi API umożliwiające tworzenie animacji dla: Reakcja na touch Event Pokazywanie i chowanie elementów Zmiana pomiędzy aktywnymi aktywnościami Bardziej naturalne animacje obrotu Animacja zmiany właściwości kontrolki Wykorzystywanie animacji jako elementu drawable 5
Pryncypia Material Design Pryncypia są stworzonymi przez specjalistów UX Google zasadami, leżącymi u podstaw projektowania aplikacji Na fundamencie pryncypiów powinno budować się bardziej specyficzne wytyczne dotyczące konkretnych aplikacji Są stworzone celem dbania o interesy użytkownika końcowego Enchant Me Oczaruj mnie Simplify My Life Uprość mi życie Make Me Amazing Zrób to niesamowicie 6
Pryncypia Material Design Enchant Me Oczaruj mnie Wywołaj u użytkownika zachwyt nietypowymi decyzjami Ładne ekrany, dopracowane animacje, odpowiednie dźwięki tworzą dobry humor. Rzeczywiste obiekty dają więcej satysfakcji, niż przyciski w menu. Pozwól użytkownikowi dotykać obiektów i nimi manipulować jest to bardziej intuicyjne oraz podwyższa emocjonalne spełnienie 7
Pryncypia Material Design Enchant Me Oczaruj mnie Pozwól użytkownikowi na personalizację Ludzie lubią dodawać do interfejsu coś od siebie by czuć się bardziej komfortowo i że wszystko jest pod kontrolą. Prócz zwykłych ustawień dodaj kilka opcji do zabawy. Wykorzystaj użytkownika Dostosowuj aplikację do potrzeb użytkownika zamiast kazać mu za każdym razem wykonywać to samo. Stwórz opcję ostatnio wybranych zachować czy ustawień 8
Pryncypia Material Design Simplify My Life Uprość mi życie Bądź lakoniczny Używaj krótkich, prostych komunikatów Obrazy są odbierane szybciej niż słowa Korzystaj z obrazów i ikon gdyż są efektywniejsze niż słowa Podejmuj decyzje za użytkownika, lecz daj mu ją zatwierdzić Uprość maksymalnie komunikację próbując przewidzieć co chce zrobić użytkownik, jednak ostateczną decyzję pozostaw jemu 9
Pryncypia Material Design Simplify My Life Uprość mi życie Pokazuj tylko to co jest najważniejsze Ludzie nie mogą przetworzyć od razu dużej ilości informacji, przeprowadź więc dekompozycję danych i schowaj te które w danym momencie nie są istotne Użytkownik powinien wiedzieć gdzie się znajduje Użytkownik nie może mieć wrażenia że się zgubił, ekrany powinny różnić się między sobą a animacje wskazywać związek pomiędzy nimi 10
Pryncypia Material Design Simplify My Life Uprość mi życie Nie wolno utracić danych użytkownika Zapisuj dane, na stworzenie których użytkownik poświęcił swój czas Podobne obiekty powinny zachowywać się tak samo Przyzwyczaj użytkownika że jeśli coś tak samo wygląda, działa tak samo Przerywaj użytkownikowi tylko w bardzo ważnych sytuacjach Ludzie nie lubią być odrywani od aktualnych czynności 11
Pryncypia Material Design Make Me Amazing Zrób to niesamowicie Korzystaj ze znanych schematów Ludzie nie czytają instrukcji, tylko próbują sami dojść jak coś działa, wykorzystuj to co już wiedzą Nic nie jest winą użytkownika Nie obwiniaj użytkownika za błędy, lecz pomóż usunąć trudną sytuację Pamiętaj o feedbacku Nawet dla najmniej istotnych elementów aplikacji 12
Pryncypia Material Design Make Me Amazing Zrób to niesamowicie Wykonaj za użytkownika brudną robotę Pozwól nawet amatorom poczuć się jak profesjonalista, w łatwy sposób udostępniaj elementy o których istnieniu użytkownik mógłby w ogóle nie wiedzieć Ważne akcje powinny wykonywać się szybko Nie wszystkie akcje są równie ważne te najważniejsze muszą móc szybko się znajdywać i wykonywać 13
Pryncypia Material Design - PYTANIE Czym jest Material Design? Co wprowadza? 14
Rodzaje Layoutów 15
Rodzaje Layoutów Layout określa wizualną strukturę interfejsu Są przechowywane w plikach XML w zasobach projektu (/res/layout) Parametry poszczególnych elementów są dziedziczone Są ładowane automatycznie Mogą zawierać obiekty, inne layouty lub odwołania 16
Rodzaje Layoutów Linear layout Makieta, gdzie kolejne elementy są ustawiane pod sobą, lub obok siebie. Jeżeli obiektów jest więcej niż dostępnej przestrzeni ekranu, ekran można scrollować Dwa obiekty nie mogą być obok siebie, niezależnie od tego jak szeroki jest wiersz 17
Rodzaje Layoutów Relative layout Poszczególne elementy są pozycjonowane na siebie nawzajem, lub elementu rodzicielskiego Jeden obiekt Relative Layout może zastąpić kilka obiektów Linear Layout 18
Rodzaje Layoutów Web-View Możliwość umieszczenia kodu HTML jako części layoutu Nie ma możliwości przeglądarki tylko wyświetla kod HTML Tylko dla aplikacji on-line Ładuje i wyświetla stronę www 19
Rodzaje Layoutów List View Dynamiczna makieta gdy nie znamy ilości elementów Wyświetla wszystkie elementy z tzw. Adaptera Elementy są w liście z możliwością ich przewijania 20
Rodzaje Layoutów Grid View Dynamiczna makieta gdy nie znamy ilości elementów Wyświetla wszystkie elementy z tzw. Adaptera Elementy są umieszczone w siatce, z możliwością jej przewijania 21
Rodzaje Layoutów Adapter może wyświetlać elementy macierzy, w tym celu należy wykorzystać klasę ArrayAdapter: ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, mystringarray); ListView listview = (ListView) findviewbyid(r.id.listview); listview.setadapter(adapter); 22
Rodzaje Layoutów Adapter może zawierać jakąś kolekcję danych (np. bazę danych), aby go wykorzystać należy wówczas użyć klasy SimpleCursorAdapter: String[] fromcolumns = {ContactsContract.Data.DISPLAY_NAME, ContactsContract.CommonDataKinds.Phone.NUMBER}; int[] toviews = {R.id.display_name, R.id.phone_number}; SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, R.layout.person_name_and_number, cursor, fromcolumns, toviews, 0); ListView listview = getlistview(); listview.setadapter(adapter); 23
Rodzaje Layoutów - pytanie Jakie mamy rodzaje Layoutów w androidzie? 24
Input controls 25
Input controls Kontrolki umożliwiają interakcje pomiędzy użytkownikiem a aplikacją. Android posiada szereg różnych kontrolek, które twórca aplikacji może użyć do komunikacji z użytkownikiem końcowym Kontrolki posiadają swoje parametry Kontrolki reagują także na Eventy (a raczej Eventy na to, co dzieje się z kontrolkami) 26
Input controls Button Aby przycisk reagował na dotyk można: 1. Stworzyć metodę: public void sendmessage(view view) { } Oraz przypisać ją do parametru: android:onclick="sendmessage" 2. Stworzyć onclicklistner: Button button = (Button) findviewbyid(r.id.button_send); button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { // Do something in response to button click } }); 27
Input controls Text Field Umożliwia użytkownikowi wprowadzenie tekstu Można podłączyć autouzupełnienie (za pomocą adaptera) Można zmienić rodzaj wyświetlanej klawiatury (text, textemailadress, texturi, number, phone) Można ustalić zachowanie kontrolki (textcapsentences, textcapwords, textautocorrect, textpassword, textmultiline) 28
Input controls Checkbox public void oncheckboxclicked(view view) { boolean checked = ((CheckBox) view).ischecked(); switch(view.getid()) { case R.id.checkbox_meat: if (checked) // Put some meat on the sandwich else // Remove the meat break; case R.id.checkbox_cheese: if (checked) // Cheese me else // I'm lactose intolerant break; } 29
Input controls Toggle Button ToggleButton toggle = (ToggleButton) findviewbyid(r.id.togglebutton); toggle.setoncheckedchangelistener(new CompoundButton.OnCheckedChangeListener() { public void oncheckedchanged(compoundbutton buttonview, boolean ischecked) { if (ischecked) { // The toggle is enabled } else { // The toggle is disabled } } }); 30
Input controls Spinner Należy wykorzystać Adapter celem dodania elementów do listy (np. ArrayAdapter) Obsługa za pomocą Listnera OnItemSelectedListener public void onitemselected(adapterview<?> parent, View view, int pos, long id) { // An item was selected. You can retrieve the selected item using // parent.getitematposition(pos) } public void onnothingselected(adapterview<?> parent) { } 31
Input controls Pickers Łatwy sposób na wybranie daty/czasu Korzystają z okien dialogowych Aby zmienić należy utworzyć własny obiekt i go zmienić w metodzie oncreatedialog 32
Input controls Interakcje z obiektami wykonuje się za pomocą eventów: onclick() kliknięcie onlongclick() przytrzymanie onfocuschange() zmiana aktywnego elementy (przy poruszaniu się za pomocą przycisków) onkey() wciśnięcie przycisku ontouch() dotknięcie (lub puszczenie, lub gest) oncreatecontextmenu() podczas tworzenia menu kontekstowego zazwyczaj związane z LongClikc 33
Input controls - pytanie Jakimi dwoma metodami można przypisać akcję do kontrolki? 34
Animacje 35
Animacje Api Androida umożliwia tworzenie animacji poprzez: Animacja właściwości Animacja widoku Animacja zasobów Drawable OpenGL ES 36
Animacje Animacja właściwości Działa poprzez zmianę właściwości obiektów Posiada tryb linear lub non-linear (jedna po drugiej, czy nachodzące na siebie) Nie ma ograniczeń odnośnie animowanego obiektu 37
Animacje Animacja widoku Możliwość animacji kontrolek View (i jej dzieci) Definiowanie animacji jako kodu XML Proste tworzenie i przypisywanie animacji do obiektu (poprzez zmianę parametrów obiektu) 38
Animacje Animacja drawable Wczytywanie zasobów drawable w odstępach pokladkowych Nakładanie na siebie elementów drawable jak rolka w filmie Animacja może być wyświetlana tylko w aktywnym oknie 39
Animacje OpenGL ES OpenGL ES 1.0 and 1.1 - This API specification is supported by Android 1.0 and higher. OpenGL ES 2.0 - This API specification is supported by Android 2.2 (API level 8) and higher. OpenGL ES 3.0 - This API specification is supported by Android 4.3 (API level 18) and higher. OpenGL ES 3.1 - This API specification is supported by Android 5.0 (API level 21) and higher. Zewnętrzna biblioteka! 40
Animacje - pytanie Jaki rodzaj animacji jest najmniej obciąża zasoby urządzenia? 41
Koniec! mgr inż. Anton Smoliński 42