Układy elementów na ekranie – rodzaje layoutów

Kod źródłowy do tej lekcji znajduje się tutaj. Rozpakuj go i zaimportuj. W katalogu z kodem źródłowym znajdą się podkatalogi oznaczone numerami. Są to po prostu kolejne wersje kodu, tworzonego w ramach przykładów. Możesz analizować kolejne kroki tworzenia aplikacji, lub od razu zabrać się za kod z katalogu o najwyższym numerku.

Rozkład elementów na ekranie opisany jest w xml'owym pliku layoutu. Możemy go edytować ręcznie, lub przyklejać kompotenty na zasadzie „przeciągnij i upuść”. To w jaki sposób określane jest położenie poszczególnych elementów zależy od lodzaju layoutu. Poszczgólne rodzaje layoutów opisuję poniżej. W pierwszej kolejności musimy znaleźć właściwy plik layoutu dla aktywności której układ elementów chcemy zmieniać. Stworzyłem nową aplikację „PrzykladTableLayout”. W jej katalogu res-->layout znajduje się plik xml w którym będzie opisany layout naszej głównej aktywności. Jeżeli tworząc projekt zaakceptowałeś domyślną nazwę aktywności, to Twój plik będzie się nazywał activity_main.xml

 

Table layout – układ tabelaryczny

Skoro zabrałeś/łaś się za programowanie na Androida to zakładam, że takie rzeczy jak podstawy HTML są dla Ciebie banalne. Ten rodzaj układu jest bardzo zbliżony do elementu Table znanego z języka HTML. Definiujemy poszczególne wiersze i kolumny. Skasuj całą zawartość swojego pliku layoutu i wklej taki kod:

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/tableLayout1"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dip" >

<TextView

android:id="@+id/textView1"

android:text="Kolumna nr 1"/>

<Button

android:id="@+id/button1"

android:text="Kolumna nr 2" />

</TableRow>

<TableRow

android:id="@+id/tableRow1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:padding="5dip" >

<EditText

android:id="@+id/editText1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="kolumna nr 1"/>

<EditText

android:id="@+id/editText2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="kolumna nr 2"/>

</TableRow>

</TableLayout>

Kolejne elementy <TableRow> określają kolejne wiersze w tabeli. Kolumn będzie tyle, ile będzie elementów w wierszu w którym jest najwięcej elementów – dokładnie jak w HTML.

Domyślnie wyświetlana jest formatka do montowania elementów metodą drag & drop. Aby przejść do edycji ręcznej pliku kliknij zakładkę „activity_main.xml” znajdującą się u dołu.

Po wklejeniu kodu możesz wrócić do ekranu drag & drop i powinieneś zobaczyć taki widok:

Możesz przeciągać elementy z menu znajdującego się po lewej stronie, a następnie modyfikować ich położenie ręcznie , lub umieszczać elementy przy użyciu kodu a przesuwać graficznie. Nie ma to znaczenia, ponieważ wszystkie zmiany i tak zachodzą w pliku XML – edytor graficzny jest tylko nakładką :)

Linear layout – układ liniowy, obiekty ułożone pod sobą lub obok siebie

Ten rodzaj layoutu działa w oparciu o zasadę, że elementy znajdują się kolejno pod sobą lub obok siebie. Podobnie jak poprzednio, stwórz nowy projekt i zawartość pliku layoutu zamień na ten kod:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Element nr 1" />

<TextView

android:id="@+id/textView2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Element nr 2" />

<TextView

android:id="@+id/textView3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Element nr 3" />

</LinearLayout>

Określiliśmy tutaj 3 pola wyświetlające tekst. Zwróć przy okazji uwagę na element:

android:orientation="horizontal"

znajdujący się w tagu <LinearLayout... Horizontal określa, że elementy będą się znajdowały obok siebie, a nie pod sobą. Po uruchomieniu aplikacja wygląda tak:

 

W ramach eksperymentu dodałem przy tych ustawieniach jeszcze dwa elementy TextView. Jak widać, nie wygląda to najlepiej. Do takiego efektu może dojść np. na telefonach o mniejszych ekranach lub rozdzielczości:

Modyfikuję teraz nieco element LinearLayout, konkretnie własność orientation z horizontal na vertical:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical" >

Ta zmiana sprawi, że elementy nie będą ze sobą sąsiadowały obok siebie, a jeden pod drugim. Efekt:

 

RelativeLayout – położenie elementów względem innych elementów

Jeśli wykleisz sobie elementy na aktywności przy użyciu przeciągania komponentów z palety, domyślnie ich położenia zostaną określone jako położenie względem innego elementu. Dla przykładu przykleiłem dwa komponenty:

 

System domyślnie ustawia RelativeLayout. Tutaj zawartość wygenerowanego pliku layoutu:

<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:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context=".MainActivity" >

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_marginLeft="31dp"

android:layout_marginTop="46dp"

android:text="TextView" />

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/textView1"

android:layout_marginLeft="37dp"

android:layout_marginTop="30dp"

android:layout_toRightOf="@+id/textView1"

android:text="Button" />

</RelativeLayout>

Jak widać, położenie elementu klasy TextView jest wskazane jako odległości od górnego i lewego marginesu, a położenie elementu Button jako odległości względne od elementu TextView. Takie podejście jest zrozumiałe przy przeciąganiu elementów, ale takie rozmieszczanie przy użyciu kodowania ręcznego nie byłoby specjalnie wygodne. Warto znać ten typ layoutu jedynie ze względu na możliwość nanoszenia ręcznych poprawek do automatycznie generowanego kodu. Chodzi o sytuacje gdy przeciągamy graficznie komponenty, ale nie możemy ustawić elementów tak jak byśmy sobie tego życzyli, bo nam się wszystko „rozjeżdża”.

AbsoluteLayout – położenia na sztywno

AbsoluteLayout jest takim rodzajem layoutu, gdzie ustalamy na sztywno x i y górnej lewej krawędzi elementu. Stwórz kolejny projekt i zamiast dotychczasowego kodu w pliku layoutu wstaw ten:

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<Button

android:layout_width="100dp"

android:layout_height="wrap_content"

android:text="Absolute"

android:layout_x="50px"

android:layout_y="261px" />

<Button

android:layout_width="100dp"

android:layout_height="wrap_content"

android:text="Layout"

android:layout_x="225px"

android:layout_y="120px" />

</AbsoluteLayout>

Z jednej strony, rozkład elementów nam się nie „rozjedzie”, ale z drugiej ustawienie współrzędnych elementu obowiązuje zarówno przy pionowym jak i poziomym położeniu ekranu. Jest też niezależne od wielkości i rozdzielczości ekranu. Może się więc okazać że na niektórych telefonach, albo po obróceniu ekranu, część komponentów znalazła się poza widocznym obszarem.