Thiết kế UI 9-Slice

Khi tạo UI với các biên giới và góc tùy chỉnh, bạn thường có nhu cầu phải tạo các thành phần trên các tỷ lệ khối lập phương và môi trường xung quanh text địa phương hóa hoặc các nội dung khác có kích thước khác nhau. Điều này cho phép bạn tạo các thành ph

Dưới phương pháp 9-Slice , một hình ảnh (một tài nguyên hình ảnh Roblox) được chia thành chín sub-ảnh, mỗi sub-ảnh có các quy tắc nâng cao khác nhau.

Chỉnh sửa Studio

Việc cắt cấu hình là có thể bằng cách trực tiếp thiết lập Enum.ScaleType và các thuộc tính cắt trên một nhãn hình ảnh hoặc nút, nhưng Studio's built-in 9-Slice Editor là thân thiện hơn.

Mở Editor

Để mở trình chỉnh nội tại 9-Slice Editor trong Studio:

1. Chọn một ImageLabel hoặc ImageButton với một ID tài sản hợp lệ được nhập vào trong trường Hình ảnh của nó.

1. Đặt ScaleType tính năng lên Slice .

1. Nhấp vào thuộc tính SliceCenter đã xuất hiện, sau đó nhấp vào … trong hàng.

1. Trong cái tùy chỉnh mở, 4 dòng màu đỏ khắc chồng lên hình ảnh, diễn tả các mép của các lát. Kích thước nguồn hình ảnh cũng được hiển thị.

Cài đặt Offsets

Trong Studio, kéo các dòng màu đỏ để đặt mức dịch chuyển từ các góc trái, phải, trên và dưới của hình ảnh.

Khi bạn thay đổi lại các dòng dẫn đến các mảnh thả, thì thành phần UI tự động cập nhật để hiển thị kết quả.