Layouts
Sistem Layout Rive memungkinkan Anda membuat desain yang beradaptasi dengan ukuran container apa pun — di berbagai ukuran layar, kepadatan perangkat, atau komponen UI yang berubah ukuran secara dinamis. Layout mengontrol bagaimana children diukur, diposisikan, dan diberi jarak, serta dapat dianimasikan seperti properti lainnya.
Apa Itu Layout?
Layout adalah container yang secara otomatis mengatur children-nya berdasarkan aturan yang Anda tetapkan. Bayangkan seperti rak yang menata ulang isinya saat Anda memperlebar atau mempersempit rak tersebut. Children akan mengubah ukuran dan posisi (reflow) alih-alih hanya diperbesar atau diperkecil.
Layout menggunakan aturan berbasis Flexbox (Flexbox adalah sistem layout web yang populer — Rive menggunakan konsep yang sama): sumbu utama (arah tumpukan children), sumbu silang (arah tegak lurus), jarak, penyelarasan, dan mode pengukuran.
Menambahkan Layout
- Pilih artboard atau grup di Inspector.
- Aktifkan properti Layout, atau klik ikon Layout di Toolbar.
Inspector kemudian akan menampilkan properti khusus layout.
Sizing
Setiap layout — dan setiap child di dalam layout — memiliki mode ukuran pada setiap sumbu:
| Mode | Perilaku |
|---|---|
| Fixed | Ukuran piksel tertentu. Tidak berubah mengikuti konten atau parent. |
| Hug | Mengecil atau membesar untuk menyesuaikan children-nya. |
| Fill | Membesar untuk mengisi ruang yang tersedia di layout parent. |
Fit dan Alignment
Fit mengontrol bagaimana suatu komponen diskalakan di dalam container berukuran tetap. Gunakan ini saat konten Anda perlu mengisi ruang yang bentuknya berbeda dari konten itu sendiri:
| Fit | Perilaku |
|---|---|
| Fill | Diskalakan untuk mengisi container sepenuhnya. Mungkin terpotong. (Catatan: "Fill" sebagai opsi Fit berbeda dari "Fill" sebagai mode ukuran — di sini artinya grafis diperbesar untuk mengisi container, bukan mengambil sisa ruang di layout parent.) |
| Contain | Diskalakan agar muat di dalam container tanpa terpotong. |
| Cover | Diskalakan hingga kedua sumbu tertutup. Mungkin memotong tepi. |
| Fit Width | Diskalakan menyesuaikan lebar container. |
| Fit Height | Diskalakan menyesuaikan tinggi container. |
| None | Tidak ada penyekalaan; menggunakan ukuran intrinsik komponen (ukuran alami yang diinginkan konten berdasarkan isinya sendiri). |
| Scale Down | Seperti Contain, tetapi tidak pernah diperbesar melebihi ukuran intrinsik (ukuran alami yang diinginkan konten berdasarkan isinya sendiri). |
Alignment menentukan tempat konten dijangkar di dalam container — berupa grid 3×3 (Kiri Atas → Kanan Bawah), atau nilai X/Y numerik yang presisi.
Layout Tools
Layout Tool di Toolbar memberikan handle interaktif untuk mengatur ukuran dan jarak langsung di Stage, tanpa perlu membuka Inspector.
Gunakan handle layout interaktif di Stage.
Layout Parameters
Gunakan properti Inspector berikut untuk menyempurnakan perilaku layout:
- Gap — Jarak antar children di sepanjang sumbu utama.
- Padding — Jarak antara tepi layout dan children-nya.
- Main Axis Alignment — Start, center, end, space-between, space-around, space-evenly.
- Cross Axis Alignment — Start, center, end, stretch, baseline.
- Wrap — Apakah children berpindah ke baris/kolom baru saat melampaui batas.
Referensi lengkap untuk opsi gap, padding, dan penyelarasan sumbu.
Layout Styles
Layout Styles adalah kumpulan properti layout yang dapat digunakan ulang — seperti preset bernama yang dapat Anda terapkan ke beberapa layout sekaligus. Terapkan style yang sama ke beberapa layout agar semuanya diperbarui serentak saat Anda mengubah style tersebut.
Buat dan terapkan definisi style yang dapat digunakan ulang di berbagai layout.
N-Slicing
N-Slicing membagi gambar atau artboard menjadi beberapa region yang diskalakan secara independen. Sudut-sudut tetap pada ukuran aslinya; hanya tepi dan bagian tengah yang diregangkan. Bayangkan seperti bingkai stempel karet — sudut tidak pernah terdistorsi, tetapi sisi-sisinya dapat meregang ke lebar berapa pun.
Gunakan N-Slicing untuk:
- Latar belakang tombol UI yang membesar mengikuti labelnya
- Panel atau modal yang mengubah ukuran tanpa mendistorsi bingkai
- Gambar bergaya nine-patch (nine-patch adalah teknik yang membagi gambar menjadi 9 zona agar sudut dan tepi dapat diskalakan tanpa distorsi — seperti balon ucapan yang dapat meregang tanpa menekan sudut-sudutnya)
Atur region N-Slice dan konfigurasi penyekalaan per region.
Scrolling
Sebuah layout dapat dijadikan scrollable — children yang melampaui batas layout akan tersembunyi dan ditampilkan melalui interaksi scroll saat runtime.
Untuk mengaktifkan scrolling:
- Atur layout ke ukuran tetap (fixed size) pada sumbu scroll.
- Aktifkan Overflow: Scroll atau Overflow: Scroll X / Scroll Y.
- Saat runtime, kendalikan posisi scroll dengan input pengguna atau state machine (grafik yang mengontrol logika animasi).
Konfigurasi layout yang dapat di-scroll dan hubungkan ke interaksi runtime.
Menganimasikan Layout
Properti layout — sizing, padding, gap, alignment — semuanya dapat dianimasikan di Timeline. Gunakan animasi layout untuk membuat transisi resize yang halus, menu yang dapat dilipat, atau perubahan tampilan responsif.
Animasikan properti layout di timeline.