Các bộ điều chỉnh kích thước và ràng buộc

Cùng với việc đặt kích thước cơ bản cho các đối tượng giao diện người dùng, bạn có thể sử dụng các bộ điều chỉnh kích thước để tỷ lệ hóa một đối tượng theo tỷ lệ hoặc tự động thay đổi kích thước nó. Bạn cũng có thể chèn ràng buộc kích thước để kiểm soát tỷ lệ khung hình, hoặc đặt một kích thước tối thiểu và tối đa cho kích thước hoặc kích thước văn bản.

Tỷ lệ

Một đối tượng UIScale lưu trữ một giá trị số mà nhân với thuộc tính AbsoluteSize của đối tượng GuiObject cha. Ví dụ, nếu bạn muốn một đối tượng lớn gấp đôi kích thước hiện tại của nó, bạn có thể chèn một đối tượng UIScale với thuộc tính Scale là 2.

Bộ điều chỉnh này rất hữu ích để "phóng to" trong khi thiết kế một giao diện người dùng chi tiết trong Studio, vì nó tỷ lệ hóa đối tượng và tất cả các con của nó, bao gồm bất kỳ bộ điều chỉnh giao diện nào đã áp dụng như UIStroke hoặc UICorner. Nó cũng hữu ích để tween kích thước của một đối tượng, chẳng hạn như để tăng nhẹ kích thước của một nút khi một người chơi di chuột qua nó.

Thay đổi kích thước tự động

Thuộc tính AutomaticSize tự động thay đổi kích thước của một GuiObject cha theo kích thước của các con của nó. Bạn có thể sử dụng thuộc tính này trong nhiều trường hợp khác nhau, bao gồm:

• Mở rộng một GuiObject để phù hợp với văn bản đã được địa phương hóa sang nhiều ngôn ngữ.
• Cho phép người dùng nhập văn bản trong một TextBox, tự động điều chỉnh kích thước của nó dựa trên lượng văn bản đã nhập.
• Tự động điều chỉnh kích thước của các đối tượng văn bản sử dụng đánh dấu văn bản phong phú, bao gồm kiểu và kích thước phông chữ.

Bạn có thể kích hoạt thuộc tính AutomaticSize cho bất kỳ GuiObject nào. Mặc định, nó được đặt thành None, nhưng bạn có thể thay đổi giá trị của nó để có kiểm soát cụ thể về chiều nào đó mà GuiObject thay đổi kích thước để phù hợp với nội dung của nó.

Để kích hoạt thay đổi kích thước tự động:

1. Trong cửa sổ Explorer, nhấp vào bất kỳ GuiObject nào, chẳng hạn như Frame, TextBox, hoặc ImageLabel.

2. Trong cửa sổ Properties, điều hướng đến thuộc tính AutomaticSize (AutomaticCanvasSize cho ScrollingFrame) và đặt nó thành một trong các tùy chọn sau:

   • X — Thay đổi kích thước nội dung theo chiều ngang.
   • Y — Thay đổi kích thước nội dung theo chiều dọc.
   • XY — Thay đổi kích thước nội dung cả theo chiều ngang và chiều dọc.

   

Khi thay đổi kích thước tự động đã được thiết lập, hãy lưu ý rằng các thuộc tính khác của đối tượng hành xử như sau:

Tương tự như khái niệm về kích thước của một đối tượng, AutomaticSize xem xét thuộc tính AnchorPoint khi thay đổi kích thước nội dung. Ví dụ, video sau đây hiển thị ba TextLabels tự động thay đổi kích thước từ điểm neo của chúng.

• Nhãn phía trên có giá trị AnchorPoint là (0, 0.5) mà neo nó vào giữa bên trái.
• Nhãn ở giữa có giá trị AnchorPoint là (0.5, 0.5) mà neo nó vào trung tâm.
• Nhãn phía dưới có giá trị AnchorPoint là (1, 0.5) mà neo nó vào giữa bên phải.

Ràng buộc

Có ba loại ràng buộc bạn có thể sử dụng cho một đối tượng giao diện người dùng: kích thước, kích thước văn bản, và tỷ lệ khung hình. Để sử dụng một ràng buộc, bạn phải đặt nó làm một đối tượng con của GuiObject mà bạn muốn ràng buộc.

Kích thước

UISizeConstraint xác định một kích thước tối thiểu và tối đa cho một GuiObject. Ràng buộc này đảm bảo rằng GuiObject không trở nên quá nhỏ hoặc quá lớn trên các kích thước màn hình khác nhau.

Ví dụ, nếu bạn đặt thuộc tính MinSize thành (200, 200) và thuộc tính MaxSize thành (400, 400), GuiObject không thể giảm kích thước nhỏ hơn 200×200 pixel hoặc lớn hơn 400×400 pixel.

Kích thước văn bản

UITextSizeConstraint xác định một kích thước phông chữ tối thiểu và tối đa cho một GuiObject chứa văn bản, chẳng hạn như TextLabel, TextButton, hoặc TextBox. Ràng buộc này đảm bảo rằng văn bản bên trong GuiObject không trở nên khó đọc hoặc quá lớn.

Nếu bạn bật thuộc tính TextScaled của GuiObject cha, kích thước văn bản sẽ thay đổi theo kích thước của container và tuân theo các ràng buộc ngay cả khi đối tượng trở nên nhỏ hơn hoặc lớn hơn so với các giá trị MinTextSize và MaxTextSize.

Ví dụ, đối tượng TextLabel sau đây có một UITextSizeConstraint với giá trị MinTextSize là 50 và giá trị MaxTextSize là 80. Ngay cả khi TextLabel trở nên nhỏ hơn, phông chữ không bao giờ nhỏ hơn 50 pixel, và khi đối tượng trở nên lớn, phông chữ không vượt quá 80 pixel.

Tỷ lệ khung hình

UIAspectRatioConstraint thực thi một tỷ lệ chiều rộng trên chiều cao trên một GuiObject bất kể kích thước cơ bản của nó, ngay cả khi kích thước đó được đặt dưới dạng tỷ lệ phần trăm của cha nó. Ví dụ, chèn ràng buộc này làm một đối tượng con của một Frame và đặt thuộc tính AspectRatio của ràng buộc thành 2 (2:1) giữ cho chiều rộng của khung gấp đôi chiều cao của nó. Tương tự, đặt thuộc tính AspectRatio của ràng buộc này thành 0.5 (0.5:1) giữ cho chiều rộng của khung bằng một nửa chiều cao của nó.

Đặt thuộc tính AspectRatio của ràng buộc này thành mặc định là 1 (1:1) là một cách thuận tiện để ngăn chặn việc thay đổi kích thước không tỉ lệ/méo mó của một ImageLabel với tài sản hình ảnh vuông, chẳng hạn như một hình thu nhỏ avatar.