Prošli put smo pričali o LinearLayout, a danas je na red došao TableLayout. TableLayout kako mu i samo ime kaže je layout koji radi na principu tabele. Ako ste ikad radili HTML onda vam je poznat princip rada, i to da se TableLayout ponaša isto poput standardne HTML tabele sa <tr> i <td> tagovima.
Prije nego što počenemo, potrebno je da imate podešeno razvojno okruženje i da napravite novi projekat. I ovde je korišten API 10, tj Gingerbread 2.3.3.
Znači imamo, TableLayout koji se se sastoji iz više redova i kolona. Postoji 2 načina da dodate TableLayout u vašu aplikaciju, dirketno preko XML koda ili preko grafičkog interfejsa, jednostavnim prevlačenjem TableLayout-a. Međutim, da bi to sve radilo potrebno je da da dodate i redove (table row), to možete uraditi najlakše i najbrže jednostavno desnim klikom na TableLayout u Outline prozoru, ili recimo prevlačenjem TableRow iz palete alata. Ovaj, prvi način je prikazan na slici ispod. Naravno, kao i sve što se tiče izgleda aplikacija u Android, i ovo je moguće uraditi klasičnim putem preko XML koda.
U našem primjeru dodao sam 4 reda, koji imaju 1, 2, 3, i 4 kolone, kako bi shvatili kako izgleda i kako funkcioniše TableLayout. Nećemo dodavati, nikakav kod, jer aplikacija ne radi ništa praktično, nego samo demonstrira izgled TableLayouta. Dodao sam komentare u XML kod, da vidite gdje počinje svaki red, i koliko ima kolona u tom redu.
[xml]
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
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" >
<!– Prvi red sa samo 1 kolonom –>
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 1 Column 1" />
</TableRow>
<!– Drugi red sa 2 kolone –>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 2 Column 1" />
<Button
android:id="@+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 2 Column 2" />
</TableRow>
<!– Treci red sa 3 kolone –>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 3 Column 1" />
<Button
android:id="@+id/button5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 3Column 2" />
<Button
android:id="@+id/button6"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 3 Column 3" />
</TableRow>
<!– Cetvrti red sa 4 kolone –>
<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="@+id/button7"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 4 Column 1" />
<Button
android:id="@+id/button8"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 4 Column 2" />
<Button
android:id="@+id/button9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 4 Column 3" />
<Button
android:id="@+id/button10"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Row 4 Column 4" />
</TableRow>
</TableLayout>
[/xml]
Može se primjetiti da sam hardkodovao stringove, što i nije dobra praksa, jer svaki string je potrebno definisati u strings.xml fajlu, o tome sam kratko pisao ovde.
Kada pokrenemo našu aplikaciju, dobijemo izgled sa slike ispod.
EDIT: Tek sam sad vidio da sam pisao na engleskom imena ovih dugmića, ali nadam se da je jasno da je row red, a column kolona.
Nadamo se da vam je jasno koliko je ovo moćan, a jednostavan layout, koji će vam omogućiti da na jednostavan način pravite izgled aplikacije kad god imate potrebu, da tabelarno predstavite neke podatke.
KOMENTARI: Ako imate kakvih pitanja ili nejasnoća, savjeta slobodno se javite u komentarima.
