Warsztaty v2 Layout y i widget y. Tomasz Wachowski Kamil Snopek Jan Romaniak

Transkrypt

1 Warsztaty v2 Layout 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 Linear Layout Table Layout Frame Layout Absolute Layout Relative Layout

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 Linear layout umieszcza wszystkie swoje komponenty w kolumnie lub wierszu. MoŜna go zorientować poziomo i pionowo. na 2 sposoby: 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 Linear layout 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. Image button -> Text Field -> Checkbox -> Radio button -> DatePicker

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

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="exit Application" android:textsize="16sp" android:textstyle="bold" android:gravity="center" android:layout_gravity="center_horizonta l"> </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:layout_width="wrap_content" android:layout_height="wrap_content" > </ImageButton> <ImageView 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 jednoczy 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 listview item (element listy). W przykładzie nazwe list_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 <TextView android: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 = new ArrayList<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. ListView listview =(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= new ArrayAdapter<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 SimpleAsyncTask extends AsyncTask<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 SimpleAsyncTask extends AsyncTask<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 : Tomasz Wachowski Kamil Snopek Jan Romaniak