1 / 36

Warsztaty v2 Layout’y i widget’y

Warsztaty v2 Layout’y i widget’y. Tomasz Wachowski Kamil Snopek Jan Romaniak. Layouty w Androidzie. Kamil Snopek. Główne punkty prezentacji. Main.xml – Główny plik layout’u Typy layout’ów Linear Layout Table Layout Frame Layout Absolute Layout Relative Layout. Main.xml.

amal-edwards
Télécharger la présentation

Warsztaty v2 Layout’y i widget’y

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related