Size Class: nó là gì, lớp kích thước Compact và Regular trong iOS
Size Class là một cơ chế trong iOS cho bố cục thích ứng, chia tất cả thiết bị thành hai loại trên mỗi trục: Compact (hẹp/ngắn) và Regular (rộng/dài). Sự kết hợp của các giá trị này xác định cách giao diện hiển thị trên iPhone, iPad, Mac Catalyst và CarPlay. Theo Apple Human Interface Guidelines, 2024, Size Class cho phép xây dựng một storyboard duy nhất cho tất cả thiết bị bằng Auto Layout và UITraitCollection. Hệ thống hoạt động trên tất cả thiết bị iOS kể từ iOS 8.
Những điểm chính
- Size Class là hệ thống phân loại kích thước trong iOS với hai giá trị trên mỗi trục: Compact (nén) và Regular (kích thước đầy đủ).
- Size Class ngang trên iPhone ở hướng dọc là Compact, trên iPad — Regular. Chiều dọc là Regular trên tất cả iPhone ngoại trừ SE.
- UITraitCollection là giao diện lập trình để lấy Size Class hiện tại và phản hồi các thay đổi bộ sưu tập đặc điểm trong thời gian chạy.
- Interface Builder cho phép cấu hình ràng buộc và khả năng hiển thị phần tử cho từng tổ hợp Size Class bằng công cụ Vary for Traits.
- Bố cục thích ứng với Size Class thay thế các storyboard riêng cho iPhone và iPad — một tệp thích ứng với tất cả thiết bị.
Size Class là gì?
Size Class là một phân loại màn hình trừu tượng trong iOS, được Apple giới thiệu trong iOS 8 để thống nhất bố cục thích ứng. Thay vì kiểm tra một mẫu thiết bị cụ thể, Size Class xác định hai đặc tính: không gian ngang và dọc có sẵn. Mỗi đặc tính nhận một trong hai giá trị — Compact (không gian hạn chế) hoặc Regular (không gian đủ). Sự kết hợp của các giá trị này tạo thành một bộ sưu tập đặc điểm (trait collection), được truyền đến tất cả các phần tử giao diện.
Lịch sử và mục đích
Trước Size Class, các nhà phát triển tạo storyboard riêng cho iPhone và iPad hoặc sử dụng kiểm tra UI_USER_INTERFACE_IDIOM() trong mã. Điều này dẫn đến trùng lặp mã, storyboard phình to và khó khăn trong việc hỗ trợ kích thước màn hình mới. Size Class đã giải quyết vấn đề bằng cách cung cấp một hệ thống phổ quát: nhà phát triển cấu hình giao diện cho 4 tổ hợp Compact/Regular và iOS tự động chọn tổ hợp phù hợp. Với sự ra đời của Split View trên iPad và các kích thước iPhone khác nhau, hệ thống trở nên không thể thiếu cho bố cục thích ứng.
Cách Size Class hoạt động
Size Class được iOS tính toán dựa trên chiều rộng và chiều cao màn hình hiện tại, có tính đến hướng và đa nhiệm. Các giá trị không gắn với pixel cụ thể — nó là một danh mục logic. Ví dụ: iPhone 16 Pro ở hướng dọc có ngang là Compact và dọc là Regular. Cùng iPhone ở hướng ngang — Compact trên cả hai trục. iPad trong Split View với ứng dụng ở 1/3 màn hình nhận ngang là Compact, mặc dù ở chế độ toàn màn hình nó là Regular. Hệ thống tự động cập nhật Size Class khi thay đổi hướng hoặc Split View.
Có những lớp kích thước nào
Size Class sử dụng bốn tổ hợp của hai giá trị trên hai trục. Mỗi tổ hợp có ứng dụng riêng tùy thuộc vào loại thiết bị và hướng của nó. Hiểu các tổ hợp này là nền tảng để thiết kế giao diện thích ứng cho iOS. Hệ thống bao phủ tất cả thiết bị Apple hiện tại: iPhone, iPad, Mac Catalyst và CarPlay. Apple khuyên nên bắt đầu thiết kế với tổ hợp wAny hAny (bố cục cơ bản) và tinh chỉnh cho các tổ hợp cụ thể.
Bốn tổ hợp Size Class
wCompact hRegular — iPhone ở hướng dọc (trừ Plus/Max trong một số trường hợp). wCompact hCompact — iPhone SE/6/7/8 ở hướng ngang. wRegular hRegular — iPad toàn màn hình ở bất kỳ hướng nào, iPhone Plus/Max ở hướng ngang. wRegular hCompact — iPad ở hướng ngang với nội dung hẹp. Mỗi tổ hợp xác định ràng buộc và phần tử nào đang hoạt động. Nhà phát triển có thể đặt giao diện cho từng tổ hợp riêng biệt trong Interface Builder.
Size Class cho Mac Catalyst
Trên Mac Catalyst, Size Class luôn là wRegular hRegular — giao diện kích thước đầy đủ. Điều này có nghĩa là phiên bản Mac của ứng dụng iPad nhận được không gian tối đa. Nhà phát triển có thể sử dụng kiểm tra bổ sung qua UIScreen.traitCollection.userInterfaceIdiom để phân biệt Mac với iPad. Size Class trên Mac hoạt động ổn định, nhưng ứng dụng Catalyst thường yêu cầu thích ứng bổ sung cho chuột và bàn phím vượt quá Size Class.
Size Class ảnh hưởng đến bố cục thích ứng như thế nào
Size Class xác định ràng buộc Auto Layout nào đang hoạt động, phần tử giao diện nào hiển thị và cách bố trí các subview. Nhà phát triển có thể đặt các ràng buộc khác nhau cho các Size Class khác nhau và iOS tự động chuyển đổi chúng khi bộ sưu tập đặc điểm thay đổi. Ví dụ: trên iPad (wRegular hRegular), bảng có chi tiết hiển thị ở chế độ Master-Detail, trên iPhone (wCompact hRegular) — ở Navigation Stack. Đây là kịch bản chính của bố cục thích ứng với Size Class.
Thiết lập và xóa ràng buộc
Trong Interface Builder, nhà phát triển chọn tổ hợp Size Class qua nút Vary for Traits và thêm ràng buộc chỉ áp dụng cho tổ hợp đó. Các ràng buộc được đặt cho wAny hAny luôn áp dụng. Các ràng buộc được đặt cho tổ hợp cụ thể chỉ kích hoạt khi Size Class khớp. Nếu không có ràng buộc đặc biệt nào được đặt cho tổ hợp, các ràng buộc cơ bản được sử dụng. Khi Size Class thay đổi, iOS tạo hiệu ứng chuyển tiếp giữa các bộ ràng buộc.
Ẩn và hiện phần tử
Cờ Installed trong Interface Builder cho phép ẩn phần tử cho các Size Class cụ thể. Nhà phát triển đánh dấu phần tử là Uninstalled cho tổ hợp đã chọn. Ví dụ: nút Details chỉ hiển thị trên iPad (wRegular hRegular) và ẩn trên iPhone. Điều này đơn giản hơn quản lý isHidden trong mã. Để ẩn theo chương trình, ghi đè traitCollectionDidChange hoặc sử dụng phương thức willTransition, kiểm tra Size Class hiện tại.
Sử dụng Size Class trong Interface Builder
Interface Builder cung cấp công cụ trực quan Vary for Traits để làm việc với Size Class. Nhà phát triển chọn tổ hợp mong muốn (chiều rộng và chiều cao) và Interface Builder hiển thị xem trước màn hình cho tổ hợp đó. Tất cả các thay đổi về ràng buộc, kích thước, phông chữ và khả năng hiển thị được thực hiện trong chế độ này chỉ áp dụng cho Size Class đã chọn. Thoát khỏi chế độ sẽ lưu cài đặt. Cách tiếp cận này thay thế nhu cầu viết mã thích ứng cho các thiết bị khác nhau.
Làm việc từng bước trong Interface Builder
Để cấu hình Size Class trong Interface Builder, nhà phát triển mở storyboard, chọn view controller và nhấp vào nút Vary for Traits ở bảng dưới cùng. Sau đó chọn Width (Compact, Regular hoặc Any) và Height (Compact, Regular hoặc Any). Giao diện chuyển sang chế độ chỉnh sửa cho tổ hợp đã chọn. Tất cả thay đổi ràng buộc, thêm hoặc xóa phần tử chỉ áp dụng cho tổ hợp này. Sau khi hoàn tất thiết lập, nhà phát triển thoát khỏi chế độ — các thay đổi được lưu cho tổ hợp Size Class cụ thể.
Thực hành tốt nhất
Apple khuyên bắt đầu với bố cục cơ bản cho wAny hAny (tổ hợp cơ bản bao phủ tất cả thiết bị). Sau đó tinh chỉnh bố cục cho các tổ hợp có vấn đề: wCompact hRegular (iPhone dọc) và wRegular hRegular (iPad). Không nên cấu hình mọi tổ hợp — chỉ những tổ hợp nơi bố cục bị hỏng. Cấu hình quá mức làm phức tạp việc bảo trì. Để điều chỉnh phông chữ chính xác, hãy sử dụng Dynamic Type thay vì Size Class: phông chữ tự động thích ứng với kích thước màn hình.
Size Class trong mã: UITraitCollection
UITraitCollection là một lớp iOS chứa Size Class hiện tại và các đặc điểm môi trường khác (force touch, tỷ lệ màn hình, ngữ cảnh giao diện người dùng). Mỗi UIView và UIViewController có traitCollection riêng, kế thừa từ cha. Nhà phát triển lấy Size Class qua traitCollection.horizontalSizeClass và traitCollection.verticalSizeClass, trả về UIUserInterfaceSizeClass (.compact, .regular hoặc .unspecified). Các thay đổi Size Class được theo dõi bằng cách ghi đè traitCollectionDidChange.
Ví dụ: chuyển đổi bố cục trong mã
Xem xét một ví dụ về thích ứng bố cục UICollectionView với Size Class. Trên iPad (wRegular hRegular) sử dụng UICollectionViewCompositionalLayout với hai cột, trên iPhone (wCompact hRegular) — với một cột. Mã kiểm tra Size Class ngang và chọn bố cục phù hợp. Khi xoay hoặc chuyển sang Split View, iOS gọi traitCollectionDidChange và bộ điều khiển chuyển đổi bố cục với hiệu ứng.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Phản hồi thay đổi bộ sưu tập đặc điểm
Phương thức traitCollectionDidChange được gọi khi bất kỳ thay đổi Size Class nào: xoay thiết bị, vào/ra Split View, kết nối màn hình ngoài. Trong phương thức này, nhà phát triển cập nhật bố cục, tải lại bộ sưu tập, cập nhật ưu tiên ràng buộc hoặc thay đổi khả năng hiển thị phần tử. Điều quan trọng là kiểm tra xem Size Class có thực sự thay đổi hay không, không phải đặc điểm khác: so sánh traitCollection.horizontalSizeClass với previousTraitCollection?.horizontalSizeClass. Tối ưu hóa ngăn chặn việc vẽ lại không cần thiết khi force touch hoặc tỷ lệ màn hình thay đổi.
Đặc điểm Size Class trên các thiết bị khác nhau
Các thiết bị Apple khác nhau có tổ hợp Size Class khác nhau và nhà phát triển phải tính đến các đặc điểm này. iPhone ở hướng dọc — wCompact hRegular, ở hướng ngang — phụ thuộc vào mẫu: iPhone SE/6/7/8 (wCompact hCompact), iPhone X và mới hơn (wCompact hCompact hoặc wCompact hRegular tùy theo nội dung). iPad ở chế độ toàn màn hình — wRegular hRegular, trong Split View — có thể là wCompact hRegular (1/3 màn hình) hoặc wRegular hRegular (2/3 màn hình). Mac Catalyst — luôn wRegular hRegular.
iPhone: tất cả kích thước
Trên iPhone, Size Class ổn định cho hầu hết các mẫu, nhưng có sắc thái. iPhone Plus (6+, 7+, 8+) và Max (X, XS, 11 Pro, 13–16 Pro Max) ở hướng ngang có wRegular hCompact — giống iPad mini. Điều này cho phép đặt nội dung trên hai cột trên iPhone lớn ở hướng ngang. iPhone SE (thế hệ 1–3) ở hướng ngang — wCompact hCompact. Size Class dọc trên tất cả iPhone ở hướng dọc là Regular, ngoại trừ iPhone SE ở hướng ngang nơi nó là Compact. Ngang luôn là Compact cho hướng dọc và ngang (trừ Plus/Max ở hướng ngang).
iPad và Split View
iPad ở chế độ toàn màn hình — wRegular hRegular, cung cấp tính linh hoạt bố cục tối đa. Trong Split View, hành vi thay đổi: nếu ứng dụng chiếm 1/3 màn hình (Slide Over hoặc Split ở 1/3), Size Class ngang trở thành Compact, mặc dù dọc vẫn là Regular. Ở 2/3 màn hình — wRegular hRegular. Nhà phát triển nên kiểm tra giao diện ở tất cả các chế độ Split View, vì Size Class thay đổi động. Apple khuyên sử dụng Size Class cùng với UISplitViewController để có hành vi nhất quán trên iPad.
Câu hỏi thường gặp
Size Class khác với điểm ngắt (breakpoint) trong CSS như thế nào?
Size Class là hệ thống rời rạc với 4 tổ hợp, trong khi điểm ngắt CSS là hệ thống liên tục với số lượng điểm tùy ý. Size Class trừu tượng hóa khỏi kích thước màn hình cụ thể, nhóm thiết bị theo hành vi. Điểm ngắt CSS gắn với pixel, Size Class — gắn với danh mục logic Compact/Regular.
Tại sao iPhone Plus ở hướng ngang có Size Class ngang là Regular?
iPhone Plus/Max ở hướng ngang có chiều rộng màn hình đủ để hiển thị nội dung trên hai cột (giống iPad mini). Apple gán ngang là Regular để nhà phát triển có thể sử dụng bố cục nhiều cột mà không cần kiểm tra bổ sung. Đây là ngoại lệ cho quy tắc Compact trên iPhone.
Có thể thay đổi Size Class bằng lập trình không?
Size Class được iOS xác định dựa trên đặc tính thực tế của thiết bị và không thể thay đổi từ mã ứng dụng. Nhà phát triển chỉ có thể phản ứng với giá trị hiện tại. Giao diện hệ thống có thể ghi đè Size Class cho các phần tử hệ thống, nhưng trong ứng dụng điều này là không thể.
Size Class hoạt động với SwiftUI như thế nào?
SwiftUI không sử dụng Size Class trực tiếp — thay vào đó, nhà phát triển sử dụng bộ điều chỉnh @Environment(\.horizontalSizeClass) để đọc giá trị hiện tại. SwiftUI cung cấp các công cụ cấp cao hơn: Size Classes và AnyLayout với giao thức Layout cho bố cục thích ứng.
Size Class có được cập nhật khi kết nối màn hình ngoài không?
Có, khi kết nối màn hình ngoài qua Stage Manager hoặc Sidecar, iOS cập nhật Size Class. Màn hình ngoài thường nhận wRegular hRegular, trong khi màn hình chính giữ Size Class của nó. traitCollectionDidChange được gọi cho các cửa sổ trên mỗi màn hình một cách độc lập.
Tổng kết
- Size Class là hệ thống phân loại màn hình iOS với hai giá trị Compact/Regular trên mỗi trục, tổng cộng 4 tổ hợp.
- iPhone ở hướng dọc — wCompact hRegular. iPad ở chế độ toàn màn hình — wRegular hRegular. iPhone Plus/Max ở hướng ngang — wRegular hCompact.
- Interface Builder cung cấp Vary for Traits để cấu hình trực quan ràng buộc và khả năng hiển thị cho từng Size Class.
- UITraitCollection là API lập trình để đọc Size Class qua horizontalSizeClass và verticalSizeClass. Các thay đổi được theo dõi trong traitCollectionDidChange.
- Split View trên iPad thay đổi Size Class động: ở 1/3 màn hình, ngang trở thành Compact, yêu cầu thích ứng bố cục.
- SwiftUI cung cấp @Environment(\.horizontalSizeClass) để đọc Size Class và AnyLayout để chuyển đổi giữa các bố cục trong thời gian chạy.
- Khuyến nghị bắt đầu với bố cục cho wAny hAny, sau đó thích ứng cho wCompact hRegular (iPhone) và wRegular hRegular (iPad), không làm quá tải các tổ hợp còn lại.
Chúng tôi sẽ phát triển ứng dụng di động chìa khóa trao tay
IT Sectr tạo các ứng dụng iOS và Android cho các công ty khởi nghiệp và doanh nghiệp từ năm 2017. Chúng tôi sẽ tư vấn và đề xuất giải pháp tốt nhất cho bạn.
Đọc thêm