SDWebImage: τι είναι, βασικές έννοιες και UIImageView

Τι είναι το SDWebImage;

SDWebImage — βιβλιοθήκη για ασύγχρονη φόρτωση εικόνων σε πλατφόρμες Apple (iOS, macOS, tvOS, watchOS). Παρέχει μια κατηγορία για UIImageView με τη μέθοδο sd_setImage που σε μία γραμμή φορτώνει, αποθηκεύει προσωρινά και εμφανίζει την εικόνα από οποιαδήποτε πηγή.

Η βιβλιοθήκη υποστηρίζει προοδευτική φόρτωση (η εικόνα εμφανίζεται καθώς λαμβάνει bytes), κινούμενες εικόνες (GIF, APNG), μετασχηματισμούς (στρογγυλοποίηση, περικοπή, προσθήκη υδατοσήμου) και προσαρμοσμένους αποκωδικοποιητές. Σύμφωνα με GitHub Stats, το SDWebImage έχει πάνω από 25 χιλιάδες αστέρια και χρησιμοποιείται σε μεγάλες εφαρμογές, συμπεριλαμβανομένων των Twitter, Pinterest και Instagram.

Η αρχιτεκτονική βασίζεται σε μια αλυσίδα στοιχείων: Coder (αποκωδικοποίηση), Cache (αποθήκευση), Loader (δίκτυο) και Transformer (επεξεργασία). Κάθε στοιχείο είναι αντικαταστάσιμο, επιτρέποντας την προσαρμογή της βιβλιοθήκης σε ειδικές απαιτήσεις του έργου.

Πώς λειτουργεί το SDWebImage: διαχειριστής και προσωρινή αποθήκευση

SDWebImageManager — το κεντρικό στοιχείο που συντονίζει τη διαδικασία φόρτωσης. Λαμβάνει URL, ελέγχει την προσωρινή αποθήκευση, φορτώνει τα δεδομένα, τα αποκωδικοποιεί σε UIImage και τα μεταβιβάζει στο ImageView ή στο Completion Handler. Ο διαχειριστής λειτουργεί μέσω του shared singleton, προσβάσιμος από οποιοδήποτε σημείο της εφαρμογής.

Διαδικασία φόρτωσης

Ο διαχειριστής ελέγχει διαδοχικά την Memory Cache (NSDictionary με UIImage), έπειτα τη Disk Cache (σύστημα αρχείων). Σε περίπτωση απουσίας δεδομένων, εκτελείται μια αίτηση δικτύου μέσω NSURLSession. Μετά τη φόρτωση, τα δεδομένα αποκωδικοποιούνται, περνούν μέσα από μετασχηματισμούς και αποθηκεύονται και στις δύο προσωρινές αποθηκεύσεις. Ολόκληρη η διαδικασία εκτελείται σε ουρά υπόβαθρου, το αποτέλεσμα παραδίδεται στην main queue.

• Memory Cache — έλεγχος σε O(1), αποθήκευση UIImage με προσoχή του ορίου μνήμης
• Disk Cache — ανάγνωση από το σύστημα αρχείων, αποθήκευση συμπιεσμένων δεδομένων
• NSURLSession — φόρτωση με υποστήριξη HTTP/2 και διαμορφώσιμο timeout

Κατηγορία UIImageView

UIImageView+WebCache — κατηγορία Objective-C (προσβάσιμη από Swift) που προσθέτει τη μέθοδο sd_setImage. Αυτή η μέθοδος δέχεται URL, placeholder, επιλογές (SDWebImageOptions) και completion-block. Η κατηγορία ακυρώνει αυτόματα το προηγούμενο αίτημα κατά την επαναχρησιμοποίηση κελιού πίνακα μέσω του μηχανισμού sd_cancelCurrentImageLoad.

Βασικές κλάσεις του SDWebImage

Η αρχιτεκτονική του SDWebImage χωρίζεται σε πολλά δομήματα με σαφείς περιοχές ευθύνης. Κάθε κλάση λύνει ένα φύλλο εργασίας — από τη φόρτωση μέχρι την εμφάνιση.

SDWebImageManager

SDWebImageManager — πρόσοψη για όλες τις λειτουργίες με εικόνες. Περιέχει αναφορές σε ImageCache (SDImageCache) και ImageLoader (SDWebImageDownloader). Μέσω του αποσταλμένου SDWebImageManagerDelegate μπορεί να παρακολουθηθεί η φόρτωση και να τροποποιηθεί το URL ή η συμπεριφορά.

SDImageCache

SDImageCache — αποθήκευση δύο επιπέδων (memory + disk), αρχικοποιημένη με μοναδικό namespace. Η Memory Cache αποθηκεύει UIImage με διαμορφώσιμο όριο (από προκαθορισμού — μέχρι system memory warning). Η Disk Cache αποθηκεύει δεδομένα στον κατάλογο Library/Caches με διαμορφώσιμη περίοδο αποθήκευσης (από προκαθορισμού 7 ημέρες).

SDWebImageDownloader

SDWebImageDownloader — πελάτης HTTP βασισμένος σε NSURLSession με υποστήριξη κεφαλίδων, timeout και επαναλήψεων. Ο λήπτης συνδυάζει παρόμοια αιτήματα σε μία κλήση δικτύου (αφαίρεση διπλοτύπων) και κατανέμει το αποτέλεσμα σε όλους τους συνδρομητές.

Αρχιτεκτονική προσωρινής αποθήκευσης του SDWebImage

Το SDWebImage υλοποιεί προσωρινή αποθήκευση δύο επιπέδων με ντετερμινιστική σειρά ελέγχου: πρώτα μνήμη, μετά δίσκος. Το κλειδί προσωρινής αποθήκευσης είναι το απόλυτο URL της εικόνας χωρίς παραμέτρους query ή το MD5 χας του.

Όταν λαμβάνει memory warning, το iOS ειδοποιεί το SDImageCache μέσω UIApplicationDidReceiveMemoryWarningNotification, οπότε η Memory Cache καθαρίζεται πλήρως. Η Disk Cache καθαρίζεται βάσει TTL ή όταν υπερβαίνεται το όριο, με ταξινόμηση των αρχείων βάσει ημερομηνίας τελευταίας πρόσβασης.

Για χειροκίνητη διαχείριση προσωρινής αποθήκευσης διατίθενται μέθοδοι: clearMemory, clearDisk, calculateSize. Η προσωρινή αποθήκευση μπορεί να απενεργοποιηθεί για συγκεκριμένα αιτήματα μέσω της επιλογής SDWebImageCacheMemoryOnly ή SDWebImageAvoidAutoSetImage.

Παραδείγματα χρήσης του SDWebImage σε Swift

Το SDWebImage παρέχει πολλές διεπαφές για φόρτωση εικόνων: από την απλή κατηγορία UIImageView μέχρι τον προηγμένο διαχειριστή με προσαρμοσμένη επεξεργασία.

Βασική φόρτωση σε UIImageView

sd_setImage — η κύρια μέθοδος για φόρτωση εικόνας σε UIImageView. Δέχεται URL, placeholder και προαιρετικές παραμέτρους μέσω Options και Context. Όλοι οι Completion Handler εκτελούνται στο κύριο νήμα.

let imageView = UIImageView()
imageView.sd_setImage(
    with: URL(string: "https://example.com/photo.jpg"),
    placeholderImage: UIImage(named: "placeholder"),
    options: [.progressiveLoad, .retryFailed],
    context: [.imageThumbnailPixelSize : CGSize(width: 300, height: 300)]
)

Η μέθοδος επιστρέφει SDWebImageToken (μια λειτουργία) που μπορεί να ακυρωθεί εάν χρειαστεί. Εσωτερικά, η sd_setImage καλεί την SDWebImageManager.load, μεταβιβάζοντας το ImageView ως Target για αυτόματη ρύθμιση της εικόνας.

Φόρτωση με προσαρμοσμένο μετασχηματισμό

Το SDWebImage υποστηρίζει Transformer — ένα πρωτόκολλο με μία μοναδική μέθοδο transformedImage. Ενσωματωμένοι μετασχηματισμοί: κύκλος, στρογγυλοποίηση, εφαρμογή φίλτρου χρώματος, αλλαγή μεγέθους. Ο συνδυασμός μετασχηματισμών γίνεται με τον τελεστή &&.

let transformer = SDImageResizingTransformer(
    size: CGSize(width: 200, height: 200),
    scaleMode: .aspectFill
)
let roundedTransformer = SDImageRoundCornerTransformer(
    radius: 16,
    corners: .allCorners,
    borderWidth: 0
)
imageView.sd_setImage(
    with: url,
    placeholderImage: placeholder,
    context: [.imageTransformer : transformer && roundedTransformer]
)

Χρήση με SwiftUI

Η βιβλιοθήκη παρέχει WebImage — ένα στοιχείο View για SwiftUI με υποστήριξη placeholder, δείκτη προόδου και χειρισμού σφαλμάτων. Το στοιχείο εγγράφεται αυτόματα στον κύκλο ζωής του View και ακυρώνει τη φόρτωση κατά την εξαφάνιση.

struct CachedImageView: View {
    let url: URL

    var body: some View {
        WebImage(url: url) { phase in
            if let image = phase.image {
                image.resizable()
            } else if phase.error {
                Color.red
            } else {
                ProgressView()
            }
        }
    }
}

Image Transformations στο SDWebImage

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

Οι ενσωματωμένοι μετασχηματισμοί περιλαμβάνουν: SDImageResizingTransformer (αλλαγή μεγέθους με λειτουργία), SDImageRoundCornerTransformer (στρογγυλοποίηση γωνιών με προαιρετικό σύνορο), SDImageFlipTransformer (κατοπτρισμός) και SDImageFilterTransformer (φίλτρα CoreImage). Ο συνδυασμός γίνεται με τον τελεστή &&, δημιουργώντας μια αλυσίδα επεξεργασίας.

Για προσαρμοσμένους μετασχηματισμούς, αρκεί η υλοποίηση του πρωτοκόλλου SDImageTransformer με τη μέθοδο transformedImageWithImage:forKey:. Το κλειδί μετασχηματισμού προστίθεται αυτόματα στο κλειδί προσωρινής αποθήκευσης, αποτρέποντας συγκρούσεις μεταξύ διαφορετικών εκδόσεων της ίδιας εικόνας.

Σύγκριση SDWebImage με Kingfisher

Στην πλατφόρμα iOS, οι κύριοι ανταγωνιστές του SDWebImage είναι Kingfisher (καθαρό Swift) και Nuke. Η επιλογή ανάμεσα σε SDWebImage και Kingfisher συχνά εξαρτάται από τη γλώσσα του έργου και την απαιτούμενη λειτουργικότητα.

Το SDWebImage παραμένει η προτιμημένη επιλογή για έργα σε Objective-C ή υβριδικά έργα. Το Kingfisher είναι κατάλληλο για έργα σε καθαρό Swift χάρη στην ασφάλεια τύπων και την εγγενή σύνταξη Swift. Και οι δύο βιβλιοθήκες έχουν παρόμοια αρχιτεκτονική προσωρινής αποθήκευσης και ταχύτητα.

Ρύθμιση SDWebImage σε έργο iOS

Η σύνδεση του SDWebImage γίνεται μέσω Swift Package Manager, CocoaPods ή Carthage. Η βιβλιοθήκη χωρίζεται σε δομήματα: κύριο (SDWebImage), Coder (πρόσθετες μορφές) και MapKit (για MKAnnotationView).

// Swift Package Manager (Package.swift)
dependencies: [
    .package(
        url: "https://github.com/SDWebImage/SDWebImage.git",
        from: "5.19.0"
    )
]

// CocoaPods (Podfile)
pod 'SDWebImage', '~> 5.19.0'
// Πρόσθετα για WebP και SVG:
pod 'SDWebImageWebPCoder'
pod 'SDWebImageSVGCoder'

Μετά την εγκατάσταση, η βιβλιοθήκη είναι έτοιμη για χρήση χωρίς πρόσθετη ρύθμιση. Για προσαρμογή της προσωρινής αποθήκευσης, δημιουργείται ένα στέλεχος SDImageCache με μοναδικό namespace, το οποίο μεταβιβάζεται στο SDWebImageManager κατά την αρχικοποίηση. Η συνολική παραμετροποίηση γίνεται μέσω SDWebImageManager.shared.

// Προσαρμογή προσωρινής αποθήκευσης
let config = SDImageCacheConfig()
config.maxDiskAge = 14 * 86400 // 14 ημέρες αντί για 7
config.maxDiskSize = 500 * 1024 * 1024 // 500 MB
config.shouldCacheImagesInMemory = .true

let cache = SDImageCache(
    namespace: "custom",
    diskCacheDirectory: FileManager.default.urls(
        for: .cachesDirectory,
        in: .userDomainMask
    ).first?.appendingPathComponent("custom_cache"),
    config: config
)
SDWebImageManager.sharedImageCache = cache