Canvas στο Xcode — τι είναι, επεξεργαστής SwiftUI και εργασία με προεπισκόπηση

Τι είναι το Canvas στο Xcode;

Canvas — ο ενσωματωμένος επεξεργαστής προεπισκόπησης του Xcode, που πρωτοεμφανίστηκε στο Xcode 11 μαζί με το SwiftUI. Βρίσκεται στο δεξί πάνελ του επεξεργαστή δίπλα στον κώδικα και εμφανίζει ζωντανή προεπισκόπηση της τρέχουσας SwiftUI View. Το Canvas λειτουργεί σε πραγματικό χρόνο: κάθε αλλαγή στον κώδικα αντικατοπτρίζεται αμέσως στην προεπισκόπηση χωρίς χειροκίνητη μεταγλώττιση.

Αρχιτεκτονικά, το Canvas είναι μια ξεχωριστή διεργασία (Preview Provider Extension) που εκκινεί το Xcode κατά το άνοιγμα του Canvas. Η διεργασία φορτώνει τον μεταγλωττισμένο PreviewProvider, αποδίδει το αποτέλεσμα μέσω Metal και το εμφανίζει στο πάνελ του επεξεργαστή. Εάν δεν υπάρχει υλοποίηση PreviewProvider, το Canvas εμφανίζει το μήνυμα “Preview paused — No preview provider found”.

Διεπαφή Canvas

Η διεπαφή Canvas περιλαμβάνει μια γραμμή εργαλείων με επιλογή συσκευής, προσανατολισμού, χρωματικού σχήματος και κλίμακας. Τα κουμπιά Live Preview, Selectable και Embed In Diagram εναλλάσσουν τα στοιχεία αλληλεπίδρασης. Το Canvas υποστηρίζει διαχωρισμένη προβολή (split-view): πολλά Canvas μπορούν να ανοιχτούν για διαφορετικά αρχεία στον ίδιο χώρο εργασίας.

Πώς λειτουργεί το διαδραστικό Canvas

Live Preview — η βασική δυνατότητα του Canvas που κάνει την προεπισκόπηση διαδραστική. Σε αυτή τη λειτουργία, το Canvas αποδίδει τη View σε μια ξεχωριστή διεργασία και μεταφέρει χειρονομίες (πατήματα, σύρση, κύλιση) πίσω στο περιβάλλον χρόνου εκτέλεσης του SwiftUI. Ο χρήστης μπορεί να πατήσει κουμπιά, να συμπληρώσει πεδία κειμένου και να δοκιμάσει την πλοήγηση χωρίς να εκκινήσει τον προσομοιωτή.

Το SwiftUI επεξεργάζεται χειρονομίες στο Canvas μέσω του ίδιου συστήματος γεγονότων όπως σε μια πραγματική συσκευή. Η διαφορά στην απόδοση: το Canvas χρησιμοποιεί απόδοση λογισμικού μέσω Metal, ενώ ο προσομοιωτής χρησιμοποιεί γραφικά υποδοχής. Αυτό σημαίνει ότι σύνθετες κινήσεις στο Canvas μπορεί να λειτουργούν πιο αργά ή να διαφέρουν οπτικά.

Διαδικασία ενημέρωσης Canvas

Η ενημέρωση του Canvas γίνεται σε τρία στάδια. Πρώτα, το Xcode ανιχνεύει την αλλαγή αρχείου και μεταγλωττίζει αυξητικά μόνο τον τροποποιημένο PreviewProvider. Στη συνέχεια, το νέο δυαδικό πρόγραμμα φορτώνεται στη διεργασία PreviewProviderExtension. Τέλος, το SwiftUI αναδημιουργεί τη View και την αποδίδει μέσω Metal. Ο κύκλος διαρκεί 0.5–2 δευτερόλεπτα ανάλογα με την πολυπλοκότητα της View.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("\(count) φορές πατήθηκε") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

Διαδραστικότητα: κατά την εκκίνηση του Live Preview, το κουμπί στο Canvas λειτουργεί ως πραγματικό — ο μετρητής αυξάνεται σε κάθε πάτημα, η κίνηση πατήματος εμφανίζεται. Αυτό επιτρέπει τη δοκιμή της λογικής κουμπιού χωρίς προσομοιωτή.

Ρύθμιση Canvas

Οι βασικές ρυθμίσεις του Canvas είναι προσβάσιμες μέσω του μενού Editor → Canvas ή μέσω των κουμπιών στη γραμμή εργαλείων του ίδιου του Canvas. Οι κύριες επιλογές περιλαμβάνουν επιλογή συσκευής, προσανατολισμού, σκοτεινού θέματος και κλίμακας Dynamic Type. Για μόνιμες ρυθμίσεις, χρησιμοποιήστε τροποποιητές PreviewProvider στον κώδικα.

Οι προηγμένες ρυθμίσεις περιλαμβάνουν: Auto Activate Preview — αυτόματη ενεργοποίηση του Canvas κατά το άνοιγμα αρχείου SwiftUI; Live Preview — λειτουργία με χειρονομίες; Draw Live Edges — εμφάνιση ορίων προβολής; Show Preview Sizes — μέγεθος περιοχής προεπισκόπησης. Το Xcode αποθηκεύει αυτές τις ρυθμίσεις μεταφέρσιμα σε αρχεία workspace/πρότζεκτ.

Ρύθμιση μέσω PreviewProvider

Ο προγραμματισμός ρύθμισης παρέχει ακριβέστερο έλεγχο του Canvas. Οι τροποποιητές που εφαρμόζονται στα previews αντικαθιστούν τις ρυθμίσεις της γραμμής εργαλείων και αποθηκεύονται στον κώδικα — όλα τα μέλη της ομάδας τα βλέπουν μέσω git.

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout με .device εμφανίζει την πλήρη οθόνη της συσκευής, και .sizeThatFits — μια συμπαγή προεπισκόπηση με μέγεθος προσαρμοσμένο στο περιεχόμενο. Για widget και μικρά στοιχεία, χρησιμοποιήστε .sizeThatFits — εξοικονομεί χώρο στον επεξεργαστή.

Παραδείγματα εργασίας με Canvas

Παράδειγμα 1: έλεγχος προσαρμοστικότητας. Χρησιμοποιήστε ForEach με πολλαπλές συσκευές και χρωματικά σχήματα για να βεβαιωθείτε ότι η διεπαφή φαίνεται εξίσου καλή σε όλες τις οθόνες. Το Canvas ενημερώνει όλες τις προεπισκοπήσεις ταυτόχρονα, επιτρέποντάς σας να δείτε προβλήματα διάταξης πριν από την εκκίνηση του προσομοιωτή.

Παράδειγμα 2: προεπισκόπηση με δεδομένα. Για View που εμφανίζουν δυναμικό περιεχόμενο (λίστες, προφίλ, κάρτες), δημιουργήστε πολλά στιγμιότυπα με διαφορετικά δεδομένα στα previews. Αυτό είναι πιο γρήγορο από την εναλλαγή μεταξύ οθονών στον προσομοιωτή και την εισαγωγή δεδομένων.

Προεπισκόπηση με διαφορετικές καταστάσεις

Ομάδα προεπισκοπήσεων μέσω Group ή ForEach επιτρέπει την εμφάνιση όλων των καταστάσεων ενός στοιχείου σε ένα πάνελ. Για μια λίστα, αυτό είναι ιδιαίτερα βολικό: η κενή λίστα, η φόρτωση, το σφάλμα και η πλήρης λίστα είναι ορατές ταυτόχρονα.

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas vs Simulator — σύγκριση

Canvas και Simulator αλληλοσυμπληρώνονται, δεν αντικαθίστανται. Το Canvas είναι ιδανικό για γρήγορη επανάληψη κατά το σχεδιασμό της διεπαφής: επεξεργασία κώδικα με άμεση ανάδραση. Ο Simulator είναι απαραίτητος για τον τελικό έλεγχο: πραγματική απόδοση, προσαρμοσμένες χειρονομίες, συστημικές ειδοποιήσεις και ενσωμάτωση με λειτουργίες υλικού (κάμερα, αισθητήρες).

Σύμφωνα με το WWDC 2024, η Apple τοποθετεί το Canvas ως εργαλείο για προγραμματιστές σε πρώιμα στάδια, και τον Simulator για το στάδιο δοκιμών ολοκλήρωσης. Το 60% του χρόνου ανάπτυξης UI συνιστάται σε Canvas, το 40% — έλεγχος σε προσομοιωτή ή συσκευή.

Σύσταση: σχεδιάστε στο Canvas, δοκιμάστε στον Simulator. Χρησιμοποιήστε το Live Preview για τη λογική χειρονομιών κουμπιών και πλοήγησης, αλλά τον τελικό έλεγχο κινήσεων, αιτημάτων δικτύου και λειτουργιών υλικού κάντε σε προσομοιωτή ή πραγματική συσκευή.

Συμβουλές για εργασία με το Canvas

Συμβουλή 1: χρησιμοποιήστε τη λειτουργία Selectable. Στη λειτουργία Selectable (εικονίδιο δείκτη), μπορείτε να κάνετε κλικ σε οποιοδήποτε στοιχείο της προεπισκόπησης και να δείτε την ιεραρχία, τους τροποποιητές και το πλαίσιο του στον επιθεωρητή. Αυτό είναι χρήσιμο για την αποσφαλμάτωση διάταξης: βλέπετε αμέσως padding, offset και μέγεθος στοιχείου χωρίς εκτυπώσεις.

Συμβουλή 2: Embed In Diagram. Το Canvas μπορεί να ομαδοποιήσει στοιχεία: επιλέξτε δύο ή περισσότερες View, κάντε κλικ Embed In Diagram — το Canvas θα δημιουργήσει VStack/HStack/ZStack και θα ξαναγράψει αυτόματα τον κώδικα. Αυτό επιταχύνει τη δημιουργία σύνθετης ιεραρχίας χωρίς χειροκίνητη πληκτρολόγηση παρενθέσεων.

Συμβουλή 3: εκκαθάριση προσωρινής προβολής Canvas. Εάν το Canvas σταματήσει να ενημερώνεται, εκκαθαρίστε Product → Preview Cache. Το Xcode θα διαγράψει τα προσωρινά δυαδικά αρχεία PreviewProvider και θα τα ανακατασκευάσει από την αρχή. Αυτό επιλύει το 90% των προβλημάτων με το Canvas που έχει κολλήσει.

Βελτιστοποίηση ταχύτητας Canvas

Αργό Canvas συνήθως προκαλείται από υπερβολικό αριθμό προεπισκοπήσεων. Για σύνθετες View, χρησιμοποιήστε μόνο μία προεπισκόπηση, όχι μια ομάδα 6–8. Απενεργοποιήστε το Live Preview για View χωρίς χειρονομίες — η στατική λειτουργία αποδίδει πιο γρήγορα. Βεβαιωθείτε ότι το PreviewProvider χρησιμοποιεί προσομοιώσεις, όχι πραγματικά αιτήματα δικτύου.

// Γρήγορη αποσφαλμάτωση: ελάχιστη προεπισκόπηση
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // συμπαγής λειτουργία
    }
}

previewLayout(.sizeThatFits) — η πιο γρήγορη λειτουργία Canvas, καθώς αποδίδεται μόνο το περιεχόμενο της View χωρίς πλαίσιο συσκευής. Χρησιμοποιήστε την για καθημερινή εργασία, ενεργοποιήστε το .device μόνο για τελικό έλεγχο.