Dalam materi sebelumnya, kami baru saja menggunakan widget default, yang merupakan Tampilan Teks yang menampilkan teks "Hello Android World". Kini kami akan mencari cara untuk mendesain tata letak yang tampak cerdas dengan Android Studio.
Daftar isi
- Memahami tata letak di android studio
- Tata Letak Widget
- Menambahkan Gambar ke Android Studio
- Tata Letak Linier
- Tombol Android
- String XML Android
1. Memahami Tata Letak di Android Studio
Tata letak yang akan Anda rancang di bagian ini terlihat seperti ini dalam tampilan potret:
Dan seperti ini di lanskap:
Mari kita mulai.
Buat proyek baru untuk ini. Klik File > New > New Project dari menu Android Studio di bagian atas. Jika Anda telah menutup aplikasi, pilih Mulai project Android Studio baru dari daftar. Di android studio versi yang lebih lama, Anda akan melihat kotak dialog Project baru. Ketik Tata Letak Kuis untuk nama Aplikasi:
Klik Berikutnya, dan terima semua default pada kotak dialog lainnya. Proyek baru Anda kemudian akan dimuat.
Di versi Android Studio yang lebih baru, Anda akan melihat kotak dialog Pilih Proyek Anda lagi. Pilih Aktivitas Kosong, seperti sebelumnya, dan klik Berikutnya untuk melihat layar Konfigurasi Proyek Anda. Dalam kotak Nama di bagian atas, ketik Tata Letak Kuis. Pastikan menu tarik-turun Bahasa diatur ke Java. Layar Anda akan terlihat seperti ini (tetapi dengan nama Paket yang berbeda dan Simpan lokasi):
Untuk memberi diri Anda lebih banyak ruang di IDE Android Studio, Anda dapat meminimalkan Project Explorer di sebelah kiri. Anda dapat melakukannya dengan mengklik Lihat dari menu lalu di bagian atas, lalu Alat Windows > Project. Atau dengan mengklik tab Proyek di tepi paling kiri layar:
Klik tab lagi, jika Anda ingin mendapatkan kembali daftar Proyek.
Pertama, mari kita lihat Desainer, dan ikon bilah alat yang paling sering Anda gunakan. Buka file activity_main.xml Anda. Di versi Android Studio yang lebih lama, Anda akan melihat tombol Desain dan tombol Teks di bagian bawah. Klik pada Desain.
Untuk versi Android Studio yang lebih baru, sekarang ada tiga tombol: Kode, Split, Desain. Mereka dapat ditemukan di kanan atas:
Pastikan item Desain dipilih.
Sekarang periksa bilah alat di bagian atas aplikasi simulasi Anda:
Di baris bawah, kami memiliki ikon ini di versi Android Studio yang lebih lama:
Dan yang ini di versi yang lebih baru:
Di baris atas, kami memiliki ini di versi Android Studio sebelumnya:
Dan ini dalam versi yang lebih baru:
Anda akan belajar tentang ikon yang telah kami soroti saat Anda melanjutkan.
Dua area lagi untuk diperiksa adalah Palette:
dan Pohon Komponen:
Palet adalah tempat Anda menarik dan melepas kontrol ke permukaan desain Anda. Pohon Komponen menunjukkan kepada Anda daftar kontrol yang telah Anda jatuhkan pada permukaan desain Anda. Anda dapat mengklik item di Pohon Komponen untuk memilihnya di perancang.
2. Menambahkan widget ke tata letak android
Anda sudah memiliki Tampilan Teks di permukaan desain Anda, tampilan Hello World default yang Anda dapatkan setiap kali Anda membuat proyek baru. Klik ini untuk memilihnya. Sekarang tekan tombol delete pada keyboard Anda untuk menghilangkannya. Temukan Tampilan Teks di Palet, dan seret yang baru ke tata letak Anda. Layar Anda kemudian akan terlihat seperti ini (tanpa area biru di bagian atas di versi Android Studio yang lebih baru):
Yang ingin kami lakukan sekarang adalah beralih ke tampilan cetak biru. Jadi, di versi Android Studio sebelumnya, klik ikon Cetak Biru pada bilah alat, bagian tengah dari tiga ikon pada gambar di bawah ini:
Di versi yang lebih baru, klik ikon biru pada toolbar dan pilih Cetak Biru dari menu:
Gunakan alat zoom untuk memperbesar sedikit, dan layar Anda akan terlihat seperti ini:
Lihatlah area Properti tepat di sebelah kanan Cetak Biru. Temukan properti Teks dan ubah ke Apa nama jembatan ini? (Anda akan melihat cara lain untuk menambahkan teks, dalam tutorial selanjutnya.)
Tekan tombol enter pada keyboard Anda untuk memperbarui cetak biru:
Lihat toolbar desain dan temukan ikon Margin Default. Klik untuk melihat daftar dropdown:
Nilai-nilai ini menetapkan margin di sekitar tepi aplikasi Anda. Default 8 baik-baik saja bagi kami. Tetapi jika Anda perlu mengubah margin Anda, ini adalah tempat yang akan datang.
Yang ingin kami lakukan adalah memperbaiki Tampilan Teks ke bagian atas layar, dan di kiri dan kanan tepi layar. Anda melakukan ini dengan Kendala.
Pastikan ikon mata pada toolbar desain tidak memiliki tanda silang melaluinya. Jika ya, itu berarti Kendala disembunyikan. Klik mata untuk menunjukkan batasan:
Kendala Tersembunyi:
Kendala yang Ditunjukkan:
Ikon di sebelah Constraints yang satu disebut AutoConnect. Anda ingin yang ini dimatikan, dalam tutorial ini. Klik dan Anda akan melihat garis melalui magnet terbalik:
AutoConnect mencoba menebak Kendala seperti apa yang Anda inginkan. Ini ok untuk desain sederhana, tetapi bisa menghalangi. Itulah sebabnya kami mematikannya. Kami akan menambahkan batasan kami secara manual.
Lihat lagi Tampilan Teks:
Lingkaran itu disebut Jangkar Kendala. Jika Anda ingin memperbaiki kontrol ke bagian atas layar, klik pada lingkaran tengah. Pertahankan tombol kiri mouse Anda tetap tahan dan seret ke atas:
Lepaskan tombol kiri mouse Anda dan Anda akan melihat panah dari tengah atas Tampilan Teks ke bagian atas layar aplikasi. Ini adalah kendala. (8 adalah margin yang kita tetapkan.) Tidak peduli apakah aplikasi Anda dalam orientasi potret atau lanskap, Tampilan Teks akan tetap 8 unit dari atas.
Lakukan hal yang sama dengan lingkaran kiri dan kanan Tampilan Teks: klik dan seret panah ke tepi kiri untuk lingkaran kiri, dan klik dan seret panah ke tepi kanan. Layar Anda kemudian akan terlihat seperti ini:
Perhatikan garis bergerigi. Ini menunjukkan bahwa Anda memiliki batasan yang melekat pada kontrol.
Untuk menghilangkan kendala, lihat area properti, di bagian atas. Anda akan melihat ini di android studio versi lebih lama:
And this in later versions:
Pegang mouse Anda di atas salah satu lingkaran biru (atau abu-abu) di tengah. Anda akan melihat X muncul. Klik X menghapus batasan tersebut. Pada gambar di atas, jika lingkaran biru dengan x putih di dalamnya diklik, batasannya akan dihapus dari tepi kiri Tampilan Teks ke tepi kiri layar.
Perhatikan penggeser di bagian bawah, yang memiliki 50 di dalamnya. Ini dapat digunakan untuk positon Tampilan Teks di sepanjang sumbu horizontal. (Nilai 50 adalah posisi tengah.) Cobalah. Tahan tombol kiri mouse Anda pada 50. Pertahankan tombol kiri mouse tetap tahan dan seret ke kanan dan ke kiri. Tonton apa yang terjadi pada Tampilan Teks Anda dalam cetak biru.
3. Menambahkan gambar ke proyek android
Gambar ini akan digunakan dalam Tampilan Gambar.
Pertama, unduh gambar ini: (Klik kanan dan pilih Simpan Gambar Sebagai.)
Simpan ke komputer Anda sendiri dan ingat ke mana Anda menyimpannya.
Kita perlu mengimpor gambar ini ke folder res > drawable. Buka project explorer anda lagi dengan mengklik tabnya:
Sekarang perluas item res dan temukan folder drawable:
Klik kanan folder drawable, dan pilih Show in Explorer dari menu:
Ini akan membuka jendela yang menampilkan daftar folder. Gambar di bawah ini berasal dari Windows 10:
Semua folder ini berasal dari direktori res Anda. (Yang mipmap digunakan terutama untuk ikon. Anda dapat membuatnya dalam berbagai ukuran. Kami akan melakukan ini jauh nanti di kursus.)
Yang perlu Anda lakukan adalah menyalin dan menempelkan gambar Anda dari tempat Anda menyimpannya di komputer Anda ke dalam folder drawable (kami berasumsi Anda tahu cara menyalin dan menempelkan file dari satu folder ke folder lain):
Sekarang kembali ke Android Studio dan Anda akan melihatnya di sana:
Kita sekarang dapat menggunakan gambar ini di aplikasi kita.
Kembali ke cetak biru Anda. Temukan kontrol Tampilan Gambar di Palet, yang berada di bawah Gambar di versi Android Studio yang lebih lama:
Di versi Android Studio yang lebih baru, Anda dapat menemukan kontrol Tampilan Gambar di bawah kategori Umum Palet (dan di bawah Widget):
Seret Tampilan Gambar tepat di bawah Tampilan Teks Anda. Segera setelah Anda melakukannya, Anda akan muncul kotak dialog berikut:
Perluas item Proyek Drawable dan pilih gambar jembatan dan klik OK. Cetak biru Anda kemudian akan terlihat seperti ini:
Seperti yang Anda lihat, Tampilan Gambar telah berakhir di kiri atas. Kami tidak menginginkannya di sana.
Dengan Tampilan Gambar dipilih, klik di mana saja di dalamnya dengan tombol kiri mouse Anda. Pertahankan tombol kiri mouse tetap tahan dan seret ke bawah tampilan teks:
(Anda tidak akan dapat melihat gambar itu sendiri dalam Blueprint View.)
Kendala
Sekarang kita akan menambahkan Constraint. Kami ingin menghubungkan lingkaran tengah atas Tampilan Gambar ke lingkaran tengah bawah Tampilan Teks. Pegang mouse Anda di atas lingkaran tengah atas Tampilan Gambar. Ini akan berubah menjadi hijau. Sekarang tahan tombol kiri mouse Anda ke bawah. Tetap tahan dan seret ke lingkaran tengah bawah Tampilan Teks:
Anda akan melihat panah biru yang menghubungkan keduanya:
Sekarang tambahkan batasan dari kiri Tampilan Gambar ke tepi kiri layar, seperti yang Anda lakukan untuk Tampilan Teks. Demikian juga, sambungkan tepi kanan Tampilan Gambar ke tepi kanan layar. Cetak biru Anda kemudian akan terlihat seperti ini:
Ini bisa sedikit fiddly, jadi jangan lupa Anda dapat membatalkan dengan CTRL + Z.
Jika Anda melihat area properti lagi, Anda mungkin bertanya-tanya untuk apa semua baris itu:
Garis lurus menunjukkan sisi mana dari pandangan Anda yang dibatasi, dan ke mana. Mereka juga memberi tahu Anda ukuran margin, 8 pada gambar di atas. Pegang mouse Anda di atas salah satu baris dan Anda akan melihat daftar dropdown. Anda dapat mengubah margin Anda dari sini:
Garis-garis lain yang harus diperhatikan adalah yang ada di dalam kotak, panah runcing pada gambar di atas. Ada tiga pengaturan berbeda di sini:
Bungkus Konten
Tetap
Cocokkan kendala
Klik panah untuk melihat apa yang mereka lakukan. Perhatikan apa yang terjadi pada Tampilan Gambar saat Anda mengklik sekumpulan panah. Pada gambar di bawah ini, kami telah mengatur panah ke Tetap:
Panah telah berubah menjadi garis lurus. Perhatikan bahwa nilai layout_width telah berubah menjadi 200dp. Ini telah berubah menjadi 200 karena itu adalah lebar gambar yang kami gunakan. Perhatikan bahwa Tampilan Gambar tidak mengubah ukurannya. Tapi pindahkan penggeser horizontal dari 50 ke yang lain. Tonton apa yang terjadi pada Tampilan Gambar Anda dalam cetak biru.
Klik garis lurus di dalam kotak untuk melihat sepertiga pengaturan, Cocokkan Batasan:
Perhatikan bahwa gambar sekarang telah membentang ke margin layar. Perhatikan juga, bahwa layout_width telah diatur ulang ke nol. Klik lagi, meskipun, untuk kembali ke Bungkus Konten.
Dalam pelajaran berikutnya, Anda akan belajar tentang jenis tata letak yang berbeda - LinearLayout.
4. Menambahkan tata letak linier
Secara default, Android menempatkan semua kontrol Anda dalam jenis tata letak yang disebut Constraint Layout. Ini kemudian digunakan sebagai tampilan induk untuk semua widget Anda. Jenis tata letak lain yang dapat Anda gunakan disebut LinearLayout. Kami akan menggunakan salah satunya untuk menahan tombol pada formulir kami.
Klik pada kategori Tata Letak di palet. Temukan LinearLayout (Horizontal):
Seret salah satunya ke cetak biru Anda. Sekali lagi, kontrol baru Anda akan ditambahkan ke kiri atas, jadi Anda harus menyeretnya ke bawah di bawah Tampilan Gambar:
Tambahkan batasan dengan menggerakkan mouse Anda ke lingkaran atas LinearLayout Anda:
Saat Anda melihat lingkaran berubah menjadi hijau, seret ke lingkaran bawah Tampilan Gambar:
Sekarang tambahkan batasan ke tepi kiri dan kanan layar Anda, seperti yang Anda lakukan sebelumnya:
Terakhir, tambahkan batasan dari lingkaran bawah LinearLayout Anda ke tepi bawah layar Anda:
Agak terlalu sempit untuk menahan tombol, saat ini. Untuk mengatasinya, lihat area properti. Temukan layout_height dan ubah ke 0dp:
Tata letak Anda kemudian akan berubah ukuran:
.
Sekarang kita memiliki Linear Layout, kita akan menambahkan beberapa tombol ke dalamnya. Kami akan melakukannya dalam pelajaran berikutnya di bawah ini.
5. Tombol Android
Dalam pelajaran sebelumnya, Anda menambahkan Linear Layout ke permukaan desain Anda. Sekarang kita akan menambahkan dua tombol ke tata letak ini.
Kembali ke palet. Di versi Android Studio yang lebih lama, klik kategori Widget dan cari item Tombol. Di versi yang lebih baru, ada kategori Tombol. Klik ini dan Anda akan melihat item Tombol. Seret dua di antaranya ke LinearLayout Anda.
Jika Anda tidak melakukannya dengan benar, dan harus membatalkan, Anda dapat menyeret widget ke Pohon Komponen sebagai gantinya:
Anda bahkan dapat mengatur ulang widget Anda di Pohon Komponen. Pada gambar di bawah ini kita telah meletakkan tombol 6 sebelum tombol 5:
Dengan tombol atas disorot, seret ke bawah ke bawah tombol bawah:
Area cetak biru Anda sekarang akan terlihat seperti ini:
Pilih tombol pertama. Di area properti di sebelah kanan, cari properti teks dan masukkan London Bridge: (Anda akan melihat peringatan kesalahan tentang ini. Kami akan memperbaikinya di pelajaran berikutnya.)
(Nama tombol Anda mungkin tidak akan menjadi tombol5.)
Sekarang pilih tombol kedua dan ubah properti teks menjadi Tower Bridge. Cetak biru Anda kemudian akan terlihat seperti ini:
Hampir selesai, sekarang.
Anda dapat mengubah warna latar belakang ConstraintLayout menjadi sesuatu selain putih.
Kembali ke tampilan desain dengan mengklik ikon di toolbar di android studio versi lebih lama:
Di versi yang lebih baru, ada menu sebagai gantinya. Pilih Desain dari menu, bukan Cetak Biru:
Di Pohon Komponen, klik pada item ConstraintLayout untuk memilihnya:
Sekarang lihat area properti di sebelah kanan. Jika Anda memiliki android studio versi lebih lama, klik tautan di bagian bawah yang bertuliskan Lihat semua properti:
Untuk versi yang lebih baru, klik untuk memperluas item Semua Atribut:
Anda kemudian akan melihat daftar properti yang lebih lengkap.
Temukan properti Latar Belakang dan klik tepat di sebelah kanan kata Latar Belakang, di mana kotak putih berada pada gambar di bawah ini:
Klik pada kotak abu-abu untuk memunculkan kotak dialog. Pilih Warna dari kiri:
Pilih warna dari daftar dan klik OK. Kami telah memilih holo_blue_dark.
Cobalah sekarang. Jalankan aplikasi Anda dan lihat seperti apa tampilannya. Anda akan melihat sesuatu seperti ini:
Putar perangkat Anda dan Anda akan melihat bahwa tombol dalam tata letak meluas untuk mengisi ruang:
Namun, jika Anda menggunakan perangkat nyata, aplikasi Anda mungkin akan mogok secara bergiliran. Anda akan melihat alasannya, dan cara memperbaikinya, nanti di kursus, ketika kita beralih ke Aktivitas.
Dalam pelajaran berikutnya, Anda akan belajar tentang file XML. Anda juga akan belajar cara menambahkan string XML. Ini cukup mudah!
6. String XML Android
Anda tidak perlu menarik dan melepas kontrol ke tata letak Anda di desainer. Jika Anda mau, Anda bisa melakukan semuanya dalam kode XML. Klik pada tab Teks di bagian bawah perancang:
Anda kemudian akan melihat semua XML untuk desain Anda:
Setiap kali Anda menjatuhkan kontrol ke permukaan desain, Android Studio sedang membangun XML di latar belakang. Misalnya, berikut adalah XML untuk TextView:
Jadi jika kita ingin mengatur margin kiri 8dp, kita hanya perlu mengetik ini:
android:layout_marginLeft="8dp"
Kendala yang kami tambahkan ada di bagian bawah:
app:layout_constraintLeft_toLeftOf="induk"
Namun, sangat sulit untuk mengingat semua tag XML, karena ada begitu banyak dari mereka. Kapan pun kita bisa, kita akan merancang aplikasi kita melalui tab Desain alih-alih tab Teks. Kita mungkin masih perlu mengubah XML.
String XML
Satu file XML yang dapat kita lihat disebut strings.xml. Idenya adalah Anda meletakkan semua string teks Anda dalam file ini. Jika Anda ingin teks pada tombol, misalnya, Anda tidak mengetiknya langsung ke area properti seperti yang kami lakukan. Anda menempatkan teks dalam file string dan kemudian menariknya dari sana. Ayo caranya. Caranya cukup mudah.
Pertama-tama, lihat sisi kanan bilah alat desain dan Anda akan melihat kotak merah (atau lingkaran merah di versi yang lebih baru):
Ini adalah daftar masalah yang dapat menyebabkan masalah dengan aplikasi Anda. Kami memiliki 7, pada gambar di atas. Klik pada kotak merah untuk melihat sesuatu seperti ini: (Di versi Android Studio yang lebih baru, Anda akan melihat panel muncul di bagian bawah layar dengan semua peringatan tercantum.)
Peringatan pertama adalah tentang gaya tombol yang telah kami gunakan. Ini menyarankan agar kita menggunakan gaya tanpa batas untuk tombol. Anda dapat memperbaikinya, jika Anda mau. (Kami membiarkan tombol apa adanya.)
Untuk mendapatkan tombol tanpa batas, klik salah satu tombol Anda untuk memilihnya. Di area properti di sebelah kanan, cari properti Gaya Tombol. (Di Android Studio 3 dan yang lebih baru, Anda perlu memperluas bagian Declared Attributes.)
Klik daftar dropdown dan pilih Borderless (atau Bordeless.Colored):
Jumlah masalah di kotak merah akan berkurang 2, ketika Anda melakukan kedua tombol. Namun, tombol tanpa batas tidak terlihat bagus di aplikasi ini, jadi atur kembali pada buttonStyle [default].
Namun, satu masalah yang dapat kita atasi adalah yang ini:
Masalahnya adalah tentang string hardcoded, dan bahwa kita harus menggunakan sumber daya @string. Jadi di mana sumber daya @string ini?
Perluas Project Explorer di sebelah kiri, dan folder res. Di dalam folder res adalah folder bernama values. Perluas folder ini untuk melihat tiga file XML:
File yang dibicarakan daftar masalah adalah string.xml satu. Klik dua kali untuk membukanya. Anda akan melihat yang berikut ini:
<sumber>
<keamananstring:"app_name">Kumstitudo</string>
</sumber daya>
Ini adalah salah satu dari pasangan kunci/nilai tersebut, tetapi kali ini dilakukan sebagai XML. Dalam hal ini, kuncinya disebut nama. Nilai untuk nama adalah app_name. Ini berlaku antara tanda kutip ganda. Nilai untuk app_name adalah Tata Letak Kuis. Ini berada di antara tanda kurung runcing dari tag string. Anda dapat menghapus Tata Letak Kuis dan mengetik apa pun yang Anda suka di sini:
<sumber>
<keamananstring:"app_name">Akun Kuis Terbaik yang Pernah Ada!</string>
</sumber daya>
Anda juga dapat mengatur tag string baru di sini, jika Anda suka:
<sumber>
<keamananstring:"button_one">London Bridge</string>
</sumber daya>
Anda dapat mengatur string sebanyak yang Anda inginkan, di sini. Namun, ada cara lain untuk menambahkan string ke file ini.
Klik kembali pada file activity_main.xml Anda. Pastikan Anda berada di tab Desain, dan bukan tab Teks. Sekarang pilih tombol London Bridge Anda. Di area properti di sebelah kanan, cari properti teks, yang bertuliskan London Bridge. Hapus teks ini dan klik tombol Pilih Sumber Daya tepat di sebelah kanan area teks:
Ketika Anda mengklik tombol, Anda akan melihat kotak dialog ini muncul:
Klik Tambahkan sumber daya baru di kanan atas, lalu Nilai String Baru:
Anda kemudian akan melihat kotak dialog lain bermunculan. Yang ini:
Nama Sumber Daya di bagian atas adalah bagian nama dari XML yang Anda lihat sebelumnya; nilai Sumber Daya adalah bagian antara tanda kurung runcing dari tag string:
Di kotak Nama sumber daya, ketik button_one. (Nama tidak dapat memiliki spasi.) Dalam kotak Nilai sumber daya, ketik London Bridge:
Klik OK dan Anda akan dikembalikan ke tampilan Desain. Lihat properti teks sekarang, meskipun:
Teks mengatakan @string/button_one. Inilah yang diinginkan daftar masalah - nilai dari file sumber daya.
Sekarang lakukan hal yang sama untuk tombol Tower Bridge Anda. Hapus teks yang Anda ketikkan. Tambahkan sumber daya baru. Atur Nama sumber daya ke button_two. Atur nilai Sumber Daya ke Tower Bridge:
Sekarang lihat string Anda.xml file lagi. Anda akan melihat dua string lagi telah ditambahkan:
Latihan
Tampilan Teks pada Aktivitas Anda mengatakan "Apa yang disebut Jembatan ini?". Namun, ini adalah nilai hardcoded. Ganti nilai hardcoded ini dengan sumber daya string, seperti yang Anda lakukan untuk dua tombol. File string.xml Anda kemudian akan terlihat seperti ini:
Anda juga dapat menambahkan string untuk Gambar. Klik pada gambar Anda untuk memilihnya. Di area properti, temukan properti contentDescription. Tambahkan sumber daya string baru untuk properti ini.
Demikian materi kali ini Tentang Memahami Tata Letak di Android Studio yang bisa saya tulis disini. Di materi pelajaran selanjutnya mulai aktifitas Android semoga materi ini membantu anda terimakasih.