Transcript android:layout_width="wrap_content"

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
• 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
<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>
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>
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
<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>
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.
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 
W ramach checi rozszerzenia swojej wiedzy zapraszamy na :
http://grail.cba.csuohio.edu/%7Ematos/notes/cis-493/lecturenotes/Android-Chapter04-User-Interfaces.pdf
Tomasz Wachowski
Kamil Snopek
Jan Romaniak