STDIO
Tìm kiếm gần đây
    • Nội dung
    • QR Code
    • 0
    • Bình luận
    • Sao chép

    Sử Dụng Auto Layout Sắp Xếp Các Đối Tượng UI

    Sử dụng AutoLayout để tự động sắp xếp layout và vị trí các component trong Unity.

    Rye Nguyen

    08/08/2015
    25/09/2020
    5 phút đọc
    Sử Dụng Auto Layout Sắp Xếp Các Đối Tượng UI

    Trong 1 số trường hợp cần tự động hoá việc sắp xếp các đối tượng trong chương trình do số lượng đối tượng quá nhiều, gây hao tốn thời gian nếu quản lý thủ công. Để giải quyết vấn đề trên, Unity đã hiện thực sẵn 1 số component giúp lập trình viên quản lý vị trí các đối tượng được tốt hơn.

    Auto Layout

    Hệ thống Auto Layout cung cấp giải pháp để quản lý vị trí và kích thước của các đối tượng UI. Khi sử dụng 1 hệ thống Auto Layout, đối tượng Rect Transform của đối tượng sẽ bị khoá lại và quản lý bởi Auto Layout.

    Auto Layout được xây dựng dựa trên mô hình Controller - Elements, 1 đối tượng quản lý các đối tượng con.

    Đối tượng con không trực tiếp quản lý vị trí và kích thước của nó mà đối tượng Controller sẽ nắm giữ các thông tin này và quản lý tự động.

    Khi thêm hoặc loại bỏ 1 đối tượng, vị trí của các đối tượng còn lại sẽ được tính toán và thay đổi phù hợp.

    Các loại Auto Layout

    Unity hỗ trợ 1 số cách quản lý các element, trong đó component Layout Group quản lý vị trí của các element thành nhóm.

    Layout Group không quản lý chính đối tượng chứa nó mà chỉ quản lý tất cả các đối tượng con. Thành phần Rect Transform của nó được quản lý thủ công hoặc tự động dựa trên 1 Auto Layout khác, có thể lồng nhau. Với bất kì kích thước nào của đối tượng chứa Layout Group (gọi tắt là đối tượng Controller), các đối tượng con đều được tính toán vị trí theo các thông số cho trước. Unity hỗ trợ 3 loại Layout Group với các hiệu quả và mục đích khác nhau.

    Horizontal Layout Group

    Component Horizontal Layout Group sắp xếp các đối tượng con liền kề nhau thành 1 hàng ngang, kích thước của element được tính toán dựa trên PaddingSpacing của đối tượng Controller.

    ss_1

    Các thuộc tính của Horizontal Layout Group như sau:

    • Padding: 4 thuộc tính Left, Right, TopBottom lần lượt tương ứng với các cạnh của Layout Group. Với padding càng lớn, khu vực hiển thị đối tượng sẽ càng bị thu hẹp vào trong Layout Group.
    • Spacing: khoảng cách giữa các đối tượng con. Khoảng cách này nên xem xét và thiết lập vừa phải, tránh quá nhỏ hoặc quá lớn. Với Spacing càng lớn, kích thước các đối tượng sẽ càng giảm cho đến khi không còn hiển thị được nữa.
    • Child Alignment: vị trí bắt đầu sắp xếp đối tượng đầu tiên. Các đối tượng tiếp theo sẽ dựa vào đối tượng đầu tiên này để tính toán vị trí phù hợp.
    • Child Force Expand: tuỳ chọn này sẽ override kích thước của các đối tượng. Các đối tượng sẽ được thay đổi kích thước để phủ toàn bộ phần không gian của đối tượng Controller.

    Ứng dụng

    Horizontal Layout Group thường được sử dụng kết hợp với Scroll Rect để tạo ra 1 menu các tuỳ chọn theo hàng ngang, trong trường hợp danh sách đối tượng con khá nhiều, hay số lượng có thể tuỳ biến thêm hoặc bớt trong Runtime.

    Vertical Layout Group

    Nếu Horizontal Layout Group quản lý và sắp xếp các đối tượng theo chiều ngang thì Vertical Layout Group lại quản lý theo chiều dọc. Tất cả các đối tượng sẽ nằm thẳng hàng với nhau trên 1 cột và lần lượt từ trên xuống dưới hoặc ngược lại, tuỳ vào tuỳ chọn Child Alignment được thiết lập ra sao. Chiều cao của các đối tượng sẽ được tính toán tự động.

    ss_2

    Về cơ bản thì Vertical Layout Group khá giống Horizontal Layout Group về các thuộc tính và cách sử dụng. 

    Grid Layout Group

    Loại Layout Group được ứng dụng nhiều nhất trong Unity là Grid Layout Group. Grid Layout Group sắp xếp các đối tượng con thành 1 mạng lưới. Các thông số quy định cách sắp xếp của Grid Layout Group như sau:

    ss_3
    • PaddingSpacing: tương tự như các loại Layout Group nói trên, Padding và Spacing là các thuộc tính quy định khoảng cách giữa các đối tượng con với nhau và với cạnh của đối tượng Controller. Do sắp xếp theo dạng mạng lưới nên Spacing có 2 giá trị tương ứng với khoảng cách về chiều dài và rộng.
    • Cell Size: kích thước sẽ được override lại cho tất cả các đối tượng con. Khác với 2 loại Layout Group nói trên, kích thước của các đối tượng con sẽ không đổi dù kích thước của Controller tăng hay giảm. Riêng vị trí của các đối tượng thì sẽ được tính toán lại.
    • Start Corner: vị trí của đối tượng đầu tiên.
    • Start Axis: hướng sắp xếp các đối tượng con.
      • Horizontal sẽ sắp xếp từ trái qua phải, từ trên xuống dưới cho đến hết danh sách đối tượng.
      • Vertical sẽ sắp xếp theo chiều dọc trước, thêm 1 cột mới khi cột hiện tại đã đầy.
    • Child Alignment: canh lề cho các đối tượng khi chúng không phủ hết đối tượng Controller.
    • Constraint: hạn chế số lượng hàng hoặc cột. Tuỳ chọn Flexible thường được sử dụng do không hạn chế số hàng và cột. Các tuỳ chọn Fixed Column Count và Fixed Row Count sẽ giới hạn số hàng hoặc cột tương ứng.

    Sử dụng Grid Layout Group trong menu Select Level

    Trong project demo ở bài viết Hiện Thực Menu Select Level với Scroll Rect sử dụng Grid Layout Group để sắp xếp tự động các Level ở mỗi trang. Thông số có thể xem ở hình dưới hoặc trong demo.

    Sử dụng Grid Layout Group trong menu Select Level

    Số lượng level càng nhiều sẽ càng thấy tầm quan trọng và sự hiệu quả khi sử dụng các Auto Layout. 

    Lập Trình Game

    Lập Trình Game

    Kiến thức, kỹ thuật, kinh nghiệm lập trình game.

    Phù hợp cho bạn

    Đề xuất

    UI - Phần 1: Khái Niệm Và Một Số Đối Tượng Để Thiết Kế UI Trong Cocos2d-x 3.x.x

    UI - Phần 1: Khái Niệm Và Một Số Đối Tượng Để Thiết Kế UI Trong Cocos2d-x 3.x.x

    Tìm hiểu về khái niệm UI và các đối tượng thiết kế UI trong Cocos2d-x ...

    Lập Trình GameCocos2d-x

    23/01/2015

    Tìm Hiểu Layout trong Lập Trình Android

    Tìm Hiểu Layout trong Lập Trình Android

    Giới thiệu khái niệm View, ViewGroup, quy tắc layout và cách sử dụng ...

    Nguyễn Nghĩa

    29/10/2015

    Khám phá thêm

    Thiết Kế Giao Diện Người Dùng trên Unity

    Thiết Kế Giao Diện Người Dùng trên Unity

    Giới thiệu các thành phần thiết kế UI và sử dụng các công cụ hỗ trợ ...

    Lập Trình GameUnity

    03/08/2015

    Xây Dựng Game Đa Màn Hình - Gắn Anchor Point cho Các Đối Tượng UI

    Xây Dựng Game Đa Màn Hình - Gắn Anchor Point cho Các Đối Tượng UI

    Hướng dẫn thao tác gắn Anchor Point hỗ trợ game đa màn hình cho các đối ...

    Lập Trình GameUnity

    08/08/2015

    Sử Dụng CSDL Hướng Đối Tượng DB4O với Android

    Sử Dụng CSDL Hướng Đối Tượng DB4O với Android

    Hướng dẫn sử dụng thư viện cơ sở dữ liệu hướng đối tượng DB4O để phát ...

    Nguyễn Hồng Sơn

    13/03/2016

    UI - Phần 2: Thiết Kế UI Trong Cocos2d-x 3.x.x

    UI - Phần 2: Thiết Kế UI Trong Cocos2d-x 3.x.x

    Tìm hiểu về một số đối tượng dùng để thiết kế UI trong Cocos2d-x.

    Lập Trình GameCocos2d-x

    23/01/2015

    Làm Sao Để Chia Tách, Cắt Một Đối Tượng với Box2D?

    Làm Sao Để Chia Tách, Cắt Một Đối Tượng với Box2D?

    Hướng dẫn làm sao để chia tách, cắt một đối tượng với thư viện vật lý ...

    Lập Trình GameVật lý

    23/01/2015

    Cách Sử Dụng Canva Để Tạo Hình Ảnh Đồ Họa, Infographics Và Các Bài Thuyết Trình Đẹp

    Cách Sử Dụng Canva Để Tạo Hình Ảnh Đồ Họa, Infographics Và Các Bài Thuyết Trình Đẹp

    Canva giúp tiết kiệm thời gian và cho phép bạn tạo hình ảnh đồ họa theo ...

    Linh Cao

    05/04/2020

    Xử Lý Sự Kiện Trong Cocos2d-x 3.x.x

    Xử Lý Sự Kiện Trong Cocos2d-x 3.x.x

    Bài viết nằm trong loạt bài viết chương trình Tự Học Cocos2d-x 3.x.x. ...

    Lập Trình GameCocos2d-x

    23/01/2015

    STDIO
    Trang chính
    Công ty TNHH STDIO

    30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
    +84 28.36205514 - +84 942.111912
    developer@stdio.vn

    383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
    Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012

    ©STDIO, 2013 - 2020