Untuk memusatkan konten di tengah, kita dapat menggunakan teknik yang sudah saya bahas sebelumnya,
menata gaya dan secara khusus, flexbox.
Jadi pada modal kita, kita memiliki pandangan itu atau dalam modal kita, kita memiliki pandangan itu, itulah pandangan root kita,
itu satu-satunya elemen dalam modal itu
dan kemudian pandangan ini tentu saja memiliki elemen anak lain tetapi itulah satu-satunya anak langsung dari modal kita.
Di sana, kami memiliki gaya wadah masukan yang kami terapkan dan di sana, kami saat ini
menetapkan arah fleksibel baris.
Sekarang tentu saja kita bisa meninggalkan itu tetapi saya akan mengatakan dalam modal jika kita menyajikannya
pada layar penuh seperti ini, saya sebenarnya baik-baik saja dengan orientasi vertikal sehingga kita memiliki input dan di bawahnya, tombol.
Jadi saya akan mengubah ini kembali ke kolom atau karena ini adalah default, cukup hapus arah flex
ini dan sekarang saya ingin memusatkan ini secara horizontal dan vertikal
dan untuk itu, kita dapat mengatur justifikasi konten ke pusat di sini dan menyelaraskan item ke pusat tetapi
itu saja tidak akan berhasil.
Anda dapat melihat apakah Anda membuka modal, itu masih jauh
di atas dan alasannya
adalah bahwa wadah input kami, sehingga pandangan kami menetapkan gaya ini, secara default tidak mengambil ruang
yang tersedia penuh itu bisa di tampilan
sekitarnya, jadi dalam hal ini di ibukota. Modal secara teoritis mengambil tinggi dan lebar penuh layar
tetapi tampilan tidak mengambil ruang penuh yang tersedia secara
default, itu
hanya cara kerjanya, itulah pengaturan default.
Hanya membutuhkan ruang yang dibutuhkan anak-anak, jadi input
teks dan tombol.
Jadi tampilan pada dasarnya memiliki tinggi input teks dan tombol digabungkan dan
kemudian juga lebar anak terluas dalam hal ini, jadi dari input teks di sini dan omong-omong di sini, Android
hanya tidak memperbarui dengan benar itu sebabnya Anda melihat
ini output aneh di sini, Anda dapat mengabaikannya untuk saat ini. Jadi untuk membuat tampilan mengambil ruang penuh yang tersedia di sini, Anda cukup pergi ke gaya yang
Anda terapkan ke tampilan, dalam hal ini
gaya wadah masukan kami di sini dan atur flex ke yang di sini. Flex adalah properti yang digunakan bersamaan dengan flexbox dan seperti
yang Anda pelajari sebelumnya dalam modul ini, dalam kuliah flexbox tambahan ini, flex memungkinkan Anda untuk
mengontrol seberapa banyak ruang yang digunakan berbagai item di dalam kotak flexbox dan jika itu satu-satunya item, ini
cukup memastikan
bahwa wadah ini akan mengambil semua ruang yang tersedia.
Anda juga dapat mengatur ini untuk melenturkan dua, nilai yang tepat tidak masalah di sini jika hanya anak
itu, tetapi Anda perlu mengatur fleksibel untuk memastikan bahwa ini membutuhkan ruang penuh yang tersedia.
Jika Anda tidak melakukannya, itu hanya akan mengambil ruang sebanyak elemen anak-nya, jika Anda
mengatur flex, itu akan mengambil ruang sebanyak yang diberikan oleh elemen induknya, sehingga sebagai
elemen induk dari pandangan
itu, modal dalam hal ini memberikan tampilan.
Jadi dengan flex yang ditambahkan di sini, jika Anda sekarang menyimpan ini, di iOS, Anda melihat sekarang ini terpusat dengan baik dan
juga melihat ini di Android, apa yang dapat Anda lakukan adalah Anda dapat membuka pengalih tugas,
tutup aplikasi ini di sini
dan tekan a di sini untuk memulai kembali aplikasi ini di
Android, tidak seperti modalnya dan sekarang di sini, Anda juga melihat itu. Sekarang penyesuaian kecil adalah sedikit jarak antara tombol dan input yang ingin
saya miliki dan untuk itu, saya
akan pergi ke input dan menambahkan margin bawah 10 di sini tetapi dengan itu, saya cukup senang tentang itu sekali lagi, sayangnya Android benar-benar
memiliki beberapa masalah di sini dengan modal saya, jadi mari kita tutup dan lihat
apakah itu terlihat
bagus, ya ini bagus.
Sekarang saya ingin memastikan bahwa ketika kita klik add di sini, kita sekarang benar-benar menutup modal.