1 00:00:02,830 --> 00:00:08,740 Sekarang kami memiliki masalah lain dalam aplikasi ini di sini karena setelah semua ini diselesaikan di sini, 2 00:00:08,740 --> 00:00:12,200 jika kita cepat pergi ke sana, pastikan bahwa kita 3 00:00:12,220 --> 00:00:16,120 menyelesaikan ini, maka kita memiliki layar ini dan layar ini juga rusak. 4 00:00:16,120 --> 00:00:17,670 Kami punya dua masalah 5 00:00:17,680 --> 00:00:23,190 di sini sebenarnya, satu adalah bahwa layar tidak dapat digulir yang bukan masalah pada perangkat yang 6 00:00:23,200 --> 00:00:29,050 lebih besar di mana kami memiliki lebih tinggi tetapi di sini, kami tidak dapat memeras semua konten 7 00:00:29,050 --> 00:00:36,640 di layar, jadi kami mungkin ingin membuatnya dapat digulir hanya untuk menjadi aman dan / atau sebagai alternatif, kami memastikan bahwa kami dijamin 8 00:00:36,640 --> 00:00:43,270 untuk memasukkan semuanya ke layar dan dijamin bahwa ini adalah masalahnya, kami harus pergi ke permainan di atas layar dan 9 00:00:43,270 --> 00:00:50,230 menghitung ketinggian kami di sini secara dinamis, terutama ketinggian gambar di sini yang saat ini kami buat dengan hardcoding hingga 300 10 00:00:50,230 --> 00:00:52,810 piksel yang terlalu besar pada perangkat kecil. 11 00:00:52,810 --> 00:00:55,950 Sekarang Anda sudah belajar tentang solusi untuk 12 00:00:56,050 --> 00:01:02,880 itu, kita dapat kembali menggunakan dimensi API dengan mengimpornya dari React Native dan dengan dimensi yang diimpor, 13 00:01:02,890 --> 00:01:11,430 kita dapat pergi ke stylesheet kita dan pada wadah gambar, kita sekarang dapat mengatakan dimensi mendapatkan lebar jendela dan sekarang katakanlah 14 00:01:12,150 --> 00:01:21,590 untuk wadah gambar, untuk gambar di sini, kami ingin memiliki lebar mungkin 70% dari lebar yang tersedia dan kami ingin memiliki nilai yang 15 00:01:21,590 --> 00:01:24,860 sama dengan ketinggian, jadi saya hanya akan menyalinnya 16 00:01:24,860 --> 00:01:25,920 di sana. 17 00:01:25,920 --> 00:01:32,180 Penting di sini, kami tidak menggunakan ketinggian karena gambar tidak boleh 70% dari tinggi kami yang 18 00:01:32,480 --> 00:01:32,960 tersedia, 19 00:01:33,200 --> 00:01:38,390 melainkan harus memiliki tinggi yang sama dengan lebar dan itu dihitung pada lebar perangkat, 20 00:01:38,420 --> 00:01:45,260 jadi kami menggunakan lebar di sana demikian juga. Sekarang di sini radius perbatasan harus setengahnya, jadi kita bisa menggunakannya 21 00:01:45,380 --> 00:01:50,840 di sini juga dan membaginya menjadi dua dan kita akan memiliki radius perbatasan yang sempurna untuk lebar yang 22 00:01:50,900 --> 00:01:54,170 dihitung secara dinamis itu. Jadi itu satu hal penting. 23 00:01:54,200 --> 00:01:59,030 Sekarang kami juga punya beberapa ukuran lain yang kami siapkan, seperti margin vertikal di sini yang 24 00:01:59,030 --> 00:02:07,600 kami hardcode ke 30, sama untuk wadah hasil dan kami mungkin ingin mengubahnya juga. Jadi di sini kita juga bisa mengatakan dimensi mendapatkan 25 00:02:07,600 --> 00:02:11,380 jendela, dalam hal ini tinggi dan mungkin membaginya 26 00:02:11,380 --> 00:02:21,010 dengan katakanlah 20 dan lihat apakah itu terlihat bagus dan juga ada margin vertikal, mungkin bagi ini dengan 40 karena 27 00:02:21,040 --> 00:02:26,720 itu 15, ini 30, jadi mari kita bagi ini dengan 40, jika 28 00:02:26,740 --> 00:02:31,960 kita membaginya dengan 20 untuk memiliki hubungan yang sama antara kedua 29 00:02:31,960 --> 00:02:34,370 vertikal margin ini lagi. 30 00:02:34,510 --> 00:02:35,980 Jadi mari kita 31 00:02:36,010 --> 00:02:41,150 selesaikan ini lagi dan mari kita lihat apa hasilnya, lebih baik, sekarang setidaknya 32 00:02:41,180 --> 00:02:44,100 kita bisa melihat tombolnya tetapi masih belum sempurna. 33 00:02:44,240 --> 00:02:50,150 Margin ini di sini tentu masih terlalu besar dan juga ukuran font, kita bisa menyusutkan ini juga. 34 00:02:50,330 --> 00:02:56,570 Jadi gambar yang lebih bulat, kita dapat membagi tinggi dengan 30 di sini untuk margin ini 35 00:02:56,570 --> 00:03:03,970 kita sedang mengatur dan kemudian pergi ke 60 untuk margin hasil kontainer vertikal ini dan untuk ukuran font di 36 00:03:04,130 --> 00:03:13,860 sini, di sini kita dapat menggunakan jika memeriksa apakah kita ingin dan misalnya memeriksa ketinggian kami yang tersedia di sini dan jika itu katakanlah lebih 37 00:03:13,860 --> 00:03:25,210 kecil dari 400, maka kami menggunakan 16 di sini dan sebaliknya, kami menggunakan 20. Sekarang yang terakhir tetapi tidak kalah penting untuk memastikan bahwa kita dapat 38 00:03:25,210 --> 00:03:31,310 menggulir karena kadang-kadang dengan semua penyesuaian, kita masih tidak dapat memasukkannya ke layar, 39 00:03:31,310 --> 00:03:35,400 setidaknya tidak tanpa membuat semuanya super kecil, kita 40 00:03:35,510 --> 00:03:42,990 mungkin ingin mengimpor gulir itu lihat di sini dan bungkus tampilan kita dengan itu, jadi tambahkan 41 00:03:42,990 --> 00:03:50,730 tampilan gulir di sini di sekitar tampilan kita untuk membuat itu dapat digulir dan sekarang mari 42 00:03:50,850 --> 00:03:52,860 kita lihat ini lagi, 43 00:03:52,880 --> 00:03:53,860 mari 44 00:04:03,670 --> 00:04:10,700 selesaikan ini, sekarang ini terlihat lebih baik. Ini pas di layar dan jika perlu, kita juga akan dapat 45 00:04:10,700 --> 00:04:14,090 menggulirnya, kita dapat melihat bahwa di iPhone by the way, di 46 00:04:19,360 --> 00:04:22,390 sana jika kita menyelesaikan ini, pada iPhone kita 47 00:04:22,390 --> 00:04:27,010 selalu dapat menggulirkan sedikit dan memantul kembali, kami telah mengaktifkan scrolling dan oleh karena itu 48 00:04:27,040 --> 00:04:32,920 sekarang ini terlihat bagus di iPhone tetapi juga pada perangkat ini di mana kami mengurangi ukuran font sedikit, bekerja 49 00:04:33,070 --> 00:04:36,420 pada spasi di sini sedikit dan jika itu akan melampaui 50 00:04:36,520 --> 00:04:45,760 batas kami, maka kami bisa gulir, jadi kami akan selalu dapat berinteraksi dengan game kami. Jadi itulah dimensi API di sini dan dimensi API benar-benar membantu kami 51 00:04:45,760 --> 00:04:52,250 membangun antarmuka pengguna yang terlihat bagus pada ukuran perangkat yang berbeda dan saat Anda belajar, ada berbagai cara 52 00:04:52,250 --> 00:04:59,230 menggunakannya - untuk menghitung ukuran secara dinamis, baik untuk lebar atau tinggi atau margin dan juga tentu saja jika 53 00:04:59,440 --> 00:05:05,710 pernyataan untuk hanya membuat konten yang berbeda, melampirkan gaya yang berbeda atau objek gaya yang berbeda berdasarkan 54 00:05:05,710 --> 00:05:10,750 kondisi lebar atau tinggi yang Anda atur di sini tapi itu tidak semua 55 00:05:10,750 --> 00:05:16,180 karena pengguna juga dapat mengubah orientasi perangkat saat aplikasi berjalan dan itu juga terkadang berarti 56 00:05:16,180 --> 00:05:20,440 bahwa kita perlu mengubah gaya dan / atau tata letak.