Programowanie aplikacji dla technologii mobilnych. mgr inż. Anton Smoliński

Transkrypt

1 Programowanie aplikacji dla technologii mobilnych mgr inż. Anton Smoliński

2 Agenda Material Design Material Design dla Androida Pryncypia Material Design Rodzaje Layoutów Kontrolki interakcji Eventy Animacje 2

3 Material Design 3

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 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

12 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

13 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

14 Rodzaje Layoutów 14

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 15

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 16

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 17

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 18

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 19

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 20

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); 21

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); 22

23 Input controls 23

24 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) 24

25 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 } }); 25

26 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, text adress, texturi, number, phone) Można ustalić zachowanie kontrolki (textcapsentences, textcapwords, textautocorrect, textpassword, textmultiline) 26

27 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; } 27

28 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 } } }); 28

29 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) { } 29

30 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 30

31 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 31

32 Animacje 32

33 Animacje Api Androida umożliwia tworzenie animacji poprzez: Animacja właściwości Animacja widoku Animacja zasobów Drawable OpenGL ES 33

34 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 34

35 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) 35

36 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 36

37 Animacje OpenGL ES OpenGL ES 1.0 and This API specification is supported by Android 1.0 and higher. OpenGL ES This API specification is supported by Android 2.2 (API level 8) and higher. OpenGL ES This API specification is supported by Android 4.3 (API level 18) and higher. OpenGL ES This API specification is supported by Android 5.0 (API level 21) and higher. Zewnętrzna biblioteka! 37

38 Koniec! mgr inż. Anton Smoliński 38