Part 7: Tata letak alternatif diandroid Studio
1. Tata Letak Alternatif - Potret
Misalkan Anda memiliki aplikasi untuk jembatan besar dunia. Salah satu halaman jembatan Anda mungkin terlihat seperti ini dalam tampilan potret:
Namun, ketika perangkat diputar, Anda mungkin menemukan bahwa desain halaman Anda terlihat mengerikan dalam tampilan lansekap:
Dalam tutorial ini, Anda akan mempelajari cara membuat tata letak yang berbeda untuk tampilan lanskap.
Buat proyek baru untuk ini. Berikan nama aplikasi Jembatan Terkenal. Seperti biasa, pastikan Anda membuat Aktivitas Kosong. Saat proyek dimuat, salin dan tempel dua gambar berikut ke folder res > drawable Anda:
Kami akan menggunakan gambar lebar untuk tampilan potret dan yang lainnya untuk tampilan lanskap.
Jika Anda melihat Project Explorer, Anda akan melihat ada folder di direktori res bernama layout.:
Sejauh ini, Anda telah menempatkan semua tata letak XML Anda di folder ini. Namun, di Android, Anda dapat membuat folder yang berbeda untuk menampung tata letak berukuran berbeda. Folder berbeda yang dapat Anda buat adalah ini:
tata letak
tata letak-tata letak tanah-besar
besar-tata letak-tanah
Anda kemudian menempatkan tata letak XML di folder ini. (Besar adalah untuk layar lebar.) Mari kita lihat cara kerjanya.
Untuk membuat folder lanskap, klik kanan pada folder tata letak. Dari menu yang muncul, pilih File sumber daya New > Layout. Anda kemudian akan melihat kotak dialog berikut:
Dalam kotak Nama direktori, ketik layout-land. Dalam kotak Nama file di bagian atas, ketik activity_main. Kotak dialog Anda kemudian akan terlihat seperti ini:
Sebelum mengklik OK, perhatikan bahwa elemen Root mengatakan LinearLayout. Kami tidak menginginkan tata letak seperti ini, tetapi Anda akan melihat cara cepat untuk mengubahnya nanti.
Ketika Anda mengklik OK, Project Explorer Anda akan terlihat seperti ini:
Jadi kami memiliki dua file yang disebut activity_main. Dan itulah kunci untuk tata letak yang berbeda - setiap tata letak alternatif harus memiliki nama file yang sama. Defaultnya adalah potret. Jika Anda memerlukan tata letak lanskap, Anda membuat file XML dengan nama yang sama dengan yang potret, dan menempatkannya di folder bernama layout-land. Jika Anda membutuhkan tata letak untuk layar lebar maka Anda akan membuat file XML activity_main ketiga dan menempatkannya di folder bernama layout-large, atau layout-large-land.
Tapi di mana folder layout-land? Di bagian atas jendela Project Explorer, klik pada area biru untuk melihat daftar dropdown:
Pilih File Proyek dari daftar (atau Proyek). Explorer Anda kemudian akan berubah menjadi ini:
Tampilan File Proyek menampilkan semua file dan folder Anda dengan lebih jelas, dengan folder layout-land baru kami dan file XML activity_main kedua kami.
Anda dapat beralih kembali ke tampilan Android, jika Anda mau. Tetapi jika Anda lebih suka tampilan File Proyek, pertahankan itu.
Perhatikan di area kode utama, di bagian atas, Anda memiliki dua tab activity_main XML yang terbuka:
Yang potret adalah layout\activity_main; lanskap satu adalah tanah \ activity_main.
Namun, saat aplikasi Anda berjalan, baris ini dijalankan dari MainActivity.java:
setContentView(R.layout.activity_main);
Android cukup pintar untuk melihat bahwa Anda memiliki folder layout-land. Ketika perangkat diputar, itu akan mengambil file XML activity_main dari folder ini daripada yang ada di folder tata letak. Anda tidak perlu menulis satu baris kode pun untuk menampilkan versi lanskap!
Hal yang sama berlaku jika Anda memiliki Aktivitas kedua. Misalkan Anda membuat yang disebut GoldenGateBridge, dan bahwa file XML yang terkait dengan kelas ini disebut bridge_golden_gate. Tata letak akan dimuat dengan baris ini, dalam metode onCreate dari GoldenGateBridge:
setContentView(R.layout.bridge_golden_gate);
Anda akan membuat file XML kedua yang disebut bridge_golden_gate, dan menempatkannya di folder layout-land. Jendela Explorer Anda kemudian akan terlihat seperti ini:
Android kemudian akan tahu untuk mengambil file yang benar dari folder layout-land ketika perangkat diputar.
Mari kita rancang tata letak potret, sekarang.
2. Mendesain tata letak XML untuk Tampilan Potret
Dalam pelajaran sebelumnya, Anda melihat cara membuat file XML untuk tampilan lanskap. Dalam pelajaran ini, kita akan merancang tata letak untuk file itu.
Klik pada tab layout\activity_main Anda di bagian atas. Dalam tampilan Desain, hapus Hello World TextView default. Sekarang mari kita tambahkan ImageView.
Untuk versi android studio yang lebih lama, cari kontrol ImageView, yang ada di bagian Gambar di Palette. Di versi yang lebih baru, ImageView ada di bagian Umum (dan bagian Widget). Seret ImageView ke tata letak putih Anda. Saat Anda mendapatkan kotak dialog Sumber Daya, pilih bridge_wide drawable dan klik OK.
Di area properti di sebelah kanan, atur nilai berikut (Anda tidak memerlukan ID):
Layout_width dan layout_height keduanya akan wrap_content. Anda hanya perlu tiga set batasan di dalam kotak di bagian atas.
Margin yang kami tetapkan adalah 8, 0, 0.
Tata letak Anda akan terlihat seperti ini:
Anda akan menambahkan TextView, berikutnya. Pertama, kita akan menyiapkan sumber daya string.
Klik dua kali file strings.xml, yang ada di folder res > values explorer di sebelah kiri Android Studio. Siapkan nama string berikut:
<string name="tower_bridge"></string>
File string Anda kemudian akan terlihat seperti ini:
Sebagai teks untuk string ini, tempelkan yang berikut ini di antara dua tag:
Ini adalah Tower Bridge di London. Banyak orang bingung dengan London Bridge, yang bukan satu jembatan tetapi mengacu pada jembatan berbeda yang telah membentang di sungai Thames antara Kota London dan Southwark (diucapkan SU-thark). Jembatan London tua yang berdiri selama lebih dari 600 tahun ditarik ke bawah pada abad ke-19 dan diganti dengan jembatan yang jauh lebih modern yang dirancang oleh John Rennie. Jembatan ini kemudian dijual kepada Robert McCulloch, yang mengirimkannya ke Arizona di mana ia masih berdiri.
Pekerjaan dimulai di Tower Bridge pada tahun 1886 dan selesai pada tahun 1894, dan merupakan keajaiban teknik Victoria.
File Anda kemudian akan terlihat seperti ini: (Kami telah menambahkan beberapa jeda baris hanya agar Anda dapat melihat semua teks. Anda tidak perlu memformatnya seperti milik kami. Tapi Anda bisa jika Anda mau. Itu tidak akan membahayakan!)
Kami ingin menambahkan beberapa huruf tebal ke teks, serta beberapa huruf miring dan garis bawah. Anda dapat menambahkan ini dengan tag HTML.
Temukan kemunculan pertama "Jembatan Menara". Tambahkan tag B pembuka dan penutup:
<b>Tower</b>
Sekarang cari nama Robert McCulloch. Gunakan tag miring pada nama ini:
<i>Robert McCulloch</i>
Untuk SU SU-thark, tambahkan tag garis bawah:
<u>SU</u>-thark
Anda juga dapat menambahkan paragraf dengan karakter \n. Tambahkan dua di antaranya, tepat sebelum "Pekerjaan dimulai pada ...":
\n\nWork dimulai pada
Dan di sini seperti apa file string Anda akan terlihat:
Mari kita juga menambahkan dua sumber daya string untuk gambar. Dengan begitu, kita tidak akan terganggu oleh peringatan di Android Studio. Tambahkan dua string ini ke file XML Anda:
<keamananstring="tower_bridge_portrait">Modengan potret Jembatan Menara</string>
<keamananstring="tower_bridge_landscape">Modekap lanskap Jembatan Menara</string>
File Anda kemudian akan terlihat seperti ini:
Kita sekarang dapat menambahkan TextView.
Tampilan Pohon
Di bagian Widget palet di versi Android Studio yang lebih lama, seret TextView ke tata letak Anda, tepat di bawah ImageView. Di versi yang lebih baru, TextView berada dalam kategori Teks. Dengan TextView Anda dipilih, tambahkan batasan ke bagian bawah Gambar dan bagian bawah layar (Anda harus tahu cara melakukannya sekarang). Tambahkan contraints kiri dan kanan, juga.
Untuk properti teks, hapus teks default dan klik tombol Pilih Resource: (Di versi Android Studio yang lebih baru, perluas item Common Attributes untuk menyetel teks.)
Dari kotak Sumber Daya yang muncul, pilih sumber daya string Anda:
Tata letak Anda kemudian akan terlihat seperti ini (pemformatan teks Anda tidak akan muncul sampai Anda menjalankan aplikasi):
Teksnya terlihat agak tergencet. Mari kita lihat apakah kita bisa memperbaikinya.
Di area properti untuk TextView Anda, atur layout_width ke 0dp dan layout_height ke wrap_content. Untuk margin kiri, klik di dalam kotak dropdown dan ketik 64. Untuk margin kanan, pilih 32 dari daftar dropdown:
Jika Anda mendapatkan peringatan di android studio versi sebelumnya, klik kotak peringatan merah di toolbar, Anda akan melihat ini:
Peringatan pertama adalah menyarankan kita untuk mengatur layout_marginEnd ke 32, dan layout_marginStart ke 64.
Kembali ke area properti untuk TextView Anda. Gulir ke bawah ke bawah dan klik tautan yang bertuliskan Lihat semua properti. Sekarang cari properti Layout_Margin:
Masukkan 32dp untuk properti layout_marginEnd dan 64dp untuk layout_marginStart:
Sekarang klik pada gambar Anda untuk memilihnya. Di area properti di sebelah kanan, cari properti contentDescription (properti tersebut berada di bawah Atribut Umum di versi Android Studio yang lebih baru). Buka kotak Pilih Sumber Daya dan pilih string mode potret Tower Bridge Anda:
Klik OK untuk mengatur string:
Uji, sekarang. Jalankan aplikasi Anda dan lihat seperti apa tampilannya sejauh ini.
Anda akan melihat bahwa pemformatan teks Anda telah diterapkan. Kami memiliki teks tebal untuk Tower Bridge, garis bawah untuk SU-thark, dan huruf miring untuk Robert McCulloch.
Sekarang putar tampilan. Anda akan melihat layar yang sepenuhnya kosong. Ini karena tata letak lanskap dimuat. Karena kami belum merancang apa pun untuk tampilan ini, layar akan kosong. Mari kita rancang tata letak lansekap.Tampilan Pohon
Di bagian Widget palet di versi Android Studio yang lebih lama, seret TextView ke tata letak Anda, tepat di bawah ImageView. Di versi yang lebih baru, TextView berada dalam kategori Teks. Dengan TextView Anda dipilih, tambahkan batasan ke bagian bawah Gambar dan bagian bawah layar (Anda harus tahu cara melakukannya sekarang). Tambahkan contraints kiri dan kanan, juga.
Untuk properti teks, hapus teks default dan klik tombol Pilih Resource: (Di versi Android Studio yang lebih baru, perluas item Common Attributes untuk menyetel teks.)
Dari kotak Sumber Daya yang muncul, pilih sumber daya string Anda:
Tata letak Anda kemudian akan terlihat seperti ini (pemformatan teks Anda tidak akan muncul sampai Anda menjalankan aplikasi):
Teksnya terlihat agak tergencet. Mari kita lihat apakah kita bisa memperbaikinya.
Di area properti untuk TextView Anda, atur layout_width ke 0dp dan layout_height ke wrap_content. Untuk margin kiri, klik di dalam kotak dropdown dan ketik 64. Untuk margin kanan, pilih 32 dari daftar dropdown:
Jika Anda mendapatkan peringatan di android studio versi sebelumnya, klik kotak peringatan merah di toolbar, Anda akan melihat ini:
Peringatan pertama adalah menyarankan kita untuk mengatur layout_marginEnd ke 32, dan layout_marginStart ke 64.
Kembali ke area properti untuk TextView Anda. Gulir ke bawah ke bawah dan klik tautan yang bertuliskan Lihat semua properti. Sekarang cari properti Layout_Margin:
Masukkan 32dp untuk properti layout_marginEnd dan 64dp untuk layout_marginStart:
Sekarang klik pada gambar Anda untuk memilihnya. Di area properti di sebelah kanan, cari properti contentDescription (properti tersebut berada di bawah Atribut Umum di versi Android Studio yang lebih baru). Buka kotak Pilih Sumber Daya dan pilih string mode potret Tower Bridge Anda:
Klik OK untuk mengatur string:
Uji, sekarang. Jalankan aplikasi Anda dan lihat seperti apa tampilannya sejauh ini.
Anda akan melihat bahwa pemformatan teks Anda telah diterapkan. Kami memiliki teks tebal untuk Tower Bridge, garis bawah untuk SU-thark, dan huruf miring untuk Robert McCulloch.
Sekarang putar tampilan. Anda akan melihat layar yang sepenuhnya kosong. Ini karena tata letak lanskap dimuat. Karena kami belum merancang apa pun untuk tampilan ini, layar akan kosong. Mari kita rancang tata letak lansekap.
3. Mendesain tata letak XML untuk tampilan lanskap
mari kita bahas tata letak lansekap.
Muat file activity_main.xml Anda, yang ada di folder layout-land. Anda akan tahu kapan Anda memiliki yang tepat karena terlihat seperti ini di Android Studio:
Sekarang lihatlah Pohon Komponen. Anda akan melihat bahwa tata letak induknya adalah LinearLayout:
Namun, kami tidak menginginkan tata letak seperti ini. Kami ingin ConstraintLayout, sama seperti file activity_main.xml kami yang lain. Anda dapat dengan mudah mengonversinya.
Klik kanan LinearLayout (vertikal) di Pohon Komponen. Dari menu yang muncul, pilih Konversi LinearLayout ke ConstraintLayout:
Anda mungkin akan mendapatkan kotak peringatan yang muncul ketika Anda mencoba mengonversi tata letak Anda:
Klik OK pada peringatan ini, karena kami benar-benar tidak memiliki tata letak, tampilan, atau kode lain yang perlu dikhawatirkan.
Pohon Komponen Anda sekarang akan terlihat seperti ini di versi Android Studio yang lebih lama:
Di versi yang lebih baru, bagian vertikal setelah Liner Layout hanya akan dihapus, dan Anda akan ditinggalkan dengan linearLayout di Component Tree.
Sekarang seret ImageView dari Palet ke Pohon Komponen, atau ke kanvas tata letak putih. Saat Anda mendapatkan kotak dialog Sumber Daya, pilih gambar jembatan Anda:
Klik OK untuk menambahkan gambar. ImageView pada tata letak putih mungkin berada di sudut kiri atas. Seret keluar dan turun sedikit untuk memberi diri Anda ruang untuk menambahkan batasan:
Pegang mouse Anda di atas lingkaran putih tengah kiri, dan lingkaran akan berubah menjadi hijau. Seret ke tepi kiri layar. Sekarang lakukan hal yang sama untuk lingkaran putih tengah atas dan lingkaran putih tengah bawah. ImageView Anda akan terlihat seperti ini:
Lihatlah area properti di sebelah kanan:
Anda dapat mengatur margin kiri yang lebih besar, jika Anda mau. Kami telah menetapkan milik kami ke 16.
Untuk properti contentDescription, atur properti tersebut ke sumber daya string tower_bridge_landscape Anda:
Sekarang kita dapat menambahkan TextView.
4. Mengonfigurasi TextView di Android
kita memerlukan TextView untuk mengikutinya.
Dari Palet, seret widget TextView ke Pohon Komponen Anda (atau ke tata letak). Jika berakhir di sudut kiri atas, seret ke suatu tempat di tengah:
Lebih baik menambahkan batasan sekarang. Jadi seret dari tengah kanan TextView ke tepi kanan layar. Sekarang seret dari tengah kiri TextView ke tepi kanan ImageView. Seret dari tengah atas ke bagian atas layar untuk menambahkan batasan atas untuk TextView Anda. Tambahkan batasan dari bagian bawah TextView ke bagian bawah layar:
Dengan TextView masih dipilih, klik tombol Pilih Sumber Daya:
Dari kotak dialog Sumber Daya, pilih string tower_bridge Anda:
Klik OK dan tata letak Anda mungkin terlihat seperti ini:
Seperti yang Anda lihat, TextView berada tepat di atas gambar. Untuk memperbaikinya, lihat area properti di sebelah kanan. Di versi Android Studio yang lebih baru, perluas kategori Tata Letak. Atur layout_width ke 0dp:
Tata letak Anda kemudian akan terlihat seperti ini:
Anda dapat menambahkan beberapa margin ke kiri dan ke kanan, sekarang.
Di properti atau area Tata Letak, ubah margin kiri untuk TextView ke 16, dan margin kanan menjadi 32:
Jika Anda melihat area peringatan, Anda mungkin melihat ini:
Tiga teratas sama dengan yang Anda lihat sebelumnya. Klik link Lihat semua properti di bagian bawah dan atur properti dan nilai yang disarankan dalam peringatan:
Alasan mengapa ada dua peringatan tentang marginStart adalah karena salah satunya adalah untuk ImageView. Klik pada ImageView Anda untuk memilihnya, dan kemudian perbaiki peringatannya.
Anda dapat mencobanya, sekarang. Jalankan aplikasi Anda. Putar perangkat sehingga terlihat lanskap. Anda akan melihat desain baru Anda ditampilkan:
Tampilan baru sedang ditarik dari folder layout-land dan merupakan file XML activity_main yang kami buat di sana. Android beralih di antara keduanya dengan sendirinya!