LinearLayout akan mengatur view je dalam kolom atau baris. Jadi berbagai view anak akan diatur secara vertikal atau horizontal. Untuk melihat bagaimana cara kerja LinearLayout mari kita coba lihat kode berikut dalam file ‘activity_main.xml’:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hallo" />
</LinearLayout>
Di dalam file ‘activity_main.xml’ tersebut, kita lihat elemen ‘root’ adalah <LinearLayout> dan elemen tersebut memiliki elemen <TextView> di dalamnya. Elemen <LinearLayout> mengatur tatanan view-view yang ada di dalamnya ketika muncul di layar.
Masing-masing View dan ViewGroup memiliki sekumpulan atribut, beberapa yang umum digunakan adalah seperti berikut:
 |
| atribut yang umum digunakan dalam View dan ViewGroup |
Catatan:Beberapa atribut tersebut hanya bisa diterapkan bila suatu View ada di dalam ViewGroup tertentu. Misalnya, atribut layout_weight dan layout_gravity hanya bisa diterapkan bila suatu View ada entah di dalam LinearLayout maupun di dalam TableLayout.
Misalnya, lebar elemen akan mengisi seluruh lebar induknya (berarti seluruh lebar layar dalam hal ini) dengan menggunakan konstanta ‘match_parent’. Tingginya ditunjukkan dengan konstanta ‘wrap_content’, yang artinya bahwa tingginya adalah setinggi isinya (dalam hal ini teks yang ada di dalamnya). Bila kita tidak ingin mengisi seluruh baris, kita bisa men-set atribut_layout ke wrap_content, seperti berikut:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hallo" />
Kode tersebut akan men-set lebar view sama dengan lebar teks yang berasa di dalamnya.
Mari kita lihat kode layout berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="@string/hallo" />
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:onClick="onClick"/>
</LinearLayout>
Disini kita akan men-set lebar view ‘TextView’ dan view ‘Button’ dengan nilai absolut. Dalam hal ini, lebar untuk ‘TextView’ di-set ke 100dip, dan ‘Button’ ke 160dip. Sebelum kita melihat bagaimana view-view tersebut tampak di layar yang berbeda-beda dengan densitas pixel yang berbeda-beda, sangat penting untuk memahami bagaimana Android mendeteksi layar dengan berbagai macam ukuran dan densitas.
Gambar dibawah menunjukkan layar Nexus S. Layar ini memiliki diagonal layar 4 inchi, dengan lebar layar 2.04 inchi. Resolusinya 480 (lebar) x 800 (tinggi) dalam pixel. Dengan 480 pixel tersebar dalam lebar 2.04 inchi, hasil densitas pixelnya adalah sekitar 235 dpi.
Seperti kita lihat dari gambar di atas, densitas pixel dari layar tersebut bisa berbeda-beda menurut ukuran dan resolusi layar tersebut.
Android akan mendefinisikan dan mengenali empat macam densitas layar:
- Low density (ldpi) – 120 dpi
- Medium density (mdpi) – 160 dpi
- High density (hdpi) – 240 dpi
- Extra High density (xhdpi) – 320 dpi
Perangkat kita pasti akan masuk ke salah satu macam densitas yang didefinisikan di atas tersebut. Misalnya, Nexus S dianggap sebagai perangkat hdpi karena densitas pixelnya mendekati 240 dpi. Tetapi HTC Hero memiliki ukuran layar diagonal 3.2 inchi dan resolusinya 320 x 480. Densitas pixelnya akan sekitar 180 dpi. Karena itu, perangkat ini akan dianggap sebagai perangkat mdpi, karena densitas pixelnya mendekati 160 dpi.
Untuk menguji bagaimana view-view didefiniskan dalam file XML akan muncul bila ditampilkan pada berbagai layar densitas yang berbeda-beda, kita buat dua AVD dengan resolusi layar yang berbeda. Berikut adalah gambar perangkat lain dengan resolusi 320 x 480 dan densitas 180.
 |
| layar dengan resolusi 320 x 480 |
Dengan menggunakan satuan dp kita bisa memastikan bahwa view-view kita akan selalu tampil dengan proporsional yang benar tanpa peduli dengan densitas layarnya – Android akan secara otomatis mennyesuaikan skala ukuran view tergantung pada densitas layarnya. Dengan menggunakan view ‘Button’ sebagai contohnya, bila ditampilkan pada layar 180 dpi (catatan: layar 180 dpi akan diperlakukan sama dengan layar 160 dpi), lebarnya akan menjadi 160 pixel. Tetapi, bila ditampilkan pada layar 235 dpi (akan diperlakukan sama dengan 240 dpi), maka lebarnya akan menjadi 240 pixel.
Bagaimana bila alih-alih menggunakan dp, kita sekarang menentukan ukuran menggunakan pixel (px)?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">
<TextView
android:layout_width="100px"
android:layout_height="wrap_content"
android:text="@string/hallo" />
<Button
android:layout_width="160px"
android:layout_height="wrap_content"
android:text="Tombol"
android:onClick="onClick"/>
</LinearLayout>
Gambar di bawah ini menunjukkan tampilan pada layar 235 dpi dan layar 180 dpi dengan view yang sama. Dalam hal ini Android tidak melakukan konversi apapun, karena ukuran ditetapkan dalam pixel. Secara umum (dengan ukuran layar yang sama), bila kita menggunakan pixel untuk menetapkan ukuran view, view tersebut akan nampak lebih kecil pada perangkat dengan layar dpi yang tinggi, dibandingkan dengan yang memiliki dpi yang lebih kecil.
 |
| Ukuran menggunakan px |
Kode dalam contoh sebelumnya juga menetapkan orientasi layout adalah vertical:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">
Default dari orientasi layout adalah horizontal, jadi bila kita tidak menuliskan atribut ‘android:orientation’ tampilan view kita akan seperti berikut:
 |
| Orientasi horizontal |
Dalam LinearLayout, kita bisa menerapkan atribut ‘layout_weight’ dan ‘layout_gravity’ ke view yang ada di dalamnya, seperti contoh modifikasi berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:layout_gravity="left"
android:layout_weight="1"/>
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:layout_gravity="center"
android:layout_weight="2"/>
<Button
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:layout_gravity="right"
android:layout_weight="3"/>
</LinearLayout>
 |
| weight dan gravity |
Gambar di atas menunukkan posisi dari view dan juga tingginya. Atribut layout_gravity menunjukkan posisi dimana arah view ditarik, dan atribut layout_weight menentukan distribusi ruang yang ada. Dalam kode di atas, tiga tombol menempati 16.6% (1 / (1+2+3) * 100), dan 50% (3 / (1+2+3) * 100) dari tinggi yang tersedia, secara berturut-turut.
Bila kita mengubah orientasi LinearLayout ke horizontal, kita perlu mengubah lebar dari masing-masing view ke 0 dp, dan view-view tersebut akan ditampilkan seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:layout_gravity="left"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:layout_gravity="center_horizontal"
android:layout_weight="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Tombol"
android:layout_gravity="right"
android:layout_weight="3"/>
</LinearLayout>
 |
No comments:
Post a Comment