JOB 7 PPB UserInterface

USER INTERFACE

Layout Manager

Untuk meletakan komponen (view) pada layar, android menggunakan layout manager. Karena ukuran layar device Android sangat beragam, tidak ada peletakan posisi widget secara akurat per pixel.

Terdapat empat jenis layout manager yang memiliki fungsi  masing-masing. LinearLayout, TableLayout, RelativeLayout dan FrameLayout. Berikut akan dibahas lebih rinci untuk setiap layout.

1.  RelativeLayout

RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya. Sebagai contoh, dua widget pada gambar di bawah. EditText posisinya relatif terhadap textView nama.

Contoh deklarasinya adalah sebagai berikut:

Untuk layout_width dan layout_height ada dua pilihan: match_parent (view berusaha sebesar parent) dan wrap_content (view hanya berusaha sebesar content yang berada di dalamnya). Sedangkan padding menyatakan jarak antara pinggir layar dengan komponen.

Perhatikan penggunaan atribut layout_toRightOf  yang menyatakan bahwa EditText berada disebelah kanan label.  Sedangkan atribut layout_baseLine digunakan agar TextView dan EditText  aligned. Jika layout_baseLine dihapus efeknya akan sebagai berikut (Text View terlalu tinggi posisinya):

Beberapa atribut lain yang mengatur posisi widget dibandingkan dengan widget lain adalah:

• android:layout_above
• android:layout_below
• android:layout_toLeftOf
• android:layout_toRightOf.

Untuk mengatur posisi ada tambahan lima atribut: android: layout_alignTop, android:layout_alignBottom, android:layout_alignLeft, android:layout_alignBaseline

Contoh jika ingin menambahkan button sehingga posisinya sebagai berikut:

Maka deklarasi buttonnya adalah sebagai berikut:

 

Artinya button tersebut dibawah dan disebelah kanan EditText.

Widget juga dapat diatur berdasarkan gravity android:layout_gravity ada beberapa pilihan untuk gravity ini: left, right, center_horizontal, center_vertical, bottom, top.  Gravity ini juga berlaku untuk layout manager yang lain. Berikut adalah contohnya:

Hasilnya:

Silahkan bereksperimen dengan berbagai setting atribut layout.

2.  TableLayout

Untuk memilih layout manager, selain dengan cara manual dapat juga ditentukan membuat layout (File à New à Other à Android XML Layout File). Saat muncul dialog berikut, pilih Root Element sebagai TableLayout.

TableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip seperti Table yang digunakan di HTML.  Pengguna mendefinisikan baris dengan tag <TableRow> dan sistem secara otomatis mendefinisikan kolomnya. Contoh deklarasi berikut:

Hasilnya adalah sebagai berikut. Bayangkan sebagai sebuah tabel dengan dua kolom dan dua baris.

Misalnya bila ingin agar   EditText  sampai ke bagian belakang, maka tambahkan android:stretchColumns="1" pada TableLayout.  Maka  kolom 1 akan terisi penuh.

Hasilnya:

Untuk menambahkan widget di kolom tertentu, gunakan aandroid:layout_column. Misalnya kita akan menambahkan TextView di kolom 1 (ingat kolom dimulai dari 0). Ini bisa dilakukan dengan menggunakan atribut android:layout_column. Tanpa atribut ini,  TextView akan muncul di kolom 0

 

Hasilnya sebagai berikut:

3.  Frame Layout

Framelayout digunakan untuk menampilkan satu komponen dalam satu layar. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk, walaupun posisi widget dapat diatur dengan gravity.  Layout lain bias ditambahkan sebagai child di dalam frame layout.

Contoh untuk deklarasi berikut menampilkan dua ImageView (pastikan file image telah disimpan di direktori [project]/res/drawable-mdpi ). Pada contoh berikut, nama file photonya adalah waden.