1 page.title=Layout 2 page.tags=view,viewgroup 3 @jd:body 4 5 <div id="qv-wrapper"> 6 <div id="qv"> 7 <h2>Dalam dokumen ini</h2> 8 <ol> 9 <li><a href="#write">Tulis XML</a></li> 10 <li><a href="#load">Muat Sumber Daya XML</a></li> 11 <li><a href="#attributes">Atribut</a> 12 <ol> 13 <li><a href="#id">ID</a></li> 14 <li><a href="#layout-params">Parameter Layout</a></li> 15 </ol> 16 </li> 17 <li><a href="#Position">Posisi Layout</a></li> 18 <li><a href="#SizePaddingMargins">Ukuran, Pengisi, dan Margin</a></li> 19 <li><a href="#CommonLayouts">Layout Umum</a></li> 20 <li><a href="#AdapterViews">Membangun Layout dengan Adaptor</a> 21 <ol> 22 <li><a href="#FillingTheLayout">Mengisi tampilan adaptor dengan data</a></li> 23 <li><a href="#HandlingUserSelections">Menangani kejadian klik</a></li> 24 </ol> 25 </li> 26 </ol> 27 28 <h2>Kelas-kelas utama</h2> 29 <ol> 30 <li>{@link android.view.View}</li> 31 <li>{@link android.view.ViewGroup}</li> 32 <li>{@link android.view.ViewGroup.LayoutParams}</li> 33 </ol> 34 35 <h2>Lihat juga</h2> 36 <ol> 37 <li><a href="{@docRoot}training/basics/firstapp/building-ui.html">Membangun Antarmuka Pengguna 38 Sederhana</a></li> </div> 39 </div> 40 41 <p>Layout mendefinisikan struktur visual untuk antarmuka pengguna, seperti UI sebuah <a href="{@docRoot}guide/components/activities.html">aktivitas</a> atau <a href="{@docRoot}guide/topics/appwidgets/index.html">widget aplikasi</a>. 42 Anda dapat mendeklarasikan layout dengan dua cara:</p> 43 <ul> 44 <li><strong>Deklarasikan elemen UI dalam XML</strong>. Android menyediakan sebuah kosakata XML 45 sederhana yang sesuai dengan kelas dan subkelas View, seperti halnya untuk widget dan layout.</li> 46 <li><strong>Buat instance elemen layout saat runtime</strong>. Aplikasi Anda 47 bisa membuat objek View dan ViewGroup (dan memanipulasi propertinya) lewat program. </li> 48 </ul> 49 50 <p>Kerangka kerja Android memberi Anda fleksibilitas untuk menggunakan salah satu atau kedua metode ini guna mendeklarasikan dan mengelola UI aplikasi Anda. Misalnya, Anda bisa mendeklarasikan layout default aplikasi Anda dalam XML, termasuk elemen-elemen layar yang akan muncul di dalamnya dan di propertinya. Anda nanti bisa menambahkan kode dalam aplikasi yang akan memodifikasi status objek layar, termasuk yang dideklarasikan dalam XML, saat runtime. </p> 51 52 <div class="sidebox-wrapper"> 53 <div class="sidebox"> 54 <ul> 55 <li><a href="{@docRoot}tools/sdk/eclipse-adt.html">ADT 56 Plugin for Eclipse</a> menawarkan preview layout XML — 57 Anda dengan file XML yang dibuka, pilih tab <strong>Layout</strong>.</li> 58 <li>Anda juga harus mencoba alat 59 <a href="{@docRoot}tools/debugging/debugging-ui.html#hierarchyViewer">Hierarchy Viewer</a>, 60 untuk merunut layout — alat ini akan menampilkan nilai-nilai properti layout, 61 menggambar bentuk kerangka dengan indikator pengisi/margin, dan tampilan yang dirender penuh selagi 62 Anda merunut pada emulator atau perangkat.</li> 63 <li>Alat <a href="{@docRoot}tools/debugging/debugging-ui.html#layoutopt">layoutopt</a> memungkinkan 64 Anda menganalisis layout dan hierarki dengan untuk mengetahui ketidakefisienan atau masalah lainnya.</li> 65 </div> 66 </div> 67 68 <p>Keuntungan mendeklarasikan UI dalam XML adalah karena hal ini memungkinkan Anda memisahkan penampilan aplikasi dari kode yang mengontrol perilakunya dengan lebih baik. Keterangan UI Anda bersifat eksternal bagi kode aplikasi Anda, yang berarti bahwa Anda bisa memodifikasi atau menyesuaikannya tanpa harus memodifikasi dan mengompilasi ulang kode sumber. Misalnya, Anda bisa membuat layout XML untuk berbagai orientasi layar, berbagai ukuran layar perangkat, dan berbagai bahasa. Selain itu, mendeklarasikan layout dalam XML akan mempermudah Anda memvisualisasikan struktur UI, sehingga lebih mudah merunut masalahnya. Karena itu, dokumen ini berfokus pada upaya mengajari Anda cara mendeklarasikan layout dalam XML. Jika Anda 69 tertarik dalam membuat instance objek View saat runtime, lihat referensi kelas {@link android.view.ViewGroup} dan 70 {@link android.view.View}.</p> 71 72 <p>Secara umum, kosakata XML untuk mendeklarasikan elemen UI mengikuti dengan sangat mirip struktur serta penamaan kelas dan metode, dengan nama elemen dipadankan dengan nama kelas dan nama atribut dipadankan dengan metode. Sebenarnya, pemadanan ini kerap kali begitu jelas sehingga Anda bisa menebak atribut XML yang berpadanan dengan sebuah metode kelas, atau menebak kelas yang berpadanan dengan sebuah elemen XML. Akan tetapi, perhatikan bahwa tidak semua kosakata identik. Dalam beberapa kasus, ada sedikit perbedaan penamaan. Misalnya 73 , elemen EditText memiliki atribut <code>text</code> yang berpadanan dengan 74 <code>EditText.setText()</code>. </p> 75 76 <p class="note"><strong>Tip:</strong> Ketahui selengkapnya berbagai tipe layout dalam <a href="{@docRoot}guide/topics/ui/layout-objects.html">Objek 77 Layout Umum</a>. Ada juga sekumpulan tutorial tentang cara membangun berbagai layout dalam panduan tutorial 78 <a href="{@docRoot}resources/tutorials/views/index.html">Hello Views</a>.</p> 79 80 <h2 id="write">Tulis XML</h2> 81 82 <p>Dengan menggunakan kosakata XML Android, Anda bisa mendesain secara cepat layout UI dan elemen layar yang dimuatnya, sama dengan cara membuat halaman web dalam HTML — dengan serangkaian elemen tersarang. </p> 83 84 <p>Tiap file layout harus berisi persis satu elemen akar, yang harus berupa sebuah objek View atau ViewGroup. Setelah mendefinisikan elemen akar, Anda bisa menambahkan objek atau widget layout tambahan sebagai elemen anak untuk membangun hierarki View yang mendefinisikan layout Anda secara bertahap. Misalnya, inilah layout XML yang menggunakan {@link android.widget.LinearLayout} 85 vertikal untuk menyimpan {@link android.widget.TextView} dan {@link android.widget.Button}:</p> 86 <pre> 87 <?xml version="1.0" encoding="utf-8"?> 88 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 89 android:layout_width="match_parent" 90 android:layout_height="match_parent" 91 android:orientation="vertical" > 92 <TextView android:id="@+id/text" 93 android:layout_width="wrap_content" 94 android:layout_height="wrap_content" 95 android:text="Hello, I am a TextView" /> 96 <Button android:id="@+id/button" 97 android:layout_width="wrap_content" 98 android:layout_height="wrap_content" 99 android:text="Hello, I am a Button" /> 100 </LinearLayout> 101 </pre> 102 103 <p>Setelah Anda mendeklarasikan layout dalam XML, simpanlah file dengan ekstensi <code>.xml</code>, 104 dalam direktori <code>res/layout/</code> proyek Android, sehingga nanti bisa dikompilasi dengan benar. </p> 105 106 <p>Informasi selengkapnya tentang sintaks untuk file XML layout tersedia dalam dokumen <a href="{@docRoot}guide/topics/resources/layout-resource.html">Sumber Daya Layout</a>.</p> 107 108 <h2 id="load">Muat Sumber Daya XML</h2> 109 110 <p>Saat mengompilasi aplikasi, masing-masing file layout XML akan dikompilasi dalam sebuah sumber daya 111 {@link android.view.View}. Anda harus memuat sumber daya layout dari kode aplikasi, dalam implementasi 112 callback {@link android.app.Activity#onCreate(android.os.Bundle) Activity.onCreate()}. 113 Lakukan dengan memanggil <code>{@link android.app.Activity#setContentView(int) setContentView()}</code>, 114 dengan meneruskan acuan ke sumber daya layout berupa: 115 <code>R.layout.<em>layout_file_name</em></code>. 116 Misalnya, jika XML layout Anda disimpan sebagai <code>main_layout.xml</code>, Anda akan memuatnya 117 untuk Activity seperti ini:</p> 118 <pre> 119 public void onCreate(Bundle savedInstanceState) { 120 super.onCreate(savedInstanceState); 121 setContentView(R.layout.main_layout); 122 } 123 </pre> 124 125 <p>Metode callback <code>onCreate()</code> dalam Activity dipanggil oleh kerangka kerja Android saat 126 Activity Anda dijalankan (lihat diskusi tentang daur hidup, dalam dokumen 127 <a href="{@docRoot}guide/components/activities.html#Lifecycle">Aktivitas</a> 128 ).</p> 129 130 131 <h2 id="attributes">Atribut</h2> 132 133 <p>Setiap objek View dan ViewGroup mendukung variasi atribut XML-nya sendiri. 134 Sebagian atribut bersifat spesifik untuk objek View (misalnya, TextView mendukung atribut <code>textSize</code> 135 ), namun atribut ini juga diwarisi oleh sembarang objek View yang dapat memperluas kelas ini. 136 Sebagian atribut bersifat umum untuk semua objek View, karena diwarisi dari kelas View akar (seperti 137 atribut <code>id</code>). Dan, atribut lain dianggap sebagai "parameter layout" yaitu 138 atribut yang menjelaskan orientasi layout tertentu dari objek View, seperti yang didefinisikan oleh objek ViewGroup induk 139 dari objek itu.</p> 140 141 <h3 id="id">ID</h3> 142 143 <p>Objek View apa saja dapat memiliki ID integer yang dikaitkan dengannya, untuk mengidentifikasi secara unik View dalam pohon. 144 Bila aplikasi dikompilasi, ID ini akan diacu sebagai integer, namun ID biasanya 145 ditetapkan dalam file XML layout sebagai string, dalam atribut <code>id</code>. 146 Ini atribut XML yang umum untuk semua objek View 147 (yang didefinisikan oleh kelas {@link android.view.View}) dan Anda akan sering sekali menggunakannya. 148 Sintaks untuk ID dalam tag XML adalah:</p> 149 <pre>android:id="@+id/my_button"</pre> 150 151 <p>Simbol "at" (@) pada awal string menunjukkan parser XML harus mengurai dan memperluas 152 ID string selebihnya dan mengenalinya sebagai ID sumber daya. Simbol tanda tambah (+) berarti ini nama sumber daya baru yang harus 153 dibuat dan ditambahkan ke sumber daya kita (dalam file <code>R.java</code>). Ada sejumlah sumber daya ID lain yang 154 ditawarkan oleh kerangka kerja Android. Saat mengacu sebuah ID sumber daya Android, Anda tidak memerlukan simbol tanda tambah, 155 namun harus menambahkan namespace paket <code>android</code>, sehingga:</p> 156 <pre>android:id="@android:id/empty"</pre> 157 <p>Dengan namespace paket <code>android</code> yang tersedia, kita sekarang mengacu ID dari kelas sumber daya <code>android.R</code> 158 , daripada kelas sumber daya lokal.</p> 159 160 <p>Untuk membuat tampilan dan mengacunya dari aplikasi, pola yang umum adalah:</p> 161 <ol> 162 <li>Mendefinisikan tampilan/widget dalam file layout dan memberinya ID unik: 163 <pre> 164 <Button android:id="@+id/my_button" 165 android:layout_width="wrap_content" 166 android:layout_height="wrap_content" 167 android:text="@string/my_button_text"/> 168 </pre> 169 </li> 170 <li>Kemudian buat instance objek tampilan dan tangkap instance itu dari layout 171 (biasanya dalam metode <code>{@link android.app.Activity#onCreate(Bundle) onCreate()}</code>): 172 <pre> 173 Button myButton = (Button) findViewById(R.id.my_button); 174 </pre> 175 </li> 176 </ol> 177 <p>Mendefinisikan ID untuk objek tampilan adalah penting saat membuat {@link android.widget.RelativeLayout}. 178 Dalam layout relatif, tampilan saudara bisa mendefinisikan layout secara relatif terhadap tampilan saudara lainnya, 179 yang diacu melalui ID unik.</p> 180 <p>ID tidak perlu unik di seluruh pohon, namun harus 181 unik di bagian pohon yang Anda cari (yang mungkin sering kali seluruh pohon, jadi lebih baik 182 benar-benar unik bila memungkinkan).</p> 183 184 185 <h3 id="layout-params">Parameter Layout</h3> 186 187 <p>Atribut layout XML bernama <code>layout_<em>something</em></code> mendefinisikan 188 parameter layout View yang cocok untuk ViewGroup tempatnya berada.</p> 189 190 <p>Setiap kelas ViewGroup mengimplementasikan kelas tersarang yang memperluas {@link 191 android.view.ViewGroup.LayoutParams}. Subkelas ini 192 berisi tipe properti yang mendefinisikan ukuran dan posisi masing-masing tampilan anak, sebagaimana 193 mestinya untuk grup tampilan. Seperti yang bisa Anda lihat dalam gambar 1, 194 grup tampilan induk mendefinisikan parameter layout untuk masing-masing tampilan anak (termasuk grup tampilan anak).</p> 195 196 <img src="{@docRoot}images/layoutparams.png" alt="" /> 197 <p class="img-caption"><strong>Gambar 1.</strong> Visualisasi hierarki tampilan dengan parameter layout 198 yang dikaitkan dengan tiap tampilan.</p> 199 200 <p>Perhatikan bahwa setiap subkelas LayoutParams memiliki sintaksnya sendiri untuk menetapkan 201 nilai-nilai. Tiap elemen anak harus mendefinisikan LayoutParams yang semestinya bagi induknya, 202 meskipun elemen itu bisa juga mendefinisikan LayoutParams untuk anak-anaknya sendiri. </p> 203 204 <p>Semua grup tampilan berisi lebar dan tinggi (<code>layout_width</code> dan 205 <code>layout_height</code>), dan masing-masing tampilan harus mendefinisikannya. Banyak 206 LayoutParams yang juga menyertakan margin dan border opsional. <p> 207 208 <p>Anda bisa menetapkan lebar dan tinggi dengan ukuran persis, meskipun Anda mungkin 209 tidak ingin sering-sering melakukannya. Lebih sering, Anda akan menggunakan salah satu konstanta ini untuk 210 mengatur lebar atau tinggi: </p> 211 212 <ul> 213 <li><var>wrap_content</var> memberi tahu tampilan Anda agar menyesuaikan sendiri ukurannya dengan dimensi 214 yang dibutuhkan oleh isinya.</li> 215 <li><var>match_parent</var> (bernama <var>fill_parent</var> sebelum API Level 8) 216 memberi tahu tampilan Anda agar menjadi sebesar yang diperbolehkan oleh grup tampilan induknya.</li> 217 </ul> 218 219 <p>Secara umum, menetapkan lebar dan tinggi layout dengan satuan mutlak seperti 220 piksel tidaklah disarankan. Melainkan dengan menggunakan ukuran relatif seperti 221 satuan piksel yang tidak bergantung pada kerapatan (<var>dp</var>), <var>wrap_content</var>, atau 222 <var>match_parent</var>, adalah sebuah pendekatan yang lebih baik, karena membantu memastikan bahwa 223 aplikasi Anda akan ditampilkan dengan benar pada berbagai ukuran layar perangkat. 224 Tipe ukuran yang diterima didefinisikan dalam dokumen 225 <a href="{@docRoot}guide/topics/resources/available-resources.html#dimension"> 226 Sumber Daya yang Tersedia</a>.</p> 227 228 229 <h2 id="Position">Posisi Layout</h2> 230 <p> 231 Geometri tampilan adalah persegi panjang. Sebuah tampilan memiliki lokasi, 232 yang dinyatakan berupa sepasang koordinat <em>kiri</em> dan <em>atas</em>, dan 233 dua dimensi, yang dinyatakan berupa lebar dan tinggi. Satuan untuk lokasi 234 dan dimensi adalah piksel. 235 </p> 236 237 <p> 238 Lokasi tampilan dapat diambil dengan memanggil metode 239 {@link android.view.View#getLeft()} dan {@link android.view.View#getTop()}. Metode terdahulu menghasilkan koordinat kiri, atau X, 240 persegi panjang yang mewakili tampilan. Metode selanjutnya menghasilkan koordinat 241 atas, atau Y, persegi panjang yang mewakili tampilan. Kedua metode ini 242 menghasilkan lokasi tampilan relatif terhadap induknya. Misalnya, 243 bila <code>getLeft()</code> menghasilkan 20, berarti tampilan berlokasi 20 piksel ke 244 kanan dari tepi kiri induk langsungnya. 245 </p> 246 247 <p> 248 Selain itu, beberapa metode praktis ditawarkan untuk menghindari komputasi yang tidak perlu, 249 yakni {@link android.view.View#getRight()} dan {@link android.view.View#getBottom()}. 250 Kedua metode ini menghasilkan koordinat tepi kanan dan bawah 251 persegi panjang yang mewakili tampilan. Misalnya, memanggil {@link android.view.View#getRight()} 252 serupa dengan komputasi berikut: <code>getLeft() + getWidth()</code>. 253 </p> 254 255 256 <h2 id="SizePaddingMargins">Ukuran, Pengisi, dan Margin</h2> 257 <p> 258 Ukuran tampilan dinyatakan dengan lebar dan tinggi. Tampilan sebenarnya 259 memiliki dua pasang nilai lebar dan tinggi. 260 </p> 261 262 <p> 263 Sepasang pertama disebut <em>lebar terukur</em> dan 264 <em>tinggi terukur</em>. Dimensi ini mendefinisikan seberapa besar tampilan yang diinginkan 265 dalam induknya. Dimensi 266 terukur bisa diperoleh dengan memanggil {@link android.view.View#getMeasuredWidth()} 267 dan {@link android.view.View#getMeasuredHeight()}. 268 </p> 269 270 <p> 271 Sepasang kedua cukup disebut dengan <em>lebar</em> dan <em>tinggi</em>, atau 272 kadang-kadang <em>lebar penggambaran</em> dan <em>tinggi penggambaran</em>. Dimensi-dimensi ini 273 mendefinisikan ukuran tampilan sebenarnya pada layar, saat digambar dan 274 setelah layout. Nilai-nilai ini mungkin, namun tidak harus, berbeda dengan 275 lebar dan tinggi terukur. Lebar dan tinggi bisa diperoleh dengan memanggil 276 {@link android.view.View#getWidth()} dan {@link android.view.View#getHeight()}. 277 </p> 278 279 <p> 280 Untuk mengukur dimensinya, tampilan akan memperhitungkan pengisinya (padding). Pengisi 281 dinyatakan dalam piksel untuk bagian kiri, atas, kanan, dan bawah tampilan. 282 Pengisi bisa digunakan untuk meng-offset isi tampilan dengan 283 piksel dalam jumlah tertentu. Misalnya, pengisi kiri sebesar 2 akan mendorong isi tampilan sebanyak 284 2 piksel ke kanan dari tepi kiri. Pengisi bisa diatur menggunakan 285 metode {@link android.view.View#setPadding(int, int, int, int)} dan diketahui dengan memanggil 286 {@link android.view.View#getPaddingLeft()}, {@link android.view.View#getPaddingTop()}, 287 {@link android.view.View#getPaddingRight()}, dan {@link android.view.View#getPaddingBottom()}. 288 </p> 289 290 <p> 291 Meskipun bisa mendefinisikan pengisi, tampilan tidak menyediakan dukungan untuk 292 margin. Akan tetapi, grup tampilan menyediakan dukungan tersebut. Lihat 293 {@link android.view.ViewGroup} dan 294 {@link android.view.ViewGroup.MarginLayoutParams} untuk informasi lebih jauh. 295 </p> 296 297 <p>Untuk informasi selengkapnya tentang dimensi, lihat 298 <a href="{@docRoot}guide/topics/resources/more-resources.html#Dimension">Nilai-Nilai Dimensi</a>. 299 </p> 300 301 302 303 304 305 306 <style type="text/css"> 307 div.layout { 308 float:left; 309 width:200px; 310 margin:0 0 20px 20px; 311 } 312 div.layout.first { 313 margin-left:0; 314 clear:left; 315 } 316 </style> 317 318 319 320 321 <h2 id="CommonLayouts">Layout Umum</h2> 322 323 <p>Tiap subkelas dari kelas {@link android.view.ViewGroup} menyediakan cara unik untuk menampilkan 324 tampilan yang Anda sarangkan di dalamnya. Di bawah ini adalah beberapa tipe layout lebih umum yang dibuat 325 ke dalam platform Android.</p> 326 327 <p class="note"><strong>Catatan:</strong> Walaupun Anda bisa menyarangkan satu atau beberapa layout dalam 328 layout lain untuk mendapatkan desain UI, Anda harus berusaha menjaga hierarki layout sedangkal 329 mungkin. Layout Anda akan digambar lebih cepat jika memiliki layout tersarang yang lebih sedikit (hierarki tampilan yang melebar 330 lebih baik daripada hierarki tampilan yang dalam).</p> 331 332 <!-- 333 <h2 id="framelayout">FrameLayout</h2> 334 <p>{@link android.widget.FrameLayout FrameLayout} is the simplest type of layout 335 object. It's basically a blank space on your screen that you can 336 later fill with a single object — for example, a picture that you'll swap in and out. 337 All child elements of the FrameLayout are pinned to the top left corner of the screen; you cannot 338 specify a different location for a child view. Subsequent child views will simply be drawn over 339 previous ones, 340 partially or totally obscuring them (unless the newer object is transparent). 341 </p> 342 --> 343 344 345 <div class="layout first"> 346 <h4><a href="layout/linear.html">Layout Linier</a></h4> 347 <a href="layout/linear.html"><img src="{@docRoot}images/ui/linearlayout-small.png" alt="" /></a> 348 <p>Layout yang mengatur anak-anaknya menjadi satu baris horizontal atau vertikal. Layout ini 349 akan membuat scrollbar jika panjang jendela melebihi panjang layar.</p> 350 </div> 351 352 <div class="layout"> 353 <h4><a href="layout/relative.html">Layout Relatif</a></h4> 354 <a href="layout/relative.html"><img src="{@docRoot}images/ui/relativelayout-small.png" alt="" /></a> 355 <p>Memungkinkan Anda menentukan lokasi objek anak relatif terhadap satu sama lain (anak A di 356 kiri anak B) atau terhadap induk (disejajarkan dengan atas induknya).</p> 357 </div> 358 359 <div class="layout"> 360 <h4><a href="{@docRoot}guide/webapps/webview.html">Tampilan Web</a></h4> 361 <a href="{@docRoot}guide/webapps/webview.html"><img src="{@docRoot}images/ui/webview-small.png" alt="" /></a> 362 <p>Menampilkan halaman web.</p> 363 </div> 364 365 366 367 368 <h2 id="AdapterViews" style="clear:left">Membangun Layout dengan Adaptor</h2> 369 370 <p>Bila isi layout bersifat dinamis atau tidak dipastikan sebelumnya, Anda bisa menggunakan layout yang menjadi 371 subkelas {@link android.widget.AdapterView} untuk mengisi layout dengan tampilan saat runtime. 372 Subkelas dari kelas {@link android.widget.AdapterView} menggunakan {@link android.widget.Adapter} untuk 373 mengikat data ke layoutnya. {@link android.widget.Adapter} berfungsi sebagai penghubung antara sumber data 374 dan layout{@link android.widget.AdapterView}—{@link android.widget.Adapter} 375 menarik data (dari suatu sumber seperti larik (array) atau query database) dan mengubah setiap entri 376 menjadi tampilan yang bisa ditambahkan ke dalam layout {@link android.widget.AdapterView}.</p> 377 378 <p>Layout umum yang didukung oleh adaptor meliputi:</p> 379 380 <div class="layout first"> 381 <h4><a href="layout/listview.html">Tampilan Daftar</a></h4> 382 <a href="layout/listview.html"><img src="{@docRoot}images/ui/listview-small.png" alt="" /></a> 383 <p>Menampilkan daftar kolom tunggal yang bergulir.</p> 384 </div> 385 386 <div class="layout"> 387 <h4><a href="layout/gridview.html">Tampilan Petak</a></h4> 388 <a href="layout/gridview.html"><img src="{@docRoot}images/ui/gridview-small.png" alt="" /></a> 389 <p>Menampilkan petak bergulir yang terdiri atas kolom dan baris.</p> 390 </div> 391 392 393 394 <h3 id="FillingTheLayout" style="clear:left">Mengisi tampilan adaptor dengan data</h3> 395 396 <p>Anda bisa mengisi {@link android.widget.AdapterView} seperti {@link android.widget.ListView} atau 397 {@link android.widget.GridView} dengan mengikat instance {@link android.widget.AdapterView} ke 398 {@link android.widget.Adapter}, yang akan mengambil data dari sumber eksternal dan membuat {@link 399 android.view.View} yang mewakili tiap entri data.</p> 400 401 <p>Android menyediakan beberapa subkelas {@link android.widget.Adapter} yang berguna untuk 402 menarik berbagai jenis data dan membangun tampilan untuk {@link android.widget.AdapterView}. Dua 403 adaptor yang paling umum adalah:</p> 404 405 <dl> 406 <dt>{@link android.widget.ArrayAdapter}</dt> 407 <dd>Gunakan adaptor ini bila sumber data Anda berupa larik. Secara default, {@link 408 android.widget.ArrayAdapter} akan membuat tampilan untuk tiap elemen larik dengan memanggil {@link 409 java.lang.Object#toString()} pada tiap elemen dan menempatkan isinya dalam {@link 410 android.widget.TextView}. 411 <p>Misalnya, jika Anda memiliki satu larik string yang ingin ditampilkan dalam {@link 412 android.widget.ListView}, buatlah {@link android.widget.ArrayAdapter} baru dengan konstruktor 413 untuk menentukan layout setiap string dan larik string:</p> 414 <pre> 415 ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 416 android.R.layout.simple_list_item_1, myStringArray); 417 </pre> 418 <p>Argumen-argumen untuk konstruktor ini adalah:</p> 419 <ul> 420 <li>{@link android.content.Context} aplikasi Anda</li> 421 <li>Layout yang berisi {@link android.widget.TextView} untuk tiap string dalam larik</li> 422 <li>Larik string</li> 423 </ul> 424 <p>Kemudian tinggal panggil 425 {@link android.widget.ListView#setAdapter setAdapter()} pada {@link android.widget.ListView} Anda:</p> 426 <pre> 427 ListView listView = (ListView) findViewById(R.id.listview); 428 listView.setAdapter(adapter); 429 </pre> 430 431 <p>Untuk menyesuaikan penampilan setiap item, Anda bisa mengesampingkan metode {@link 432 java.lang.Object#toString()} bagi objek dalam larik Anda. Atau, untuk membuat tampilan tiap 433 elemen selain {@link android.widget.TextView} (misalnya, jika Anda menginginkan 434 {@link android.widget.ImageView} bagi setiap item larik), perluas kelas {@link 435 android.widget.ArrayAdapter} dan kesampingkan {@link android.widget.ArrayAdapter#getView 436 getView()} agar memberikan tipe tampilan yang Anda inginkan bagi tiap item.</p> 437 438 </dd> 439 440 <dt>{@link android.widget.SimpleCursorAdapter}</dt> 441 <dd>Gunakan adaptor ini bila data Anda berasal dari {@link android.database.Cursor}. Saat 442 menggunakan {@link android.widget.SimpleCursorAdapter}, Anda harus menentukan layout yang akan digunakan untuk tiap 443 baris dalam {@link android.database.Cursor} dan di kolom mana di {@link android.database.Cursor} 444 harus memasukkan tampilan layout. Misalnya, jika Anda ingin untuk membuat daftar 445 nama orang dan nomor telepon, Anda bisa melakukan query yang menghasilkan {@link 446 android.database.Cursor} yang berisi satu baris untuk tiap orang dan kolom-kolom untuk nama dan 447 nomor. Selanjutnya Anda membuat larik string yang menentukan kolom dari {@link 448 android.database.Cursor} yang Anda inginkan dalam layout untuk setiap hasil dan larik integer yang menentukan 449 tampilan yang sesuai untuk menempatkan masing-masing kolom:</p> 450 <pre> 451 String[] fromColumns = {ContactsContract.Data.DISPLAY_NAME, 452 ContactsContract.CommonDataKinds.Phone.NUMBER}; 453 int[] toViews = {R.id.display_name, R.id.phone_number}; 454 </pre> 455 <p>Bila Anda membuat instance {@link android.widget.SimpleCursorAdapter}, teruskan layout yang akan digunakan untuk 456 setiap hasil, {@link android.database.Cursor} yang berisi hasil tersebut, dan dua larik ini:</p> 457 <pre> 458 SimpleCursorAdapter adapter = new SimpleCursorAdapter(this, 459 R.layout.person_name_and_number, cursor, fromColumns, toViews, 0); 460 ListView listView = getListView(); 461 listView.setAdapter(adapter); 462 </pre> 463 <p>{@link android.widget.SimpleCursorAdapter} kemudian membuat tampilan untuk tiap baris dalam 464 {@link android.database.Cursor} dengan layout yang disediakan dengan memasukkan setiap item {@code 465 fromColumns} ke dalam tampilan {@code toViews} yang sesuai.</p></dd> 466 </dl> 467 468 469 <p>Jika, selama aplikasi berjalan, Anda mengubah data sumber yang dibaca oleh 470 adaptor, maka Anda harus memanggil {@link android.widget.ArrayAdapter#notifyDataSetChanged()}. Hal ini akan 471 memberi tahu tampilan yang bersangkutan bahwa data telah berubah dan tampilan harus memperbarui dirinya sendiri.</p> 472 473 474 475 <h3 id="HandlingUserSelections">Menangani kejadian klik</h3> 476 477 <p>Anda bisa merespons kejadian klik pada setiap item dalam {@link android.widget.AdapterView} dengan 478 menerapkan antarmuka {@link android.widget.AdapterView.OnItemClickListener}. Misalnya:</p> 479 480 <pre> 481 // Create a message handling object as an anonymous class. 482 private OnItemClickListener mMessageClickedHandler = new OnItemClickListener() { 483 public void onItemClick(AdapterView parent, View v, int position, long id) { 484 // Do something in response to the click 485 } 486 }; 487 488 listView.setOnItemClickListener(mMessageClickedHandler); 489 </pre> 490 491 492 493
