Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK

Desain Android User Interface: Linear Layout

Read Time:7 minsLanguages:
This post is part of a series called Android User Interface Design.
Android User Interface Design: Basic Buttons
Android UI Fundamentals Challenge: LinearLayout

Indonesian (Bahasa Indonesia) translation by Riska Aprianti (you can also view the original English article)

Memahami layout adalah penting untuk desain aplikasi Android yang bagus Dalam tutorial ini, Anda mempelajari semua tentang linear layout, yang mengatur user interface, atau widget, secara vertikal atau horizontal pada layar. Ketika digunakan dengan benar, linear layout dapat menjadi layout mendasar dimana banyak aplikasi Android user interface  yang menarik dapat dirancang.

Apakah Linear Layout?

Linear layout adalah salah satu jenis layout yang paling sederhana dan paling umum digunakan oleh pengembang Android untuk mengatur kontrol dalam user interface mereka. Linear layout berfungsi seperti namanya: ia mengatur kontrol secara linear baik secara vertikal maupun horizontal. Ketika orientasi layout diatur ke vertikal, semua kontrol anak di dalamnya yang disusun dalam satu kolom; Ketika orientasi layout diatur ke horisontal, semua kontrol anak di dalamnya diatur dalam satu baris.

Linear layout dapat didefinisikan dalam sumber layout XML atau secara terprogram dalam aplikasi kode Java.

Gambar berikut menunjukkan Linear layout dengan tujuh kontrol TextView. Orientasi linear layout ini diatur ke vertikal, menyebabkan setiap kontrol TextView ditampilkan dalam satu kolom. Setiap kontrol TextView memiliki atribut teks yang disetel ke warna, dengan warna yang sama ditetapkan sebagai background untuk kontrol; setiap kontrol direntangkan width layar dengan mengatur atribut layout_width kontrol untuk fill_parent.

Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts

Mendefinisikan Sumber Layout XML dengan Linear Layout

Cara yang paling nyaman dan dapat dijaga untuk merancang aplikasi user interface adalah dengan menciptakan sumber layout XML. Metode ini sangat menyederhanakan proses desain UI, memindahkan sebagian besar pembuatan statis dan layout  user interface kontrol dan definisi atribut kontrol, ke XML, alih-alih membuang sampah kode sembarangan.

Sumber layout XML harus disimpan dalam /res/layout project directory hierarchy. Mari kita lihat pelangi linear layout yang diperkenalkan di bagian sebelumnya. Sekali lagi, layar ini pada dasarnya adalah linear layout vertikal yang diatur untuk mengisi seluruh layar, yang dicapai dengan mengatur atribut layout_width dan layout_height ke fill_parent. File sumber layout ini, aptly bernama /res/layout/rainbow.xml, didefinisikan dalam XML sebagai berikut:

Mungkin Anda telah memperhatikan bahwa setiap anak kontrol dari linear layout memiliki sejumlah atribut menarik, termasuk yang disebut layout_weight. Kita akan membicarakan lebih banyak tentang ini dalam beberapa saat.

Dua gambar berikut menunjukkan seperti apa tampilan layout ini pada perangkat dalam mode potrait dan landscape:

Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts
Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts

Ingatlah bahwa, di dalam Kegiatan, hanya satu baris kode dalam metode onCreate() yang diperlukan untuk memuat dan menampilkan sumber layout pada layar. Jika sumber layout disimpan dalam file /res/layout/rainbow.xml, garis kode itu adalah:

Mendefinisikan Linear Layout Secara Programatis

Anda juga dapat membuat dan mengonfigurasi linear layout secara terprogram. Ini dilakukan dengan menggunakan pelajaran LinearLayout (android.widget.LinearLayout). Anda akan menemukan child-specific parameter di pelajaran LinearLayout.LayoutParams. Juga, layout parameters yang khas (android.view.ViewGroup.LayoutParams), seperti layout_height dan layout_width, serta parameter margin (ViewGroup.MarginLayoutParams), masih berlaku untuk objek LinearLayout.
Alih-alih memuat sumber layout secara langsung menggunakan metode setContentView() seperti yang ditunjukkan sebelumnya, Anda harus membuat konten layar di Java dan kemudian menyediakan objek layout induk yang berisi semua konten kontrol untuk ditampilkan sebagai tampilan anak ke setContentView() metode. Dalam hal ini, layout induk Anda adalah linear layout.
Misalnya, kode berikut mengilustrasikan bagaimana secara terprogram memiliki sebuah Instantiate Activity yang membuat LinearLayout dan menempatkan tiga objek TextView di dalamnya dalam metode onCreate():

Dua gambar berikut menunjukkan seperti apa tampilan layout ini pada perangkat dalam mode potrait dan landscape:

Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts
Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts

Mari kita lihat lebih dekat daftar kode Java di atas. Pertama, tiga kontrol TextView dibuat dan dikonfigurasi. Masing-masing memiliki ukuran teks (font size), perataan teks (gravity), dan teks itu sendiri. Selanjutnya, linear layout dibuat dengan orientasi vertikal. Layout parameter memungkinkannya mengisi seluruh induk (dalam hal ini, seluruh layar) dan gravitynya menyebabkan semua kontrol anak dipusatkan di dalam layar, alih-alih dari sudut kiri atas. Masing-masing dari tiga kontrol TextView ditambahkan sebagai tampilan anak menggunakan metode addView(). Akhirnya, linear layout diteruskan ke metode setContentView() sebagai kontrol induk untuk ditampilkan di layar.
Seperti yang Anda lihat, kode dapat dengan cepat muncul dalam ukuran karena lebih banyak kontrol ditambahkan ke layar. Untuk pengaturan dan pemeliharaan, mendefinisikan dan menggunakan layout secara terprogram lebih baik diserahkan pada kasus tidak biasa daripada yang teratur.

Menjelajahi Linear Layout Properti Penting dan Atribut

Sekarang mari kita bicara sedikit tentang atribut yang membantu mengonfigurasi linear layout dan kontrol anaknya.

Beberapa atribut spesifik berlaku untuk linear layout. Beberapa atribut terpenting yang akan Anda gunakan dengan linear layout meliputi:

  • Orientasi atribut (diperlukan), yang dapat diatur ke vertikal atau horizontal (pelajaran: LinearLayout)
  • Atribut Gravity (opsional), yang mengontrol bagaimana semua kontrol anak disejajarkan dan ditampilkan dalam linear layout (pelajaran: LinearLayout)
  • Atribut Layout_weight (opsional, diterapkan untuk setiap kontrol anak) menentukan pentingnya relatif setiap kontrol anak dalam linear layout induk (pelajaran: LinearLayout.LayoutParams)

Juga, atribut ViewGroup-style umum berlaku untuk linear layout. Ini termasuk:

  • Generic Layout Parameters seperti layout_height (wajib) dan layout_width (wajib) (pelajaran: ViewGroup.LayoutParams)
  • Margin Layout Parameter seperti margin_top, margin_left, margin_right dan margin_bottom (pelajaran: ViewGroup. MarginLayoutParams)
  • Layout Parameter seperti layout_height dan layout_width (pelajaran: ViewGroup.LayoutParams)

Weighing Kontrol Anak

Sebagian besar atribut linear layout cukup jelas. Namun, atribut layout_weight layak sedikit diskusi ekstra. Tidak seperti atribut linear layout lainnya, yang diterapkan pada tampilan linear layout itu sendiri, atribut ini berlaku untuk kontrol anak. Nilai weight itu sendiri harus berupa angka (mis. 50, .25, .10, .10, .05,), di mana totalnya jika Anda menjumlahkan nilai weight semua anak sama dengan 1 (100%).

Weight anak mengontrol seberapa besar "pentingnya" atau "ruang" yang diberikan dalam linear layout induk. Ini paling baik digambarkan menggunakan contoh. Mari kembali ke pelangi linear layout yang kita gunakan sebelumnya. Untuk memungkinkan semua kontrol anak "memperluas" untuk mengisi linear layout secara merata, terlepas dari ukuran layar, kita menggunakan layout_weight untuk menetapkan weight relatif untuk setiap TextView. Karena ada tujuh warna yang ingin kita berikan imbalan yang sama, kita membagi 1 dengan 7 dan menghasilkan sekitar 0,143. Namun, karena kita ingin weight dijumlahkan menjadi 1 secara merata, lima dari weight kontrol menerima nilai .14 dan dua menerima nilai .15—a perbedaan halus yang membuat jumlah kita tepat 1, tetapi cukup terlihat untuk kontrol pertama dan terakhir.

Trik weight ini dilakukan dengan baik ketika ada ruang yang cukup di layar untuk semua kontrol ditampilkan dengan benar. Mengucapkan, ketika ruang menjadi sempit, atribut weight mungkin ditimpa oleh faktor lain, seperti view clipping atau, dalam kasus TextView, berusaha untuk tidak wrapp teks. Ini menjadi jelas ketika kita mengubah file layout rainbow.xml untuk berisi layout horizontal yang serupa (layout_height juga diatur ke fill_parent).
Dua gambar berikut menunjukkan layout yang sama (hanya berubah menjadi orientasi horizontal) seperti yang mungkin muncul pada perangkat dalam mode potrait dan landscape:

Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts
Android Linear LayoutsAndroid Linear LayoutsAndroid Linear Layouts

Apa yang kita harapkan adalah bahwa area merah dan ungu (weight 0,15) akan sedikit lebih besar dari warna lain (weight 0,14), tetapi ini bukan bagaimana tampilannya. Jika Anda perhatikan dengan seksama pada RED TextView, itu akan memakan lebih banyak tempat daripada sebelahnya ORANGE TextView. Namun, karena "Red" adalah kata pendek, dan "Orange" tidak, beberapa berdesak-desakan dilakukan secara otomatis agar  terjaga semua kata dari wrapping. Hasilnya lebih menyenangkan, tetapi bisa sedikit menjengkelkan jika tidak ada efek yang diinginkan.

Kesimpulan

Aplikasi android user interfaces didefinisikan menggunakan layout, dan linear layout adalah salah satu tipe layout dasar yang digunakan. Linear layout memungkinkan kontrol anak diatur dalam satu baris (horizontal) atau kolom tunggal (vertikal). Penempatan kontrol anak dapat lebih lanjut disesuaikan menggunakan gravity dan atribut weight.

Tentang penulis

Pengembang seluler Lauren Darcey dan Shane Conder telah ikut menulis beberapa buku tentang pengembangan Android: buku pemrograman mendalam berjudul Pengembangan Aplikasi Nirkabel Android dan Pengembangan Aplikasi Android Sams TeachYourself dalam 24 Jam. Ketika tidak menulis, mereka menghabiskan waktu mengembangkan perangkat lunak seluler di perusahaan mereka dan menyediakan layanan konsultasi. Mereka dapat dihubungi di melalui email ke [email protected], melalui blog mereka di androidbook.blogspot.com, dan di Twitter @androidwireless.

Perlu Bantuan Lagi Menulis Aplikasi Android? Lihat Buku dan Sumber terbaru kami!

Buy Android Wireless Application Development, 2nd Edition Buy Sam's Teach Yourself Android Application Development in 24 Hours Mamlambo code at Code Canyon

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.