Bố cục tự động là hệ thống bố cục dựa trên ràng buộc được sử dụng để phát triển Giao diện người dùng cho Thiết bị iOS. Hệ thống ràng buộc dựa trên bố cục này còn được gọi là Bố cục tự động về cơ bản là một giao diện người dùng thích ứng thích ứng với các màn hình có kích thước và hướng khác nhau.
Bố cục tự động hoàn toàn phụ thuộc vào các ràng buộc trong đó nhà phát triển xác định mối quan hệ giữa phần tử lân cận hoặc phần tử cha để giành lấy vị trí của nó.
Tại sao nên bố trí tự động?
Trong khi thiết kế ứng dụng iOS, bạn cần đảm bảo rằng giao diện người dùng mà bạn đang phát triển phải tương thích như nhau với tất cả các kích thước và hướng màn hình. Bố cục tự động rất hữu ích khi bạn muốn làm như vậy.
Hãy xem xét những hình ảnh dưới đây. Một nút được giữ tập trung trong iPhone 6, không căn chỉnh trung tâm với các thiết bị khác, điều này là do thực tế là các thiết bị iOS khác nhau có kích thước khác nhau. Trong bài đăng này, chúng tôi sẽ tập trung vào ràng buộc vì vậy nếu bạn muốn đọc thêm về kích thước, bạn có thể xem tại https://iosres.com/
Để đảm bảo giao diện người dùng mà chúng tôi phát triển là đồng nhất trên tất cả các thiết bị và định hướng, chúng tôi sẽ sử dụng Bố cục tự động. Vì vậy, hãy bắt đầu.
Bước 1 - Mở Xcode → Projecr mới → Ứng dụng một lần xem → Đặt tên là “Tự động thanh toán”
Bước 2 - Mở Main.storyboard, thêm nút như hình bên dưới, để tham khảo, chọn thiết bị là iPhone 7Plus.
Tại đây, bạn có thể thấy chúng tôi đã thêm một nút ở vị trí ngẫu nhiên mà không có bất kỳ ràng buộc nào. Mục đích của chúng tôi là đặt trung tâm nút này và tương thích với tất cả các thiết bị và hướng. Trước khi chuyển sang bước 3, chúng ta hãy hiểu chính xác những gì chúng ta cần làm và làm cách nào để đạt được điều này.
Xcode cung cấp hai cách để xác định Ràng buộc bố cục tự động → Thanh bố cục tự động và Control-drag. Mặc dù chúng tôi sẽ sử dụng thanh Bố cục Tự động rất thường xuyên và trong blog này cũng vậy, nhưng tôi chắc chắn sẽ cho bạn biết cách sử dụng Control-drag. Trong Xcode của bạn ở góc dưới cùng bên phải của Trình tạo giao diện, bạn có thể thấy 5 nút, các nút này được gọi là các nút Bố cục được sử dụng để xác định các ràng buộc.
Vì vậy, bây giờ chúng ta sẽ sử dụng thanh Bố cục Tự động để cung cấp các ràng buộc cho cả hai nút.
Lý thuyết chính mà hệ thống ràng buộc hoàn chỉnh hoạt động là 4 tham số (đầu, cuối, trên và dưới), cũng như chiều cao, chiều rộng và các tâm dọc và ngang.
Bước 3 - Nhấp vào nút và tab trên Căn chỉnh, bật Theo chiều ngang và Chiều dọc trong vùng chứa như hình dưới đây.
Sau khi thêm cả hai ràng buộc, bạn có thể thấy nút của mình được căn chỉnh ở giữa màn hình.
Theo tùy chọn, bạn có thể đạt được điều tương tự thông qua tính năng kéo điều khiển, như được hiển thị bên dưới, Chọn thành phần giao diện người dùng, chạm vào nút điều khiển và kéo để đưa ra các ràng buộc, Cho trung tâm theo chiều ngang và chiều dọc.
Bước 4 - Bây giờ chúng ta sẽ xác định chiều rộng và chiều cao của nút. Chọn thêm tùy chọn ràng buộc mới như hiển thị bên dưới và thêm chiều cao và chiều rộng.
Ngoài ra, bạn có thể cung cấp ràng buộc đầu, ràng buộc theo sau, lề trên và lề dưới nếu bạn không muốn cung cấp Theo chiều ngang và Chiều dọc cho vùng chứa.
Bước 5 - Vì vậy, Chúng tôi đã cung cấp tất cả các ràng buộc bắt buộc, chúng ta phải luôn nhớ 4 cạnh, căn chỉnh theo trục X, Căn chỉnh theo trục Y, chiều rộng và chiều cao. Chúng tôi cần nắm bắt Thành phần giao diện người dùng.
Bây giờ, hãy chạy trên các thiết bị khác nhau và xem kết quả. Chúng tôi sẽ chạy trên các thiết bị và hướng khác nhau.
Bạn thậm chí có thể chỉnh sửa các ràng buộc, nếu bạn muốn sửa đổi hoặc loại bỏ tương tự, trong khu vực tiện ích ở khung bên phải, chọn tùy chọn số 5 và cuộn bên dưới như được hiển thị trong hình ảnh.
Vì vậy, hướng dẫn này nhằm cung cấp cho bạn thông tin tóm tắt về Cách sử dụng Bố cục tự động và các ràng buộc để phát triển giao diện người dùng thích ứng. Bạn có thể thử với nhiều thành phần bằng các khái niệm cơ bản ở trên.