warsztaty v2 layout y i widget y n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Warsztaty v2 Layout’y i widget’y PowerPoint Presentation
Download Presentation
Warsztaty v2 Layout’y i widget’y

Loading in 2 Seconds...

play fullscreen
1 / 36

Warsztaty v2 Layout’y i widget’y - PowerPoint PPT Presentation


  • 176 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Warsztaty v2 Layout’y i widget’y' - amal-edwards


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
warsztaty v2 layout y i widget y

Warsztaty v2Layout’y i widget’y

Tomasz Wachowski

Kamil Snopek

Jan Romaniak

g wne punkty prezentacji
Główne punkty prezentacji
  • Main.xml – Główny plik layout’u
  • Typy layout’ów
    • LinearLayout
    • TableLayout
    • FrameLayout
    • AbsoluteLayout
    • RelativeLayout
main xml
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
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
  • 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.
table layout
Table Layout

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

frame layout
Frame Layout

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

absolute layout
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
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.
widgets

Widgets

Tomasz Wachowski

co to jest widget
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 ->

podstawowe widgety label
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 label1
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>

podstawowe widgety button
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>

podstawowe widgety images
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 images1
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
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
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

ListView

Jan Romaniak

listview1
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.
listview2
ListView
  • ListView jest jednym z widget’ów znajdujących się w submenu Composite w toolbox’ie interfejsu tworzenia layout’ów.
jak stworzy list textview
Jak stworzyć listę TextView
  • Należy dodać nowy layout. Będzie to nasz listviewitem (element listy). W przykładzie nazwelist_item.xml
slide24
cd.
  • Wybrać plik typu xml, następnie nadać mu nazwę i zaakceptować.
slide25
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>

w kodzie java
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");

cd w kodzie java
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);

tworzenie adaptera
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);

przypisanie adaptera do l istview
Przypisanie adaptera do ListView
  • Należy użyć metody listView.setAdapter(adapter) i wstawić tam nasz nowo utworzony adapter.

listView.setAdapter(listAdapter);

asynctask

AsyncTask

Jan Romaniak

dlaczego u ywa asynctask w
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
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
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>

cd jak stworzy asynctask
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>

cd jak stworzy asynctask1
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

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