Tworzenie wydajnych interfejsów. Autorzy: Piotr Michałkiewicz, 2 rok AiR Daniel Maksymow, 2 rok Informatyki

Transkrypt

1 Tworzenie wydajnych interfejsów Autorzy: Piotr Michałkiewicz, 2 rok AiR Daniel Maksymow, 2 rok Informatyki

2 Wstęp Tematem dzisiejszych zajęć będą: - Layouty - FrameLayout - LinearLayout - RelativeLayout - AbsoluteLayout - TableLayout - Widgety - Label(TextView) - Button - EditText - AutoCompleteTextView - CheckBox - Menu - Menu opcji - Menu kontekstowe

3 Wstęp W trakcie prezentacji zostaną wykorzystane materiały autorstwa dr Victora Matosa. Materiały te dostępne są pod adresami: Chapter04-User-Interfaces.pdf Chapter08-Menus.pdf

4 UI tworzymy w XML Dlaczego XML a nie podejście programistyczne? Separacja kontroli zachowania aplikacji od jej prezentacji: - Możliwość modyfikacji bez ingerencji w kod - Brak konieczności ponownej kompilacji kodu - Naturalny podział pracy przy większych projektach Tworzenie przejrzystego kodu: - Łatwiejsze debugowanie

5 Struktura interfejsu UI tworzą: - Obiekty pochodne od klasy View - Obiekty pochodne od klasy ViewGroup Obiekty ViewGroup stanowią gałęzie drzewa i nazywaną są layoutami. Obiekty View stanowią liście drzewa i nazywane są widgetami.

6 Czy sąlayoutyxml? Layout oparty na XML określa różne komponenty interfejsu, czyli widgety oraz relacje między nimi i ich zbiornikami (czyli layoutami). Android traktuje layouty jako zasoby programu (resources) i umieszcza ja w katalogu res/layout naszego projektu.

7 Podstawowe layouty FrameLayout Każdy dodany komponent (dziecko) jest umieszczany w lewym górnym rogu widoku.

8 Podstawowe layouty LinearLayout Umieszcza komponenty w pojedynczej kolumnie/wierszu (to oznacza że można go zorientować pionowo lub poziomo). Domyślnąkonfiguracjąjest orientacja pozioma.

9 Podstawowe layouty dodatkowe przykłady z prezentacji: Na stronach: 20-21

10 Podstawowe layouty AbsoluteLayout Ten layout określa pozycję każdego komponentu bezwzględnymi współrzędnymi.

11 Podstawowe layouty RelativeLayout Komponenty zawarte w tym layout cie są rozmieszczone z uwzględnieniem swoich wzajemnych pozycji

12 Podstawowe layouty dodatkowe przykłady z prezentacji: Na stronach: 24-27

13 Podstawowe layouty TableLayout Komponenty zawarte w tym layout cie sąrozmieszczone tabelarycznie, z określonąprzez projektanta liczbą wierszy i kolumn

14 Ładowanie layout uw programie Każdy plik XML określający nasz layout jest kompilowany wraz z programem. Konieczne jest załadowanie go wewnątrz metody oncreate().

15 Podstawowe layouty dodatkowe przykłady z prezentacji: Na stronie nr 31.

16 Widgety Widgetysąpodstawowymi komponentami graficznego interfejsu aplikacji (tzw. kontrolki). Ich klasą bazową jest klasa View.

17 Widgety Funkcje widgetów: - Przekazywaniedo programu danych lub poleceń użytkownika - Wizualizowaniedanych lub informacji o stanie programu - Zarządzenie innymi widgetami

18 Widgety Label(TextView) - Label w androidzie jest nazywany TextView (TextView jest nazwą właściwej klasy) - Obiekty TextView są używane do wyświetlania nagłówków - Obiektów TextViewnie można edytować, zatem nie przyjmujążadnych danych wejściowych

19 Widgety Label(TextView) <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000ff" android:padding="3px" android:text="enter User Name" android:textsize="16sp" android:textstyle="bold" android:gravity="center" android:layout_x="20px" android:layout_y="22px > </TextView>

20 Widgety-Button - Przyciski pozwalają symulować akcję klikania w interfejsie użytkownika - Klasa Button jest klasą pochodną klasy TextView, w związku z czym formatowanie tych obiektów jest podobne

21 Widgety-Button <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentright="true" android:layout_marginleft="10dip" android:text="ok" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="cancel" />

22 Widgety-EditText EditTextjest widgetempochodnym od TextView, umożliwiającym wprowadzanie tekstu. To pole tekstowe jest pozbawione zaawansowanych funkcji edycji tekstu, służy głównie to przekazywania ciągu znaków do programu. Domyślnie, gdy nasz tekst przekroczy jednąlinię, okienko EditTextzwiększy swój rozmiar o kolejnąlinijkę, jednak istnieje możliwośćzablokowania rozmiaru tego okienka ustawiając wartość atrybutu: android:singleline na wartość true.

23 Widgety-EditText dodatkowe przykłady z prezentacji: Na stronach: 43-45

24 Widgety-AutoCompleteTextView Rozszerzeniem klasy EditTextjest klasa AutoCompleteTextView, która w trakcie wpisywania tekstu podaje sugestie dokończenia wyrazu/zdania

25 Wigdety-AutoCompleteTextView ImplementacjęwidgetuAutoCompleteTextViewzaczynamy od stworzenia pliku XML w folderze res/layout:

26

27

28 Widgety-AutoCompleteTextView W ten sposób utworzyliśmy plik który będzie odpowiadałza pole każdej wyświetlanej sugestii. Wprowadźmy do utworzonego pliku następujący kod:

29 Widgety-AutoCompleteTextView Edytujmy plik main.xml aby wyglądał w następujący sposób:

30 Widgety-AutoCompleteTextView Następnie otwieramy folder res/values, a w nim plik strings.xml i edytujemy go do postaci:

31 Widgety-AutoCompleteTextView Edytujmy główny plik naszego programu do postaci:

32 Widgety-AutoCompleteTextView W powyższym kodzie: 1.Po załadowaniu głownegolayoutu(main.xml) odnajdujemy widget AutoCompleteTextView metodą findviewbyid(int). 2. Następnie obiekt ArrayAdapter jest inicjalizowany do łączenia pliku layoutowego listitem.xml do każdego elemantu string-array z pliku strings.xml 3.Ostatecznie, metoda setadapter() jest wywoływana do skojarzenia obiektu ArrayAdapter z widgetem AutoCompleteTextView, tak, by tablica stringów zapełniła listę sugestii.

33 Widgety-CheckBox dodatkowe przykłady z prezentacji: Na stronach: 51-54

34 Menu myślę, że już wiesz co robić

35 Menu Przykłady z prezentacji: Na stronach: 2-19

36 Optionmenu Menu wyboru i kontekstowe mogą zawierać następujące pola: 1. Tekst 2. Ikony 3. Radio button 4. Check Boxes 5. Sub-menu(menu rozwijane) 6. Skróty klawiszowe Struktura Menu: <menu> <item> <group>

37 Optionmenu -implementacja <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android=" <item /> <item /> </menu> Implementacja kodu.xml do programu przy pomocy public boolean oncreateoptionsmenu(menu menu) { MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.game_menu, menu); return true; }

38 Linki Widgets.pdf Time-Tabs.pdf Keyboard-IMF.pdf Autor powyższych prezentacji:

39 Koniec Dziękujemy na wysłuchanie i życzymy powodzenia