Size Class: τι είναι, κλάσεις μεγέθους Compact και Regular στο iOS
Size Class — είναι ένας μηχανισμός iOS για προσαρμοστική διάταξη που χωρίζει όλες τις συσκευές σε δύο κατηγορίες ανά άξονα: Compact (στενό/κοντό) και Regular (πλατύ/μακρύ). Οι συνδυασμοί αυτών των τιμών καθορίζουν πώς εμφανίζεται η διεπαφή σε iPhone, iPad, Mac Catalyst και CarPlay. Σύμφωνα με το Apple Human Interface Guidelines, 2024, το Size Class επιτρέπει τη δημιουργία ενός storyboard για όλες τις συσκευές, χρησιμοποιώντας Auto Layout και UITraitCollection. Το σύστημα λειτουργεί σε όλες τις συσκευές iOS από το iOS 8.
Κύρια σημεία
- Size Class — σύστημα ταξινόμησης μεγέθους στο iOS με δύο τιμές ανά άξονα: Compact (συμπιεσμένο) και Regular (πλήρες μέγεθος).
- Οριζόντιο Size Class σε iPhone σε κατακόρυφο προσανατολισμό — Compact, σε iPad — Regular. Κατακόρυφο — Regular σε όλα τα iPhone εκτός από SE.
- UITraitCollection — διεπαφή προγραμματισμού για λήψη του τρέχοντος Size Class και αντίδραση σε αλλαγές trait collection κατά το χρόνο εκτέλεσης.
- Interface Builder επιτρέπει τη διαμόρφωση constraints και ορατότητας στοιχείων για κάθε συνδυασμό Size Class με το εργαλείο Vary for Traits.
- Προσαρμοστική διάταξη βασισμένη στο Size Class αντικαθιστά ξεχωριστά storyboard για iPhone και iPad — ένα αρχείο προσαρμόζεται σε όλες τις συσκευές.
Τι είναι το Size Class;
Size Class — είναι μια αφηρημένη ταξινόμηση οθόνης στο iOS, που εισήχθη από την Apple στο iOS 8 για την ενοποίηση της προσαρμοστικής διάταξης. Αντί να ελέγχει το συγκεκριμένο μοντέλο συσκευής, το Size Class καθορίζει δύο χαρακτηριστικά: διαθέσιμο χώρο οριζόντια και κάθετα. Κάθε χαρακτηριστικό παίρνει μία από δύο τιμές — Compact (περιορισμένος χώρος) ή Regular (επαρκής χώρος). Ο συνδυασμός αυτών των τιμών σχηματίζει το trait collection, το οποίο μεταδίδεται σε όλα τα στοιχεία διεπαφής.
Ιστορία και σκοπός
Πριν από την εμφάνιση του Size Class, οι προγραμματιστές δημιουργούσαν ξεχωριστά storyboard για iPhone και iPad ή χρησιμοποιούσαν ελέγχους UI_USER_INTERFACE_IDIOM() σε κώδικα. Αυτό οδηγούσε σε διπλασιασμό κώδικα, διόγκωση storyboard και δυσκολίες στην υποστήριξη νέων μεγεθών οθόνης. Το Size Class έλυσε το πρόβλημα προσφέροντας ένα καθολικό σύστημα: ο προγραμματιστής διαμορφώνει τη διεπαφή για 4 συνδυασμούς Compact/Regular, και το iOS επιλέγει αυτόματα τον κατάλληλο. Με την εμφάνιση του Split View σε iPad και διαφορετικών μεγεθών iPhone, το σύστημα έγινε απαραίτητο για την προσαρμοστική διάταξη.
Πώς λειτουργεί το Size Class
Size Class υπολογίζεται από το iOS με βάση το πλάτος και ύψος της τρέχουσας οθόνης, λαμβάνοντας υπόψη τον προσανατολισμό και την πολυδιεργασία. Οι τιμές δεν συνδέονται με συγκεκριμένα pixel — είναι μια λογική κατηγορία. Για παράδειγμα, το iPhone 16 Pro σε κατακόρυφο προσανατολισμό έχει οριζόντιο Compact και κατακόρυφο Regular. Το ίδιο iPhone σε οριζόντιο — Compact και στους δύο άξονες. iPad σε Split View με εφαρμογή στο 1/3 της οθόνης λαμβάνει οριζόντιο Compact, αν και σε λειτουργία πλήρους οθόνης — Regular. Το σύστημα ενημερώνει αυτόματα το Size Class κατά την αλλαγή προσανατολισμού ή Split View.
Ποιες κλάσεις μεγέθους υπάρχουν
Size Class χρησιμοποιεί τέσσερις συνδυασμούς δύο τιμών σε δύο άξονες. Κάθε συνδυασμός έχει την εφαρμογή του ανάλογα με τον τύπο της συσκευής και τον προσανατολισμό της. Η κατανόηση αυτών των συνδυασμών είναι η βάση σχεδιασμού προσαρμοστικής διεπαφής για iOS. Το σύστημα καλύπτει όλες τις τρέχουσες συσκευές Apple: iPhone, iPad, Mac Catalyst και CarPlay. Η Apple συνιστά να ξεκινάτε το σχεδιασμό με το συνδυασμό wAny hAny (βασική διάταξη) και να βελτιστοποιείτε για συγκεκριμένους συνδυασμούς.
Τέσσερις συνδυασμοί Size Class
wCompact hRegular — κατακόρυφο iPhone (εκτός Plus/Max σε ορισμένες περιπτώσεις). wCompact hCompact — οριζόντιο iPhone SE/6/7/8. wRegular hRegular — iPad πλήρους οθόνης σε οποιονδήποτε προσανατολισμό, iPhone Plus/Max σε οριζόντιο. wRegular hCompact — iPad σε οριζόντιο με στενό περιεχόμενο. Κάθε συνδυασμός καθορίζει ποια constraints και στοιχεία είναι ενεργά. Ο προγραμματιστής μπορεί να ορίσει εμφάνιση για κάθε συνδυασμό ξεχωριστά στο Interface Builder.
Size Class για Mac Catalyst
Στο Mac Catalyst, το Size Class είναι πάντα wRegular hRegular — διεπαφή πλήρους μεγέθους. Αυτό σημαίνει ότι η έκδοση Mac της εφαρμογής iPad λαμβάνει μέγιστο χώρο. Ο προγραμματιστής μπορεί να χρησιμοποιήσει πρόσθετους ελέγχους μέσω UIScreen.traitCollection.userInterfaceIdiom για να διακρίνει το Mac από το iPad. Το Size Class σε Mac λειτουργεί σταθερά, αλλά οι εφαρμογές Catalyst συχνά απαιτούν πρόσθετη προσαρμογή για ποντίκι και πληκτρολόγιο, πέρα από το πεδίο του Size Class.
Πώς το Size Class επηρεάζει την προσαρμοστική διάταξη
Size Class καθορίζει ποια Auto Layout constraints είναι ενεργά, ποια στοιχεία διεπαφής είναι ορατά και πώς είναι διατεταγμένα τα subview. Ο προγραμματιστής μπορεί να ορίσει διαφορετικά constraints για διαφορετικά Size Class, και το iOS τα εναλλάσσει αυτόματα όταν αλλάζει το trait collection. Για παράδειγμα, σε iPad (wRegular hRegular) ο πίνακας με λεπτομέρειες εμφανίζεται σε Master-Detail, σε iPhone (wCompact hRegular) — σε Navigation Stack. Αυτό είναι το κύριο σενάριο προσαρμοστικής διάταξης με Size Class.
Ορισμός και αφαίρεση constraints
Στο Interface Builder, ο προγραμματιστής επιλέγει το συνδυασμό Size Class μέσω του κουμπιού Vary for Traits και προσθέτει constraints που πρέπει να λειτουργούν μόνο για αυτό το συνδυασμό. Τα constraints που ορίζονται για wAny hAny λειτουργούν πάντα. Τα constraints που ορίζονται για συγκεκριμένο συνδυασμό ενεργοποιούνται μόνο όταν ταιριάζει το Size Class. Εάν για ένα συνδυασμό δεν έχουν οριστεί ειδικά constraints, χρησιμοποιούνται τα βασικά. Κατά την αλλαγή Size Class, το iOS κινουνοποιεί τη μετάβαση μεταξύ των σετ constraints.
Απόκρυψη και εμφάνιση στοιχείων
Η σημαία Installed στο Interface Builder επιτρέπει την απόκρυψη στοιχείων για συγκεκριμένα Size Class. Ο προγραμματιστής σημειώνει το στοιχείο ως Uninstalled για τον επιλεγμένο συνδυασμό. Για παράδειγμα, το κουμπί Details είναι ορατό μόνο σε iPad (wRegular hRegular) και σε iPhone — κρυφό. Αυτό είναι απλούστερο από τη διαχείριση isHidden σε κώδικα. Για προγραμματιστική απόκρυψη χρησιμοποιείται η παράκαμψη traitCollectionDidChange ή η μέθοδος willTransition, όπου ελέγχεται το τρέχον Size Class.
Χρήση του Size Class στο Interface Builder
Interface Builder παρέχει το οπτικό εργαλείο Vary for Traits για εργασία με το Size Class. Ο προγραμματιστής επιλέγει τον απαιτούμενο συνδυασμό (πλάτος και ύψος), και το Interface Builder εμφανίζει προεπισκόπηση οθόνης για αυτό το συνδυασμό. Όλες οι αλλαγές constraints, μεγεθών, γραμματοσειρών και ορατότητας που γίνονται σε αυτή τη λειτουργία εφαρμόζονται μόνο στο επιλεγμένο Size Class. Η έξοδος από τη λειτουργία επιβεβαιώνει τις ρυθμίσεις. Αυτή η προσέγγιση αντικαθιστά την ανάγκη γραφής κώδικα προσαρμογής για διαφορετικές συσκευές.
Βήμα προς βήμα εργασία στο Interface Builder
Για διαμόρφωση Size Class στο Interface Builder, ο προγραμματιστής ανοίγει το storyboard, επιλέγει το view controller και πατά το κουμπί Vary for Traits στο κάτω πλαίσιο. Στη συνέχεια επιλέγει Width (Compact, Regular ή Any) και Height (Compact, Regular ή Any). Η διεπαφή μεταβαίνει σε λειτουργία επεξεργασίας για τον επιλεγμένο συνδυασμό. Όλες οι αλλαγές constraints, προσθήκη ή αφαίρεση στοιχείων εφαρμόζονται μόνο σε αυτό το συνδυασμό. Μετά την ολοκλήρωση της διαμόρφωσης, ο προγραμματιστής εξέρχεται από τη λειτουργία — οι αλλαγές αποθηκεύονται για τον συγκεκριμένο συνδυασμό Size Class.
Βέλτιστες πρακτικές
Η Apple συνιστά να ξεκινάτε με τη βασική διάταξη για wAny hAny (ο βασικός συνδυασμός που καλύπτει όλες τις συσκευές). Στη συνέχεια να βελτιστοποιείτε τη διάταξη για προβληματικούς συνδυασμούς: wCompact hRegular (κατακόρυφο iPhone) και wRegular hRegular (iPad). Δεν συνιστάται η διαμόρφωση κάθε συνδυασμού — μόνο όπου η διάταξη σπάει. Η υπερβολική διαμόρφωση δυσχεραίνει τη συντήρηση. Για ακριβή ρύθμιση γραμματοσειρών, χρησιμοποιήστε Dynamic Type αντί για Size Class: οι γραμματοσειρές προσαρμόζονται αυτόματα στο μέγεθος οθόνης.
Size Class σε κώδικα: UITraitCollection
UITraitCollection — είναι μια κλάση iOS που περιέχει το τρέχον Size Class και άλλα χαρακτηριστικά περιβάλλοντος (force touch, display scale, user interface idiom). Κάθε UIView και UIViewController έχει το δικό του traitCollection, που κληρονομείται από τον γονέα. Ο προγραμματιστής λαμβάνει το Size Class μέσω traitCollection.horizontalSizeClass και traitCollection.verticalSizeClass, που επιστρέφουν UIUserInterfaceSizeClass (.compact, .regular ή .unspecified). Η αλλαγή Size Class παρακολουθείται μέσω παράκαμψης traitCollectionDidChange.
Παράδειγμα: εναλλαγή διάταξης σε κώδικα
Εξετάστε το παράδειγμα προσαρμογής διάταξης UICollectionView σε Size Class. Σε iPad (wRegular hRegular) χρησιμοποιούμε UICollectionViewCompositionalLayout με δύο στήλες, σε iPhone (wCompact hRegular) — με μία. Ο κώδικας ελέγχει το οριζόντιο Size Class και επιλέγει την κατάλληλη διάταξη. Κατά την περιστροφή ή μετάβαση σε Split View, το iOS καλεί traitCollectionDidChange, και ο ελεγκτής εναλλάσσει τη διάταξη με κίνηση.
swift
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.horizontalSizeClass == .Compact {
collectionView.collectionViewLayout = SingleColumnLayout()
} else {
collectionView.collectionViewLayout = DoubleColumnLayout()
}
}Αντίδραση σε αλλαγές trait collection
Η μέθοδος traitCollectionDidChange καλείται σε κάθε αλλαγή Size Class: περιστροφή συσκευής, είσοδος/έξοδος από Split View, σύνδεση εξωτερικής οθόνης. Σε αυτή τη μέθοδο, ο προγραμματιστής ενημερώνει τη διάταξη, επαναφορτώνει συλλογές, ενημερώνει προτεραιότητες constraints ή αλλάζει ορατότητα στοιχείων. Είναι σημαντικό να ελέγχετε εάν άλλαξε ακριβώς το Size Class, όχι άλλο χαρακτηριστικό: συγκρίνετε το traitCollection.horizontalSizeClass με το previousTraitCollection?.horizontalSizeClass. Η βελτιστοποίηση αποτρέπει περιττές ανασχεδιάσεις κατά την αλλαγή force touch ή display scale.
Χαρακτηριστικά του Size Class σε διαφορετικές συσκευές
Διαφορετικές συσκευές Apple έχουν διαφορετικούς συνδυασμούς Size Class και ο προγραμματιστής πρέπει να λάβει υπόψη αυτά τα χαρακτηριστικά. iPhone σε κατακόρυφο — wCompact hRegular, σε οριζόντιο — εξαρτάται από το μοντέλο: iPhone SE/6/7/8 (wCompact hCompact), iPhone X και νεότερα (wCompact hCompact ή wCompact hRegular ανάλογα με το περιεχόμενο). iPad σε λειτουργία πλήρους οθόνης — wRegular hRegular, σε Split View — μπορεί να είναι wCompact hRegular (1/3 οθόνης) ή wRegular hRegular (2/3 οθόνης). Mac Catalyst — πάντα wRegular hRegular.
iPhone: όλα τα μεγέθη
Σε iPhone, το Size Class είναι σταθερό για τα περισσότερα μοντέλα, αλλά υπάρχουν αποχρώσεις. iPhone Plus (6+, 7+, 8+) και Max (X, XS, 11 Pro, 13–16 Pro Max) σε οριζόντιο έχουν wRegular hCompact — όπως το iPad mini. Αυτό επιτρέπει την τοποθέτηση περιεχομένου σε δύο στήλες σε μεγάλα iPhone σε οριζόντιο. iPhone SE (1–3 γενιά) σε οριζόντιο — wCompact hCompact. Κατακόρυφο Size Class σε όλα τα iPhone σε κατακόρυφο — Regular, εκτός από iPhone SE σε οριζόντιο, όπου είναι Compact. Οριζόντιο — πάντα Compact για κατακόρυφο και οριζόντιο (εκτός Plus/Max σε οριζόντιο).
iPad και Split View
iPad σε λειτουργία πλήρους οθόνης — wRegular hRegular, που δίνει μέγιστη ευελιξία διάταξης. Σε Split View η συμπεριφορά αλλάζει: εάν η εφαρμογή καταλαμβάνει το 1/3 της οθόνης (Slide Over ή Split στο 1/3), το οριζόντιο Size Class γίνεται Compact, αν και το κατακόρυφο παραμένει Regular. Στο 2/3 οθόνης — wRegular hRegular. Ο προγραμματιστής πρέπει να δοκιμάζει τη διεπαφή σε όλες τις λειτουργίες Split View, καθώς το Size Class αλλάζει δυναμικά. Η Apple συνιστά τη χρήση του Size Class μαζί με UISplitViewController για συνεπή συμπεριφορά σε iPad.
Συχνές ερωτήσεις
Σε τι διαφέρει το Size Class από το breakpoint στο CSS;
Size Class — ένα διακριτό σύστημα με 4 συνδυασμούς, ενώ τα CSS-breakpoint είναι συνεχή με αυθαίρετο αριθμό σημείων. Το Size Class αφαιρείται από συγκεκριμένα μεγέθη οθόνης, ομαδοποιώντας συσκευές ανά συμπεριφορά. Τα CSS-breakpoint είναι συνδεδεμένα με pixel, το Size Class — με λογικές κατηγορίες Compact/Regular.
Γιατί σε iPhone Plus σε οριζόντιο το Size Class είναι οριζόντιο Regular;
iPhone Plus/Max σε οριζόντιο έχει αρκετό πλάτος οθόνης για εμφάνιση περιεχομένου σε δύο στήλες (όπως σε iPad mini). Η Apple αποδίδει οριζόντιο Regular ώστε ο προγραμματιστής να μπορεί να χρησιμοποιεί multi-column layout χωρίς πρόσθετους ελέγχους. Αυτή είναι εξαίρεση από τον κανόνα Compact για iPhone.
Μπορεί το Size Class να αλλάξει προγραμματιστικά;
Size Class καθορίζεται από το iOS βάσει πραγματικών χαρακτηριστικών της συσκευής και δεν μπορεί να αλλάξει από τον κώδικα της εφαρμογής. Ο προγραμματιστής μπορεί μόνο να αντιδράσει στην τρέχουσα τιμή. Το System UI μπορεί να παρακάμψει το Size Class για στοιχεία συστήματος, αλλά στην εφαρμογή αυτό είναι αδύνατο.
Πώς λειτουργεί το Size Class με το SwiftUI;
SwiftUI δεν χρησιμοποιεί άμεσα το Size Class — αντίθετα, ο προγραμματιστής εφαρμόζει τροποποιητές @Environment(\.horizontalSizeClass) για ανάγνωση της τρέχουσας τιμής. Το SwiftUI προσφέρει εργαλεία υψηλότερου επιπέδου: Size Classes και AnyLayout με Layout protocol για προσαρμοστική διάταξη.
Ενημερώνεται το Size Class κατά τη σύνδεση εξωτερικής οθόνης;
Ναι, κατά τη σύνδεση εξωτερικής οθόνης μέσω Stage Manager ή Sidecar, το iOS ενημερώνει το Size Class. Η εξωτερική οθόνη συνήθως λαμβάνει wRegular hRegular, ενώ η κύρια οθόνη διατηρεί το Size Class της. Το traitCollectionDidChange καλείται για παράθυρα σε κάθε οθόνη ανεξάρτητα.
Σύνοψη
- Size Class — σύστημα ταξινόμησης οθόνης iOS με δύο τιμές Compact/Regular ανά άξονα, σύνολο 4 συνδυασμοί.
- iPhone σε κατακόρυφο — wCompact hRegular. iPad σε λειτουργία πλήρους οθόνης — wRegular hRegular. iPhone Plus/Max σε οριζόντιο — wRegular hCompact.
- Interface Builder παρέχει Vary for Traits για οπτική διαμόρφωση constraints και ορατότητας για κάθε Size Class.
- UITraitCollection — προγραμματιστικό API για ανάγνωση Size Class μέσω horizontalSizeClass και verticalSizeClass. Οι αλλαγές παρακολουθούνται στο traitCollectionDidChange.
- Split View σε iPad αλλάζει δυναμικά το Size Class: στο 1/3 οθόνης, το οριζόντιο γίνεται Compact, απαιτώντας προσαρμογή διάταξης.
- SwiftUI παρέχει @Environment(\.horizontalSizeClass) για ανάγνωση Size Class και AnyLayout για εναλλαγή μεταξύ διατάξεων κατά το χρόνο εκτέλεσης.
- Συνιστάται να ξεκινάτε με διάταξη για wAny hAny, στη συνέχεια να προσαρμόζετε για wCompact hRegular (iPhone) και wRegular hRegular (iPad), χωρίς υπερφόρτωση των υπόλοιπων συνδυασμών.
Θα αναπτύξουμε μια εφαρμογή για κινητά έτοιμη για χρήση
Η IT Sectr δημιουργεί εφαρμογές iOS και Android για νεοφυείς επιχειρήσεις και επιχειρήσεις από το 2017. Θα σας συμβουλεύσουμε και θα προτείνουμε την καλύτερη λύση.
Διαβάστε επίσης