Window Size Class — τι είναι, κλάσεις μεγεθών και ανάπτυξη

Τι είναι το Window Size Class;

Window Size Class είναι ένα API της πλατφόρμας Android, μέρος της βιβλιοθήκης Jetpack WindowManager, που ταξινομεί τον διαθέσιμο χώρο του παραθύρου της εφαρμογής σε τρεις κατηγορίες. Σε αντίθεση με την παραδοσιακή προσέγγιση με ποσοτικοποιητές πόρων (small/large/xlarge), το Window Size Class παρέχει ένα διακριτό σύνολο τιμών στις οποίες μπορεί να βασιστεί ο προγραμματιστής κατά τον σχεδιασμό της διεπαφής.

Το API εμφανίστηκε στο Android 7.0 Nougat ως μέρος υποστήριξης για λειτουργία πολλαπλών παραθύρων, αλλά η ενεργή εφαρμογή ξεκίνησε με το Jetpack WindowManager 1.1 (2022). Η Google συνιστά το Window Size Class ως το κύριο εργαλείο για τη δημιουργία προσαρμοστικών διατάξεων αντί του ελέγχου του πλάτους οθόνης μέσω Display.getSize().

Η ταξινόμηση βασίζεται στο πλάτος του παραθύρου σε dp, όχι στο φυσικό μέγεθος ή την πυκνότητα pixel. Αυτό σημαίνει ότι δύο συσκευές με διαφορετική ανάλυση αλλά ίδιο πλάτος σε dp θα λάβουν την ίδια κλάση — η διεπαφή θα είναι προβλέψιμα ίδια.

Τρεις κλάσεις μεγέθους παραθύρου Android

Compact — κλάση για παράθυρα με πλάτος έως 600 dp. Τηλέφωνο σε κατακόρυφη λειτουργία, τα περισσότερα αναδιπλούμενα τηλέφωνα (Galaxy Z Flip) σε κλειστή κατάσταση. Η διεπαφή χτίζεται σε μία στήλη, πλοήγηση μέσω Bottom Navigation.

Medium — κλάση για παράθυρα με πλάτος 600–840 dp. Tablet σε κατακόρυφη λειτουργία, τηλέφωνο σε οριζόντια, αναδιπλούμενη συσκευή σε μισάνοιχτη κατάσταση. Η διεπαφή χρησιμοποιεί δύο στήλες — για παράδειγμα, λίστα αριστερά και λεπτομέρειες δεξιά. Το Navigation Rail αντικαθιστά το Bottom Navigation.

Expanded — κλάση για παράθυρα με πλάτος από 840 dp. Tablet σε οριζόντια λειτουργία, παράθυρο επιτραπέζιου υπολογιστή, αναδιπλούμενη συσκευή σε ανοιχτή κατάσταση. Η διεπαφή μπορεί να χρησιμοποιεί τρία ή περισσότερα πάνελ, Permanent Navigation Drawer, πάνελ εργαλείων.

Στο Material Design 3 για κάθε κλάση ορίζονται προσαρμοστικά στοιχεία: Navigation Rail για Medium, Navigation Drawer για Expanded, Bottom Navigation για Compact. Ο προγραμματιστής δεν χρειάζεται να επιλέξει breakpoints — έχουν ήδη οριστεί από το API.

Πώς λειτουργεί το Window Size Class

Το Window Size Class υπολογίζεται βάσει του τρέχοντος πλάτους του παραθύρου της εφαρμογής σε dp, λαμβάνοντας υπόψη τα στοιχεία συστήματος — γραμμή κατάστασης, πάνελ πλοήγησης, διαίρεση οθόνης σε Split Screen. Το API αντιδρά στην αλλαγή διαμόρφωσης παραθύρου: περιστροφή συσκευής, είσοδος σε λειτουργία πολλαπλών παραθύρων, άνοιγμα αναδιπλούμενης συσκευής.

Για τη λήψη της κλάσης χρησιμοποιείται η κλάση WindowSizeClass από τη βιβλιοθήκη androidx.window. Ο προγραμματιστής εγγράφεται στο Flow (Kotlin) ή LiveData (Java), που ενημερώνει αυτόματα την κλάση σε κάθε αλλαγή μεγέθους παραθύρου — χωρίς χειροκίνητη επεξεργασία του onConfigurationChanged.

Η ταξινόμηση γίνεται σε τρία βήματα. Πρώτο — μέτρηση του τρέχοντος πλάτους παραθύρου σε pixel. Δεύτερο — μετατροπή σε dp μέσω DisplayMetrics.density. Τρίτο — σύγκριση της τιμής που προέκυψε με τα όρια: λιγότερο από 600 dp — Compact, 600–840 — Medium, από 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // συμπαγές πλάτος
    WindowWidthSizeClass.MEDIUM  -> // μεσαίο πλάτος
    WindowWidthSizeClass.EXPANDED -> // εκτεταμένο πλάτος
}

Εκτός από το πλάτος (windowWidthSizeClass), το API παρέχει κλάση για το ύψος παραθύρου (windowHeightSizeClass) — χρήσιμο για οριζόντιο προσανατολισμό και παράθυρα επιτραπέζιου υπολογιστή.

Window Size Class στο Jetpack Compose

Στο Jetpack Compose το Window Size Class χρησιμοποιείται μέσω της συνάρτησης currentWindowAdaptiveInfo(), η οποία επιστρέφει WindowAdaptiveInfo με κλάσεις πλάτους και ύψους. Αυτή η συνάρτηση λαμβάνει υπόψη όχι μόνο το μέγεθος παραθύρου, αλλά και τον τύπο εισόδου (πληκτρολόγιο, ποντίκι, αφή) — μέσω WindowPosture και WindowLayoutInfo.

Τυπικό σενάριο — εναλλαγή μεταξύ διατάξεων ανάλογα με την κλάση. Για παράδειγμα, στο Compact εμφανίζεται ένα BottomSheet με επιλογή, στο Medium — πλευρικό πάνελ, στο Expanded — μόνιμο Navigation Drawer.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

Στο Material Design 3 τα στοιχεία NavigationSuiteScaffold προσαρμόζονται αυτόματα στο Window Size Class — ο προγραμματιστής δεν χρειάζεται να γράψει υπό συνθήκη λογική.

Window Size Class και Material Design 3

Material Design 3 (Material You) είναι πλήρως ενσωματωμένο με το Window Size Class. Το σύστημα adaptive layout στο Material 3 καθορίζει ποιο στοιχείο πλοήγησης να χρησιμοποιηθεί σε κάθε κλάση: BottomNavigation για Compact, NavigationRail για Medium, NavigationDrawer για Expanded.

Αυτή η ενσωμάτωση λειτουργεί σε επίπεδο Adaptive API, το οποίο συνδυάζει το Window Size Class με άλλα σήματα — FoldState (αναδιπλούμενη συσκευή) και WindowPosture (θέση οθόνης). Το Adaptive API είναι διαθέσιμο μέσω της βιβλιοθήκης material3-adaptive.

Το Material 3 παρέχει τέσσερα προσαρμοστικά στοιχεία υψηλού επιπέδου: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold και AdaptiveSheet. Κάθε ένα από αυτά αλλάζει τη συμπεριφορά του ανάλογα με το Window Size Class χωρίς πρόσθετη διαμόρφωση.

Πλεονεκτήματα προσαρμοστικών διατάξεων

Η χρήση του Window Size Class παρέχει τρία βασικά πλεονεκτήματα στην ανάπτυξη κινητών. Πρώτο — προβλεψιμότητα: αντί για εκατοντάδες συνδυασμούς μεγεθών οθόνης, ο προγραμματιστής εργάζεται με τρεις κλάσεις. Αυτό μειώνει δραστικά τον αριθμό των σεναρίων δοκιμής και σφαλμάτων που σχετίζονται με τη διάταξη.

Δεύτερο — αυτόματη προσαρμογή σε λειτουργία πολλαπλών παραθύρων. Όταν ο χρήστης εισέρχεται στο Split Screen, το πλάτος παραθύρου αλλάζει — το Window Size Class υπολογίζεται άμεσα εκ νέου και η διεπαφή προσαρμόζεται. Χωρίς αυτό το API, η εφαρμογή σε διαιρεμένη οθόνη εμφανίζει μια περικομμένη έκδοση της διεπαφής τηλεφώνου.

Τρίτο — συνέπεια με το Material Design 3. Η Google ενσωμάτωσε το Window Size Class στο σύστημα προσαρμοστικών στοιχείων, έτσι οι διεπαφές που βασίζονται στο Material 3 ακολουθούν αυτόματα τις συστάσεις της Google για σχεδιασμό μεγάλης οθόνης χωρίς επιπλέον εργασία.