Layouts
Hệ thống Layout của Rive cho phép bạn xây dựng thiết kế thích nghi với mọi kích thước container — trên các kích thước màn hình, mật độ thiết bị, hoặc các thành phần UI thay đổi kích thước linh hoạt. Layout kiểm soát cách các phần tử con được định kích thước, vị trí và khoảng cách, và chúng có thể được tạo hiệu ứng động giống như bất kỳ thuộc tính nào khác.
Layout là gì?
Layout là một container tự động sắp xếp các phần tử con dựa theo các quy tắc bạn thiết lập. Hãy hình dung nó như một chiếc kệ tự tổ chức lại các đồ vật khi bạn làm cho kệ rộng hơn hoặc hẹp hơn. Các phần tử con thay đổi kích thước và vị trí (reflow) thay vì chỉ đơn giản phóng to hay thu nhỏ.
Layout sử dụng các quy tắc lấy cảm hứng từ Flexbox (Flexbox là một hệ thống layout web phổ biến — Rive dùng khái niệm tương tự): một trục chính (hướng các phần tử con xếp chồng), một trục chéo (hướng vuông góc), khoảng cách, căn chỉnh, và các chế độ định kích thước.
Thêm Layout
- Chọn một artboard hoặc group trong Inspector.
- Bật thuộc tính Layout, hoặc nhấp vào biểu tượng Layout trên Toolbar.
Inspector sau đó sẽ hiển thị các thuộc tính dành riêng cho layout.
Sizing (Định kích thước)
Mỗi layout — và mỗi phần tử con bên trong layout — có một chế độ định kích thước trên từng trục:
| Chế độ | Hành vi |
|---|---|
| Fixed | Kích thước pixel cố định. Không thay đổi theo nội dung hoặc phần tử cha. |
| Hug | Thu nhỏ hoặc mở rộng để vừa khít với các phần tử con. |
| Fill | Mở rộng để lấp đầy không gian trống trong layout cha. |
Fit và Alignment (Vừa khít và Căn chỉnh)
Fit kiểm soát cách một thành phần co giãn bên trong container có kích thước cố định. Dùng khi nội dung của bạn cần lấp đầy một không gian có hình dạng khác với bản thân nội dung đó:
| Fit | Hành vi |
|---|---|
| Fill | Co giãn để lấp đầy hoàn toàn container. Có thể bị cắt bớt. (Lưu ý: "Fill" ở đây với vai trò là tùy chọn Fit khác với "Fill" ở chế độ sizing — ở đây có nghĩa là đồ họa phóng to để lấp đầy container, không phải chiếm không gian còn lại trong layout cha.) |
| Contain | Co giãn để vừa trong container mà không bị cắt. |
| Cover | Co giãn cho đến khi cả hai trục đều được phủ kín. Có thể cắt các cạnh. |
| Fit Width | Co giãn để khớp với chiều rộng của container. |
| Fit Height | Co giãn để khớp với chiều cao của container. |
| None | Không co giãn; sử dụng kích thước tự nhiên của thành phần (kích thước mà nội dung muốn có dựa trên chính nội dung của nó). |
| Scale Down | Giống Contain, nhưng không bao giờ phóng to vượt quá kích thước tự nhiên (kích thước mà nội dung muốn có dựa trên chính nội dung của nó). |
Alignment xác định vị trí neo của nội dung trong container — lưới 3×3 (Trên Trái → Dưới Phải), hoặc giá trị X/Y chính xác.
Công cụ Layout
Layout Tool trên Toolbar cung cấp các handle tương tác để bạn thiết lập kích thước và khoảng cách trực tiếp trên Stage, mà không cần mở Inspector.
Sử dụng các handle layout tương tác trên Stage.
Tham số Layout
Dùng các thuộc tính trong Inspector để tinh chỉnh hành vi của layout:
- Gap — Khoảng cách giữa các phần tử con dọc theo trục chính.
- Padding — Khoảng cách giữa viền của layout và các phần tử con.
- Main Axis Alignment — Start, center, end, space-between, space-around, space-evenly.
- Cross Axis Alignment — Start, center, end, stretch, baseline.
- Wrap — Cho phép các phần tử con xuống dòng/cột mới khi tràn ra ngoài.
Tài liệu tham chiếu đầy đủ cho gap, padding, và các tùy chọn căn chỉnh trục.
Layout Styles (Kiểu Layout)
Layout Styles là tập hợp các thuộc tính layout có thể tái sử dụng — giống như một preset được đặt tên mà bạn có thể áp dụng cho nhiều layout cùng lúc. Áp dụng cùng một style cho nhiều layout để tất cả cập nhật đồng bộ khi bạn thay đổi style đó.
Tạo và áp dụng các định nghĩa style có thể tái sử dụng trên nhiều layout.
N-Slicing
N-Slicing chia một hình ảnh hoặc artboard thành các vùng co giãn độc lập. Các góc giữ nguyên kích thước gốc; chỉ các cạnh và phần trung tâm mới bị kéo dãn. Hãy hình dung như một con dấu cao su — các góc không bao giờ bị biến dạng, nhưng các cạnh kéo dãn đến bất kỳ chiều rộng nào.
Dùng N-Slicing cho:
- Nền nút UI phóng to theo nhãn văn bản
- Panel hoặc modal thay đổi kích thước mà không làm méo đường viền
- Hình ảnh kiểu nine-patch (nine-patch là kỹ thuật chia hình ảnh thành 9 vùng để các góc và cạnh co giãn mà không bị méo — giống như bong bóng hội thoại kéo dài mà không bị bóp méo các góc)
Thiết lập các vùng N-Slice và cấu hình tỷ lệ co giãn theo từng vùng.
Cuộn (Scrolling)
Một layout có thể trở thành scrollable — các phần tử con tràn ra ngoài vùng layout sẽ bị ẩn đi và hiện ra thông qua thao tác cuộn tại runtime (khi ứng dụng của bạn đang thực sự chạy cho người dùng).
Để bật cuộn:
- Đặt layout về kích thước cố định (fixed size) trên trục cuộn.
- Bật Overflow: Scroll hoặc Overflow: Scroll X / Scroll Y.
- Tại runtime, điều khiển vị trí cuộn bằng input người dùng hoặc một state machine (đồ thị kiểm soát logic animation).
Cấu hình layout có thể cuộn và kết nối với các tương tác runtime.
Tạo hiệu ứng động cho Layout
Các thuộc tính layout — sizing, padding, gap, alignment — đều có thể tạo hiệu ứng động trong Timeline. Dùng layout animation để xây dựng hiệu ứng chuyển đổi kích thước mượt mà, menu thu gọn, hoặc các thay đổi trạng thái linh hoạt.
Tạo hiệu ứng động cho các thuộc tính layout trên timeline.