Projekt interfejsu graficznego (Layout)¶

Projekt aplikacji jest opisywany w formacie xml. Przeanalizuj poniższy fragment pliku xml i określ znaczenie poszczególnych znaczników. RelativeLayout jest jednym z menadżerów rozkładu elementów interfejsu graficznego, jego nazwa wiąże się z faktem że określa położenia poszczególnych elementów interfejsu względem siebie (relative).

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
  android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

  <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</RelativeLayout>

Możemy go tworzyć zarówno w sposób wizualny (zakładka Design), jak i w sposób programistyczny (xml). Wszystkie zmiany dokonywane w jednym z tych widoków są automatycznie odzwierciedlane w drugim. Możemy teraz usunąć etykietę (Label) z przykładowym tekstem, żeby zobaczyć że zmiana ta zostanie uwzględniona zarówno w widoku Design, jak i w widoku Text, zawierającym plik xml opisujący ten Layout.

Kolejnym krokiem będzie dodanie dodanie i rozmieszczenie elementów interfejsu graficznego, a także wybór takich cech jak odstępy, obramowania, kolory, czy reakcje na zdarzenia. Możemy zrobić to zarówno bezpośrednio w pliku xml (zakładka Text), jak i wizualnie (zakładka Design). Dodajmy jeden przycisk (Button) i jedno pole tekstowe (TextView).

Wybierz odpowiednie rozmieszczenie tych komponentów i przeanalizujmy opisujący to rozmieszczenie plik xml. Odpowiedz na pytania dotyczące znaczenia poszczególnych atrybutów menadżera RelativeLayout. W celu zapewnienia wygodnej możliwości zmiany języka interfejsu (internacjonalizacji), powszechnie przyjętym standardem jest definiowanie wszystkich tekstów interfejsu graficznego w postaci zmiennych tekstowych definiowanych w pliku xml w postaci @string/nazwa_zmiennej. Wartości tak zdefiniowanych zmiennych są przechowywane w pliku /app/src/main/res/values/strings.xml.

<resources>
  <string name="app_name">Mod2</string>

  <string name="b1_text">Aforyzm dnia</string>
  <string name="eracism">Greatest failure is not to try</string>
  <string name="action_settings">Settings</string>
</resources>

Stworzenie innej wersji językowej aplikacji polega na przygotowaniu alternatywnego pliku, na przykład o nazwie strings-pl.xml, zawierającego wszystkie teksty mogące pojawić się na komponentach interfejsu graficznego. Po zapisaniu tekstów w postaci zmiennych, zawartość pliku main_activity.xml, opisującego Layout naszego pierwszego elementu Activity, wygląda w następujący sposób

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop=„@dimen/activity_vertical_margin"
  android:paddingBottom="@dimen/activity_vertical_margin"
  tools:context=".MainActivity">

  <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/b1_text"
    android:id="@+id/b1"
    android:layout_marginTop="49dp"
    android:layout_alignParentTop="true" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/eracism"
    android:id="@+id/tv1"
    android:layout_marginTop="45dp"
    android:layout_below="@+id/b1"
    android:layout_alignParentStart="true" />

</RelativeLayout>