Kierunek Informatyka
Instrukcja do ćwiczeń laboratoryjnych nr:		2	Nazwa przedmiotu: Programowanie aplikacji mobilnych
Temat: Interfejs użytkownika – RelativeLayout, ViewBinding, obsługa kontrolek w kodzie aktywności				Tryb studiów: stacjonarne
				Czas trwanie ćw. 2x45 min
Autor materiałów: dr Marcin Skuba

1. Treści programowe:

Tworzenie nowego widoku z siatką RelativeLayout. Podstawowe parametry layout-u (kolory, ustawienia, marginesy, grawitacja i inne). Pobieranie danych wprowadzonych w pola tekstowe z poziomu kodu Javy. Deklaracja tekstu w zasobach projektu. Obsługa zdarzeń związanych z przyciskami.

2. Cel zajęć:

Celem zajęć jest opanowanie umiejętności tworzenia interfejsu użytkownika w domyślnej siatce rozmieszczenia RelativeLayout oraz obsługa komponentów z poziomu języka Java.

3. Materiały dydaktyczne

· Struktura pliku aktywności

AppCompatActivity to klasa bazowa dla aktywności w Androidzie, która:

• pozwala korzystać z nowoczesnych funkcji Androida nawet na starszych wersjach systemu,
• obsługuje ActionBar/Toolbar, motywy Material Design i kompatybilność wsteczną,
• dziedziczy po FragmentActivity, więc umożliwia używanie fragmentów.

To podstawa większości aktywności w nowoczesnych aplikacjach Android.

Metoda onCreate będzie omówiona na kolejnych zajęciach (cykl życia aktywności)

· Przypisanie referencji do kontrolek poprzez funkcje findViewById:

· Odwoływanie się do elementów EML-owych metodą ViewBinding:

Aby można było korzystać z funkcjonalności ViewBigding należy włączyć ViewBinding w build.gradle (module: app)

Przykład dla języka Kotlin (build.gradle.kts):

Przykład dla języka Groovy (build.gradle):

Po dopisanie nowej funkcjonalności pamiętaj aby zsynchronizować projekt:

· Przykładowa instrukcja konwersji typów z String do int:

Najczęściej używane atrybuty wykorzystywane w siatce RelativeLayout:

RelativeLayout jest jednym z najbardziej elastycznych i potężnych kontenerów (grup widoków) używanych w Androidzie do projektowania interfejsów użytkownika. Służy do rozmieszczania widoków potomnych względem siebie lub względem krawędzi kontenera rodzica.

android:id="@+id/editTextImie"	ustawienie identyfikatora danego obiektu
android:layout_width="match_parent"	określenie szerokości ( match_parent -szerokość rodzica)
android:layout_height="wrap_content"	określenie wysokości ( wrap_content -wysokość zawartości
android:hint="Tekst ..."	ustawienie tekstu wskazówki
android:text="Wprowadz imie"	ustawienie głównego tekstu
android:textColor="#ff0000"	określenie koloru dla tekstu
android:background="#aabbcc"	określenie koloru tła
android:gravity="center"	Wyrównanie zawartości danego obiektu do środka

Pozostałe:

android:layout_above	Umieszcza dolną krawędź tego widoku powyżej podanego identyfikatora widoku zakotwiczenia.
android:layout_below	Umieszcza górną krawędź tego widoku poniżej podanego identyfikatora widoku zakotwiczenia.
android:layout_alignBaseline	Umieszcza linię bazową tego widoku na linii bazowej danego identyfikatora widoku zakotwiczenia.
android:layout_alignBottom	Sprawia, że dolna krawędź tego widoku pasuje do dolnej krawędzi danego identyfikatora widoku zakotwiczenia.
android:layout_alignEnd	Sprawia, że końcowa krawędź tego widoku pasuje do końcowej krawędzi danego identyfikatora widoku zakotwiczenia.
android:layout_alignLeft	Sprawia, że lewa krawędź tego widoku pasuje do lewej krawędzi danego identyfikatora widoku zakotwiczenia.
android:layout_alignParentBottom	Jeśli ma wartość true, dolna krawędź tego widoku pasuje do dolnej krawędzi elementu nadrzędnego.
android:layout_alignParentEnd	Jeśli ma wartość true, krawędź końcowa tego widoku odpowiada krawędzi końcowej elementu nadrzędnego.
android:layout_alignParentLeft	Jeśli ma wartość true, lewa krawędź tego widoku pasuje do lewej krawędzi elementu nadrzędnego.
android:layout_alignParentRight	Jeśli ma wartość true, prawa krawędź tego widoku pasuje do prawej krawędzi elementu nadrzędnego.
android:layout_alignParentStart	Jeśli ma wartość true, krawędź początkowa tego widoku odpowiada krawędzi początkowej elementu nadrzędnego.
android:layout_alignParentTop	Jeśli ma wartość true, górna krawędź tego widoku pasuje do górnej krawędzi elementu nadrzędnego.
android:layout_alignRight	Sprawia, że prawa krawędź tego widoku pasuje do prawej krawędzi danego identyfikatora widoku zakotwiczenia.
android:layout_alignStart	Sprawia, że krawędź początkowa tego widoku odpowiada krawędzi początkowej danego identyfikatora widoku zakotwiczenia.
android:layout_alignTop	Sprawia, że górna krawędź tego widoku pasuje do górnej krawędzi danego identyfikatora widoku zakotwiczenia.
android:layout_alignWithParentIfMissing	Jeśli ustawione na true, element nadrzędny będzie używany jako kotwica, gdy nie można znaleźć kotwicy dla układów_toLeftOf, układ_toRightOf itp.
android:layout_centerHorizontal	Jeśli ma wartość true, centruje to dziecko poziomo w obrębie elementu nadrzędnego.
android:layout_centerInParent	Jeśli ma wartość true, centruje to dziecko w poziomie i w pionie względem jego elementu nadrzędnego.
android:layout_centerVertical	Jeśli ma wartość true, centruje to dziecko pionowo w obrębie jego elementu nadrzędnego.
android:layout_toEndOf	Umieszcza krawędź początkową tego widoku na końcu danego identyfikatora widoku zakotwiczenia.
android:layout_toLeftOf	Umieszcza prawą krawędź tego widoku na lewo od danego identyfikatora widoku zakotwiczenia.
android:layout_toRightOf	Umieszcza lewą krawędź tego widoku na prawo od danego identyfikatora widoku zakotwiczenia.
android:layout_toStartOf	Umieszcza końcową krawędź tego widoku na początku danego identyfikatora widoku zakotwiczenia.

· Przykład widoku stworzonego w siatce RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:id="@+id/main"
android:background="#FFEB3B">

<TextView
android:id="@+id/textViewLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RelativLayout"
android:textSize="26dp"
android:layout_marginTop="60dp"
android:gravity="center"
android:textStyle="bold"
/>
<TextView
android:layout_below="@+id/textViewLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Imie: "
android:id="@+id/textViewImie"
android:textSize="22dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
/>

<EditText
android:id="@+id/editTextImie"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Wpisz swoje imie"
android:layout_toRightOf="@+id/textViewImie"
android:layout_alignBaseline="@+id/textViewImie"
android:layout_marginRight="20dp"
android:textSize="22dp"
android:background="#A3B7C8"
/>

<Button
android:id="@+id/buttonKliknijMnie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#4276D0"
android:textColor="#FFEB3B"
android:textSize="22dp"
android:layout_below="@+id/textViewImie"
android:layout_margin="20dp"
android:layout_centerHorizontal="true"
android:text="Kliknij mnie"/>

</RelativeLayout>

Definicja koloru w pliku colors.xml znajdującego się z zasobach res->values:

<color name="kolorPrzycisku">#d9d919</color>

Użycie koloru podczas definicji obiektu (np. przycisku) w pliku widoku (XML) np. gra_layput.xml

android:background="@color/kolorPrzycisku"

Definicja tekst w pliku strings.xml znajdującego się z zasobach res->values:

<string name="etykieta_przycisku_OK">OK</string>

Oraz użycie tekst podczas definicji obiektu (np. przycisku) w pliku widoku (XML) np. gra_layput.xml

android:text="@string/etykieta_przycisku_OK"

4. Zadania

Zadanie 1.

Zaprojektuj widok aplikacji opierając się na obiekcie XML o nazwie RelativeLayout. Napisz program realizujący funkcje prostego kalkulatora, jak na zdjęciu poniżej. Wynik powinien być obliczony i wyświetlony w niebieskim polu tekstowym natychmiast po wciśnięciu jednego w dolnych przycisków + - * /.

Wszystkie użyte w kodzie teksty oraz kolory umieść w odpowiednich plikach zasobów. Do obsługi przycisków użyj mechanizmu ViewBinding.

Zadanie 2.

Napis aplikację według własnego pomysłu wykorzystującą siatkę RalativLayout. Użyj w aplikacji przyciski, pola tekstowe, pola edycji tekstu.