Warsztaty v2 Layout’y i widget’y

1. Warsztaty v2Layout’y i widget’y Tomasz Wachowski Kamil Snopek Jan Romaniak

2. Layouty w Androidzie Kamil Snopek

3. Główne punkty prezentacji • Main.xml – Główny plik layout’u • Typy layout’ów • LinearLayout • TableLayout • FrameLayout • AbsoluteLayout • RelativeLayout

4. Main.xml • Jest to plik w którym stworzony zostanie nasz layout główny. Znajdziemy go w resources (res\layout). • Kompiluje się on razem z programem i musi zostać załadowany w metodzie onCreate() za pomocą funkcji setContentView() w głównym pliku programu.

5. Main.xml 2 • Opisujemy tutaj jaką wielkość ma mieć dany obiekt, jak się zachowywać oraz gdzie się znajdować. Przykładem niech będzie poniższy kod: android:layout_gravity="top"

6. Linear Layout • Linearlayout umieszcza wszystkie swoje komponenty w kolumnie lub wierszu. • Można go zorientować na 2 sposoby: poziomo i pionowo. • Layout ten pozwana na umieszczanie obiektów w zależności od atrybutu gravity oraz modyfikowanie jego wielkości.

7. Table Layout Layout ten umieszcza wszystkie obiekty w tablicy którą sami stworzymy. Może ona posiadać dowolną liczbę wierszy i kolumn.

8. Frame Layout Jest to najprostszy z layoutów. Umieszcza on wszystkie obiekty w lewym górnym rogu ekranu.

9. Absolute Layout Określa on położenie każdego obiektu współrzędnymi x i y. Jest to layout mało elastyczny, przez co inaczej się prezentuje nasza aplikacja na różnych typach urządzeń. Layout ten wychodzi z użycia.

10. Relative Layout • Najczęściej używany ze względu na możliwość pozycjonowania obiektów względem siebie. • Łączy dobre cechy Absolute oraz Linearlayout’u. • Widgety możemy ustawiać w dowolnym miejscu. Oferuje największe możliwości.

11. Widgets Tomasz Wachowski

12. Co to jest widget? Ich klasą bazową jest klasa View. Widgety są używane do komunikacji z użytkownikiem, wizualizowanie danych lub informacji o stanie programu oraz zarządzania innymi widgetami. DatePicker Imagebutton -> Text Field -> Checkbox -> Radio button ->

13. Podstawowe Widgety: Label Label nazywany jest w androidzie TextView. Obiekty TextView jest używany do wyświetlania nagłówków. Nie można ich edytować, nie przyjmują one danych wejściowych.

14. Podstawowe Widgety: Label <TextView android:id="@+id/myTextView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ff0000ff" android:padding="3px" android:text="EnterUserName" android:textSize="16sp" android:textStyle="bold" android:gravity="center" android:layout_x="20px" android:layout_y="22px" > </TextView>

15. Podstawowe Widgety: Button • Button pozwala na symulowanie akcji klikanie w interfejsie użytkownika. • Button jest podklasą Textview, więc ich formatowanie jest podobne. <Button android:id="@+id/btnExitApp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10px" android:layout_marginLeft="5px" android:text="ExitApplication" android:textSize="16sp" android:textStyle="bold" android:gravity="center" android:layout_gravity="center_horizontal"> </Button>

16. Podstawowe Widgety: Images Klasy ImageView oraz ImageButton, są to dwa widgety które pozwalają na osadzenie obrazków w aplikacji. Oba są odpowiednikami TextView oraz Button, lecz są one bazowane na obrazkach. Każdy z nich przyjmuje atrybut android:src lub android:background (w XML layout). Atrybut ten przypisuje im obrazek. ImageButton jest subklasą ImageView. Dodaje ona standardowe zachowanie przycisku w odpowiedzi na kliknięcie.

17. Podstawowe Widgety: Images <ImageButton android:id="@+id/myImageBtn1" android:src="@drawable/icon" android:layout_width="wrap_content" android:layout_height="wrap_content" > </ImageButton> <ImageView android:id="@+id/myImageView1" android:src="@drawable/microsoft_sunset" android:layout_width="150px" android:layout_height="120px" android:scaleType="fitXY"> </ImageView>

18. Podstawowe Widgety: EditText EditText widget jest rozszerzeniem TextView, które umożliwia edycję swojej zawartości. Metoda umożliwiająca odczyt: txtBox.getText().toString() Metoda umożliwiająca zapis: txtBox.getText().toString() Editbox posiada kilka dodatkowych opcji: android:autoText – włącza/wyłącza automatyczne sprawdzanie poprawności pisanego słowa, android:capitalize -automatyczne pisanie dużą literą, android:digits – konfiguruję pole, tak aby przyjmowało tylko określone cyfry android:singleLine – określa czy pole tekstowe jest przeznaczone dla jedno- czy wielo- liniowych tekstów, android:passoword – określa widoczność wpisanych znaków, android:numeric – (integer,decimal,signed) określa format numeryczny, android:phonenumber – formatowanie numeru telefonu.

19. Implementacja widgetu w programie. Aby móc korzystać z z widgetów pierw musimy do programu głównego załadować layout za pomocą: setContentView(R.layout.main) Następnie musimy odnaleźć nasz widget przy pomocy findViewById(int). Button button= (Button) findViewById(R.id.button); EditText edittext = (EditText) findViewById(R.id.edittext); CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);

20. ListView Jan Romaniak

21. ListView • ListView używane jest do prezentacji danych jak sama nazwa wskazuje na liście, jest on jednym z najczęściej używanych widget’ów można go spotkać np. w ustawieniach androida.

22. ListView • ListView jest jednym z widget’ów znajdujących się w submenu Composite w toolbox’ie interfejsu tworzenia layout’ów.

23. Jak stworzyć listę TextView • Należy dodać nowy layout. Będzie to nasz listviewitem (element listy). W przykładzie nazwelist_item.xml

24. cd. • Wybrać plik typu xml, następnie nadać mu nazwę i zaakceptować.

25. cd. • W pliku który właśnie utworzyliśmy dodajemy w kodzie/ przeciągamy TextView <TextViewandroid:text="TextView" android:layout_width="wrap_content" android:id="@+id/textView"android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:gravity="center"android:textColor="#FF33A2FF"></TextView>

26. W kodzie Java • W pliku naszego activity należy stworzyć listę bądź tablice String’ów zawierająca interesujące nas dane List<String> namesList = newArrayList<String>(); namesList.add("Agata"); namesList.add("Anna");

27. cd. W kodzie Java • Należy zdefiniować dwie zmienne typów kolejno ListView i ListAdapter. Do zmiennej typu ListView należy wczytać listView, które utworzyliśmy na samym początku. ListViewlistView=(ListView)findViewById(R.id.simpleListView);

28. Tworzenie adaptera • Do adaptera stworzyć nowy obiekt typu ArrayAdapter gdzie kolejne parametry konstruktora to Context gdzie podajemy nasze activity, layout naszego itemu, a ostatni to lista lub tablica naszych String’ów. ArrayAdapter<String> listAdapter= newArrayAdapter<String>(this, ,R.layout.list_item, R.layout.textView, namesList);

29. Przypisanie adaptera do ListView • Należy użyć metody listView.setAdapter(adapter) i wstawić tam nasz nowo utworzony adapter. listView.setAdapter(listAdapter);

30. AsyncTask Jan Romaniak

31. Dlaczego używać AsyncTask’ów • W większości większych aplikacji występuje potrzeba wykonania czegoś co zajmuje sporo czasu (>3s) np. pobieranie obrazka z Internetu. • Jeżeli pobierzemy go standardowo (w wątku synchronicznym z UI) np. w funkcji onCreate() to najprawdopodobniej zakończy się to tak:

32. AsyncTask - pułapki • Tak samo jak w większości systemów z wątku jaki tworzy AsyncTask nie można bezpośrednio odwoływać się do wątku głównego (wyświetlającego grafikę). • Takie zadania należy wykonywać w metodach onProgressUpdate lub onPostExecute

33. Jak stworzyć AsyncTask • Należy stworzyć klasę dziedziczącą po klasie AsyncTask • W nawiasach trójkątnych (typy generyczne) pierwszy typ oznacza jaki typ parametru przybiorą metody doInBackground i execute. public class SimpleAsyncTaskextendsAsyncTask<Integer, Float, Long>

34. cd. Jak stworzyć AsyncTask • Drugi typ w tym wypadku Float oznacza, typ wartości zwracanej przez doInBackground, a także parametr metody onPostExecute • Trzeci typ to typ wartości parametru onProgressUpdate i publishProgress. public class SimpleAsyncTaskextendsAsyncTask<Integer, Float, Long>

35. cd. Jak stworzyć AsyncTask • W klasie należy przeciążyć metodę doInBackground i wpisać do niej zadania czasochłonne. • W metodzie onProgressUpdate wpisujemy kod który ma się wykonywać na UI Thread po wykonaniu metody publishProgress. • Metoda onPostExecute wykonuje się po wykonaniu zadania z doInBackground, na wątku głównym.

36. Dziękujemy  W ramach checi rozszerzenia swojej wiedzy zapraszamy na : http://grail.cba.csuohio.edu/%7Ematos/notes/cis-493/lecture-notes/Android-Chapter04-User-Interfaces.pdf Tomasz Wachowski Kamil Snopek Jan Romaniak