Warsztaty v2 Layout’y i widget’y
-
Upload
amal-edwards -
Category
Documents
-
view
43 -
download
0
description
Transcript of Warsztaty v2 Layout’y i widget’y
Warsztaty v2Layout’y i widget’y
Tomasz WachowskiKamil SnopekJan 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
• 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.
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"
Linear Layout
• Linear layout 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.
Table Layout
Layout ten umieszcza wszystkie obiekty w tablicy którą sami stworzymy. Może ona posiadać dowolną liczbę wierszy i kolumn.
Frame Layout
Jest to najprostszy z layoutów. Umieszcza on wszystkie obiekty w lewym górnym rogu ekranu.
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.
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.
Widgets
Tomasz Wachowski
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
Image button ->
Text Field ->Checkbox ->Radio button -
>
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.
Podstawowe Widgety: Label
<TextViewandroid: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>
Podstawowe Widgety: Button
• Button pozwala na symulowanie akcji klikanie w interfejsie użytkownika.
• Button jest podklasą Textview, więc ich formatowanie jest podobne.
<Buttonandroid: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_horizontal"></Button>
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.
Podstawowe Widgety: Images
<ImageButtonandroid:id="@+id/myImageBtn1"android:src="@drawable/icon"android:layout_width="wrap_content"
android:layout_height="wrap_content" ></ImageButton><ImageViewandroid:id="@+id/myImageView1"android:src="@drawable/
microsoft_sunset"android:layout_width="150px" android:layout_height="120px"
android:scaleType="fitXY"></ImageView>
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.
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);
ListView
Jan Romaniak
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.
ListView
• ListView jest jednym z widget’ów znajdujących się w submenu Composite w toolbox’ie interfejsu tworzenia layout’ów.
Jak stworzyć listę TextView
• Należy dodać nowy layout. Będzie to nasz listview item (element listy). W przykładzie nazwe list_item.xml
cd.
• Wybrać plik typu xml, następnie nadać mu nazwę i zaakceptować.
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>
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");
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);
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);
Przypisanie adaptera do ListView• Należy użyć metody
listView.setAdapter(adapter) i wstawić tam nasz nowo utworzony adapter. listView.setAdapter(listAdapter);
AsyncTask
Jan Romaniak
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:
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
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>
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>
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.
Dziękujemy
Tomasz WachowskiKamil SnopekJan Romaniak
W ramach checi rozszerzenia swojej wiedzy zapraszamy na :http://grail.cba.csuohio.edu/%7Ematos/notes/cis-493/lecture-
notes/Android-Chapter04-User-Interfaces.pdf