WEBVTT 00:00:00.450 --> 00:00:03.650 Sebelum saya mulai coding, saya akan jawab pertanyaan ini. 00:00:03.650 --> 00:00:07.460 Saya hanya mengetahui dua view groups, LinearLayouts dan 00:00:07.460 --> 00:00:08.626 RelativeLayouts. 00:00:08.626 --> 00:00:13.710 Kata kuncinya adalah keduanya harus menempati ruang yang sama. 00:00:13.710 --> 00:00:16.260 Menggunakan layout weight adalah cara paling mudah digunakan. 00:00:17.480 --> 00:00:20.070 Oke, ayo kerjakan dan perhatikan kodenya. 00:00:20.070 --> 00:00:22.880 Saya tidak lagi bekerja dalam Java, jadi akan saya lanjutkan dan 00:00:22.880 --> 00:00:24.775 pindah ke activity_main.xml. 00:00:25.830 --> 00:00:27.150 Inilah berkas XML saya. 00:00:28.270 --> 00:00:33.875 Saya akan mulai dengan meletakkan semua kode ini pada LinearLayout lain. 00:00:33.875 --> 00:00:38.334 Dan ini adalah induk LinearLayout untuk dua LinearLayouts mini saya. 00:00:39.360 --> 00:00:43.900 Saya pindah dua baris ini ke atas sini, 00:00:43.900 --> 00:00:49.670 karena mereka harus menempel pada root view, tambahkan kurung kurawal. 00:00:49.670 --> 00:00:53.990 Oke, Android Studio secara otomatis akan membuat tag penutup untuk saya. 00:00:53.990 --> 00:00:55.060 Jadi, saya lanjutkan dan 00:00:55.060 --> 00:00:59.370 memotong tag penutup, gulir ke bawah dan tempel. 00:01:01.160 --> 00:01:06.450 Oke, muncul garis merah dan jika saya lihat kesalahannya, 00:01:06.450 --> 00:01:10.660 dikatakan kalau saya harus menentukan layout_height dan layout_width. 00:01:10.660 --> 00:01:12.040 Baiklah, ayo kerjakan. 00:01:13.210 --> 00:01:17.580 Jadi karena ini adalah root view, saya akan membuat match_parent. 00:01:20.050 --> 00:01:21.140 Oke, jadi 00:01:21.140 --> 00:01:25.610 Saya punya satu LinearLayout mengelilingi anak LinearLayout sekarang. 00:01:25.610 --> 00:01:30.500 Dan jika saya buka Preview, terlihat sama. 00:01:30.500 --> 00:01:35.510 Oke, yang akan saya lakukan adalah menyalin semuanya yang ada 00:01:35.510 --> 00:01:41.100 di dalam Team A LinearLayout, dan disebelah Team A, saya akan tempel. 00:01:42.160 --> 00:01:47.026 Dan akan menjadi LinearLayout Team B. 00:01:47.026 --> 00:01:52.209 Sekarang, semuanya mulai terlihat berantakan. 00:01:52.209 --> 00:01:57.264 Saya akan lakukan Cmd+A, atau pilih semua, kemudian 00:01:57.264 --> 00:02:03.520 menggunakan jalan pintas papan ketik Cmd+Option+L untuk memformat kode saya. 00:02:03.520 --> 00:02:07.930 Pada Windows, Ctrl+Alt+L, terlihat sedikit lebih baik. 00:02:07.930 --> 00:02:11.560 Saya hanya ingin memastikan kalau Anda memahami apa yang kini sedang terjadi. 00:02:11.560 --> 00:02:16.640 Gulir ke atas, ada root LinearLayout di sini 00:02:16.640 --> 00:02:21.930 Dimulai dari sini, dan jika kita gulir ke bawah, berakhir di sini. 00:02:23.320 --> 00:02:26.550 Di dalam root LinearLayout, saya gulir ke atas lagi. 00:02:28.220 --> 00:02:31.919 Ada satu anak tata letak di sini, yang mulai dari sini. 00:02:31.919 --> 00:02:35.459 Saya akan gulir perlahan. 00:02:35.459 --> 00:02:37.150 Dan berakhir di sini. 00:02:37.150 --> 00:02:38.860 Ini untuk TeamA. 00:02:38.860 --> 00:02:42.260 Dan saya ada anak LinearLayout lain yang mulai dari sini. 00:02:42.260 --> 00:02:47.418 Gulir ke bawah perlahan, akhiri di sini untuk TeamB. 00:02:47.418 --> 00:02:49.956 Baiklah, saya menemukan beberapa tanda merah di sebelah atas, 00:02:49.956 --> 00:02:52.750 Saya akan gulir ke atas lagi dan melihat kesalahannya. 00:02:54.400 --> 00:02:58.440 Orientasi salah, tidak ada orientasi ditetapkan, dan defaultnya horizontal. 00:02:58.440 --> 00:03:00.965 Namun tata letak ini memiliki banyak anak, 00:03:00.965 --> 00:03:03.793 dimana setidaknya memiliki setidaknya satu width match_parent. 00:03:03.793 --> 00:03:08.092 Saya juga ingin membuatnya horizontal, tapi ayo lanjutkan dulu dan 00:03:08.092 --> 00:03:10.010 tetapkan orientasinya. 00:03:11.360 --> 00:03:15.400 Sekali lagi, secara teknis ini tidak dibutuhkan karena defaultnya horizontal 00:03:15.400 --> 00:03:16.730 tapi akan bagus jika lebih jelas. 00:03:17.950 --> 00:03:22.168 Oke, ini tentang anak yang saling menutupi. 00:03:22.168 --> 00:03:24.334 Saya akan klik Pratinjau. 00:03:24.334 --> 00:03:27.901 Tidak terlihat berubah terlalu banyak, meskipun 00:03:27.901 --> 00:03:30.842 saya sudah menyalin dan menempel LinearLayout lain. 00:03:31.905 --> 00:03:34.345 Pasti ada hubungannya dengan kesalahan yang tadi. 00:03:35.525 --> 00:03:38.915 Dikatakan kalau ini adalah tata letak horizontal. 00:03:38.915 --> 00:03:42.615 Jadi, dia mencoba meletakkan dua LinearLayouts berdampingan 00:03:42.615 --> 00:03:46.591 tapi LinearLayout itu punya layout_width dari 00:03:46.591 --> 00:03:49.940 match_parent yang mengisi layar. 00:03:49.940 --> 00:03:54.510 Jadi, intinya LinearLayout pertama saya memenuhi layar 00:03:54.510 --> 00:03:58.510 lalu LinearLayout lain berada di sebelahnya di luar layar. 00:04:00.000 --> 00:04:03.360 Mari pikirkan tentang apa yang sebenarnya kita mau di sini. 00:04:03.360 --> 00:04:08.090 Kita mau dua tata letak menempati ruang sama dan berdampingan. 00:04:08.090 --> 00:04:11.860 Inilah saatnya untuk kita memberi layout_weights. 00:04:11.860 --> 00:04:16.267 Saya akan ambil LinearLayout pertama dan 00:04:16.267 --> 00:04:19.579 memberinya layout_weight 1. 00:04:21.140 --> 00:04:26.160 Saya juga akan atur width ke 0. 00:04:26.160 --> 00:04:29.940 Oke, kita bisa lihat kalau kita punya dua LinearLayouts, 00:04:29.940 --> 00:04:32.940 hanya saja mereka tidak tertata dengan baik. 00:04:32.940 --> 00:04:34.560 Tapi sekarang sudah lebih baik. 00:04:34.560 --> 00:04:37.807 Saya juga beri layout_weight pada LinearLayout kedua, 00:04:37.807 --> 00:04:38.877 di sebelah sini. 00:04:38.877 --> 00:04:40.500 Saya gulir ke bawah. 00:04:40.500 --> 00:04:42.190 Inilah LinearLayout kedua saya. 00:04:42.190 --> 00:04:44.250 Saya akan lakukan hal yang sama. 00:04:44.250 --> 00:04:48.186 layout_weight juga 1 00:04:48.186 --> 00:04:51.080 jadi, sekarang mereka punya layout_weight yang setara. 00:04:52.650 --> 00:04:55.630 dan saya atur lebar ke 0. 00:04:55.630 --> 00:05:00.160 Alasan saya mengatur lebar keduanya ke 0, 00:05:00.160 --> 00:05:04.588 adalah jika kedua sisi tidak diberi lebar. 00:05:04.588 --> 00:05:06.850 Maka mereka akan menguasai seluruh ruang, 00:05:06.850 --> 00:05:11.340 yaitu seluruh layar, dibagi menjadi dua 00:05:11.340 --> 00:05:14.950 karena keduanya memiliki lebar yang sama. 00:05:14.950 --> 00:05:17.650 Jika semua ini membingungkan, saya sudah menautkan beberapa video 00:05:17.650 --> 00:05:20.350 dalam catatan instruktur yang membahas tentang layout_weight. 00:05:20.350 --> 00:05:24.162 Ini sudah terlihat lumayan bagus, kecuali di sini disebut Team A. 00:05:24.162 --> 00:05:29.310 Saya akan gulir ke bawah dan mengubahnya menjadi Team B. 00:05:30.460 --> 00:05:35.420 Anda mungkin juga menyadari kalau ada kesalahan di sini dan 00:05:35.420 --> 00:05:39.760 kesalahan itu muncul karena adanya ID ganda. 00:05:39.760 --> 00:05:42.340 Ingat, saya baru saja menyalin dan menempel kode. 00:05:42.340 --> 00:05:46.090 Jadi, pada dasarnya kita punya dua hal yang sedang mencoba memiliki id sama 00:05:46.090 --> 00:05:48.030 dari team_a_score. 00:05:48.030 --> 00:05:51.800 Saya akan menggantinye ke team_b_score. 00:05:51.800 --> 00:05:53.840 Oke, sudah lumayan bagus. 00:05:53.840 --> 00:05:55.420 Agak kurang jelas. Saya perbesar. 00:05:56.800 --> 00:05:58.150 Tertulis di sini Team B. 00:05:59.290 --> 00:06:02.420 Tombol dan semua tampilan teks yang benar. 00:06:02.420 --> 00:06:03.870 Saya akan mencobanya di ponsel. 00:06:05.490 --> 00:06:07.960 Oke, sudah lumayan bagus. 00:06:07.960 --> 00:06:13.418 Sekarang, jika saya menekan tombol Team A, dia bertambah. Bagus. 00:06:13.418 --> 00:06:18.840 Jika saya tekan tombol Team B, dia juga bertambah. 00:06:18.840 --> 00:06:20.910 Ini spesial. 00:06:20.910 --> 00:06:23.480 Tapi ingat, kita hanya ingin mendapatkan XML yang tepat. 00:06:23.480 --> 00:06:25.630 Kita tidak terlalu peduli dengan Java. 00:06:25.630 --> 00:06:29.140 Tapi sekarang XML sudah bisa berjalan, kenapa tidak sekalian kita perbaiki Java?