Tworzenie wydajnych interfejsów Autorzy: Piotr Michałkiewicz, 2 rok AiR Daniel Maksymow, 2 rok Informatyki
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
Wstęp W trakcie prezentacji zostaną wykorzystane materiały autorstwa dr Victora Matosa. Materiały te dostępne są pod adresami: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android- Chapter04-User-Interfaces.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android- Chapter08-Menus.pdf
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
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.
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.
Podstawowe layouty FrameLayout Każdy dodany komponent (dziecko) jest umieszczany w lewym górnym rogu widoku.
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.
Podstawowe layouty dodatkowe przykłady z prezentacji: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecturenotes/android-chapter04-user-interfaces.pdf Na stronach: 20-21
Podstawowe layouty AbsoluteLayout Ten layout określa pozycję każdego komponentu bezwzględnymi współrzędnymi.
Podstawowe layouty RelativeLayout Komponenty zawarte w tym layout cie są rozmieszczone z uwzględnieniem swoich wzajemnych pozycji
Podstawowe layouty dodatkowe przykłady z prezentacji: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecturenotes/android-chapter04-user-interfaces.pdf Na stronach: 24-27
Podstawowe layouty TableLayout Komponenty zawarte w tym layout cie sąrozmieszczone tabelarycznie, z określonąprzez projektanta liczbą wierszy i kolumn
Ł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().
Podstawowe layouty dodatkowe przykłady z prezentacji: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecturenotes/android-chapter04-user-interfaces.pdf Na stronie nr 31.
Widgety Widgetysąpodstawowymi komponentami graficznego interfejsu aplikacji (tzw. kontrolki). Ich klasą bazową jest klasa View.
Widgety Funkcje widgetów: - Przekazywaniedo programu danych lub poleceń użytkownika - Wizualizowaniedanych lub informacji o stanie programu - Zarządzenie innymi widgetami
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
Widgety Label(TextView) <TextView android:id="@+id/mytextview1" 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>
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
Widgety-Button <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignparentright="true" android:layout_marginleft="10dip" android:text="ok" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toleftof="@id/ok" android:layout_aligntop="@id/ok" android:text="cancel" />
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.
Widgety-EditText dodatkowe przykłady z prezentacji: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecturenotes/android-chapter04-user-interfaces.pdf Na stronach: 43-45
Widgety-AutoCompleteTextView Rozszerzeniem klasy EditTextjest klasa AutoCompleteTextView, która w trakcie wpisywania tekstu podaje sugestie dokończenia wyrazu/zdania
Wigdety-AutoCompleteTextView ImplementacjęwidgetuAutoCompleteTextViewzaczynamy od stworzenia pliku XML w folderze res/layout:
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:
Widgety-AutoCompleteTextView Edytujmy plik main.xml aby wyglądał w następujący sposób:
Widgety-AutoCompleteTextView Następnie otwieramy folder res/values, a w nim plik strings.xml i edytujemy go do postaci:
Widgety-AutoCompleteTextView Edytujmy główny plik naszego programu do postaci:
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.
Widgety-CheckBox dodatkowe przykłady z prezentacji: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecturenotes/android-chapter04-user-interfaces.pdf Na stronach: 51-54
Menu myślę, że już wiesz co robić
Menu Przykłady z prezentacji: http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecturenotes/android-chapter08-menus.pdf Na stronach: 2-19
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>
Optionmenu -implementacja <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/new_game" android:icon="@drawable/ic_new_game" android:title="@string/new_game" /> <item android:id="@+id/help" android:icon="@drawable/ic_help" android:title="@string/help" /> </menu> Implementacja kodu.xml do programu przy pomocy MenuInflater.inflate(). @Override public boolean oncreateoptionsmenu(menu menu) { MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.game_menu, menu); return true; }
Linki http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter04-user-interfaces.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter05-xml-layouts.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter06-selection- Widgets.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter07a-fancy-date- Time-Tabs.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter07b-hard-soft- Keyboard-IMF.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter08-menus.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter09-fonts.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter10-webkit.pdf http://grail.cba.csuohio.edu/~matos/notes/cis-493/lecture-notes/android-chapter11-dialogboxes.pdf Autor powyższych prezentacji: http://grail.cba.csuohio.edu/~matos/
Koniec Dziękujemy na wysłuchanie i życzymy powodzenia