Biar Auto-layout nggak nyusahin dirimu
Jadi ada beberapa kasus yg mana, designer tidak memikirkan kalau designnya yang menggunakan shift+A itu bakal nyusahin dirinya sendiri, karna nggak dipikirin soal resizingnya. yg penting Shift+A, and call it a day.
Padahal, Auto-Layout itu ada resizing, yang bakal mempengaruhi suatu design kalau konten nya diubah-ubah. metode resizing yang salah, justru membuat design Auto-Layoutmu itu JAUUHHH lebih nyusahin ketimbang grouping pakai Ctrl+G.
Tanpa banyak Babibu, begini caranya biar Auto-Layout mu itu mempermudah, bukan menyusahkan.
Perhatikan gambar di bawah ini.
Ini adalah contoh pop up konfirmasi untuk platform mobile. ga usah dipikirin kontennya, itu buat sample aja.
Di dalam pop-up itu, ada 3 bagian utama, Atas, tengah, bawah, gitu aja biar simple ya. bagian atas itu ada Title, close button, text penjelasan. bagian tengah ada gambar, dan bawah ada 2 button action.
Menurutmu, Resizing apa yang cocok untuk digunakan pada 3 bagian utama?
Jawabannya adalah “Fill Container”. Kenapa? Karna terserah saya.
Jadi fill container kan dipakai untuk mengisi ruang kosong pada suatu wrapper (wrapper itu bagian luar yang membungkus 2 object di dalam auto layout btw).
Kenapa nggak hug content atau fixed?
Klo hug content atau fixed, misalnya ukuran dari pop up ini mau diubah (misal awalnya lebar 335px diganti ke 343px), kalian harus ngubah lagi nih ukuran 3 bagian utama pop up ini.klo kalian pakai Fill Container, kalian ga perlu repot2 ngubah lagi.
Penampakan kalau pakai Fill Container
Penampakan kalau pakai Fixed width
Apakah cukup sampai di situ saja?
Tentu saja tidak, Ferguso!
Di dalam 3 komponen utama tadi, masih ada komponen2 kecil lainnya.
Ambil contoh yg atas aja ya karna males nulis semuanya.
Komponen bagian atas terbagi menjadi 2 auto-layout, grouping antara title dan tanda X, yang akan kita sebut group A, dan juga grouping antara group A dan deskripsi di bawahnya, yang akan kita sebut group B.
Dari kebutuhannya, title dan deskripsi ini yang akan berubah-ubah kontennya, karena itu harus ditreat dengan bener biar NGGAK NYUSAHIN.
Gimana caranya?
Simplenya sih, pada auto-layout Group A, title dibuat Fill container, tanda X dibuat fixed width, dan group A itu sendiri dibuat Fill Container.
Kenapa?
Title kalau dibuat hug content, maka si tanda X itu akan berpindah-pindah karena lebar container dari Title akan mengikuti konten di dalamnya. detailnya cek di bawah aja
Tapi bang, kok punyaku gini ya?
Titlenya udah kubuat fill container, tapi kok containernya kecil bgt kayak IQ abang?
Itu berarti spacing di group A masih kegedean. coba deh cek spacingnya itu auto-layout. pasti ratusan pixel. ganti dulu ke yg lebih kecil kayak 12px atau 16px. klo si Title itu pake Fill Container, pasti bakal keisi spacingnya ntar.
Habis itu?
Habis itu tinggal grouping deh, group A sama deskripsi di bawahnya, dan jadilah group B. modif-modif dikit spacingnya sesuai selera, habis itu si deskripsi ganti ke Fill Container, dan group A dan B diganti ke Fill Container juga.
Dah ya gitu aja. klo mau tanya-tanya, tulis di komen aja. mungkin bakal dibalas. bye
