SDWebImage: vad det är, nyckelbegrepp och UIImageView

Vad är SDWebImage?

SDWebImage — bibliotek för asynkron laddning av bilder på Apple-plattformar (iOS, macOS, tvOS, watchOS). Det tillhandahåller en kategori för UIImageView med metoden sd_setImage som på en rad laddar, cachar och visar bilden från valfri källa.

Biblioteket stöder progressiv laddning (bilden visas allt eftersom bytes tas emot), animerade bilder (GIF, APNG), transformationer (avrundning, beskärning, vattenmärkning) och anpassade avkodare. Enligt GitHub Stats har SDWebImage över 25 tusen stjärnor och används i stora applikationer som Twitter, Pinterest och Instagram.

Arkitekturen är byggd på en kedja av komponenter: Coder (avkodning), Cache (lagring), Loader (nätverk) och Transformer (bearbetning). Varje komponent är utbytbar, vilket gör att biblioteket kan anpassas till specifika projektkrav.

Hur fungerar SDWebImage: manager och cache

SDWebImageManager — central komponent som koordinerar laddningsprocessen. Den tar emot URL, kontrollerar cachen, laddar data, avkodar dem till UIImage och skickar dem till ImageView eller Completion Handler. Managern fungerar via shared singleton, tillgänglig från valfri del av applikationen.

Laddningsprocess

Managern kontrollerar sekventiellt Memory Cache (NSDictionary med UIImage), sedan Disk Cache (filsystem). Vid miss utförs en nätverksbegäran via NSURLSession. Efter laddning avkodas data, genomgår transformationer och sparas i båda cacheminnena. Hela processen sker i bakgrundskön, resultatet levereras i main queue.

• Memory Cache — kontroll i O(1), lagring av UIImage med hänsyn till minnesgräns
• Disk Cache — läsning från filsystem, lagring av komprimerad data
• NSURLSession — laddning med stöd för HTTP/2 och konfigurerbar timeout

UIImageView-kategori

UIImageView+WebCache — Objective-C-kategori (tillgänglig från Swift) som lägger till metoden sd_setImage. Denna metod tar emot URL, placeholder, alternativ (SDWebImageOptions) och completion-block. Kategorin avbryter automatiskt föregående begäran vid återanvändning av tabellcell via mekanismen sd_cancelCurrentImageLoad.

Huvudklasser i SDWebImage

SDWebImage-arkitekturen är uppdelad i flera moduler med tydliga ansvarsområden. Varje klass löser en uppgift — från laddning till visning.

SDWebImageManager

SDWebImageManager — fasad för alla bildoperationer. Innehåller referenser till ImageCache (SDImageCache) och ImageLoader (SDWebImageDownloader). Via delegaten SDWebImageManagerDelegate kan laddningen fångas upp och URL eller beteende ändras.

SDImageCache

SDImageCache — två nivåers cache (memory + disk), initierad med unikt namespace. Memory Cache lagrar UIImage med konfigurerbar gräns (standard — till system memory warning). Disk Cache lagrar data i katalogen Library/Caches med konfigurerbar lagringstid (standard 7 dagar).

SDWebImageDownloader

SDWebImageDownloader — HTTP-klient baserad på NSURLSession med stöd för headers, timeout och återförsök. Nedladdaren kombinerar identiska begäranden till ett nätverksanrop (deduplicering) och distribuerar resultatet till alla prenumeranter.

Cachearkitektur för SDWebImage

SDWebImage implementerar två nivåers cachning med deterministisk kontrollordning: först minne, sedan disk. Cache-nyckeln är bildens absoluta URL utan query-parametrar eller MD5-hash av den.

Vid mottagande av memory warning meddelar iOS SDImageCache via UIApplicationDidReceiveMemoryWarningNotification, varefter Memory Cache rensas helt. Disk Cache rensas enligt TTL eller vid överskridande av gräns, med sortering av filer efter senaste åtkomstdatum.

För manuell cachehantering finns metoder: clearMemory, clearDisk, calculateSize. Cachning kan inaktiveras för specifika begäranden via alternativet SDWebImageCacheMemoryOnly eller SDWebImageAvoidAutoSetImage.

Exempel på användning av SDWebImage i Swift

SDWebImage tillhandahåller flera gränssnitt för bildladdning: från enkel UIImageView-kategori till avancerad manager med anpassad bearbetning.

Grundläggande laddning i UIImageView

sd_setImage — huvudmetoden för laddning av bild i UIImageView. Tar emot URL, placeholder och valfria parametrar via Options och Context. Alla Completion Handlers körs i huvudtråden.

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)]
)

Metoden returnerar SDWebImageToken (en operation) som kan avbrytas vid behov. Internt anropar sd_setImage SDWebImageManager.load och skickar ImageView som Target för automatisk bildinställning.

Laddning med anpassad transformation

SDWebImage stöder Transformer — ett protokoll med en enda metod transformedImage. Inbyggda transformationer: cirkel, avrundning, applicering av färgfilter, storleksändring. Kombinering av transformationer görs med operatorn &&.

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]
)

Användning med SwiftUI

Biblioteket tillhandahåller WebImage — en View-komponent för SwiftUI med stöd för placeholder, förloppsindikator och felhantering. Komponenten prenumererar automatiskt på Viewns livscykel och avbryter laddning vid försvinnande.

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 i SDWebImage

SDWebImage tillhandahåller ett flexibelt system för bildtransformationer via protokollet SDImageTransformer. Transformationer tillämpas efter avkodning men före cachning — transformeringsresultatet sparas på disken under en ny nyckel, vilket eliminerar upprepad tillämpning vid efterföljande begäranden.

Inbyggda transformationer inkluderar: SDImageResizingTransformer (storleksändring med läge), SDImageRoundCornerTransformer (avrundning av hörn med valfri kant), SDImageFlipTransformer (spegelvändning) och SDImageFilterTransformer (CoreImage-filter). Kombinering görs med operatorn &&, vilket skapar en bearbetningskedja.

För anpassade transformationer räcker det att implementera protokollet SDImageTransformer med metoden transformedImageWithImage:forKey:. Transformeringsnyckeln läggs automatiskt till cache-nyckeln, vilket förhindrar kollisioner mellan olika versioner av samma bild.

Jämförelse av SDWebImage med Kingfisher

På iOS-plattformen är SDWebImages främsta konkurrenter Kingfisher (ren Swift) och Nuke. Valet mellan SDWebImage och Kingfisher beror ofta på projektets språk och önskad funktionalitet.

SDWebImage förblir det föredragna valet för projekt i Objective-C eller hybridprojekt. Kingfisher passar bättre för rena Swift-projekt tack vare typsäkerhet och inbyggd Swift-syntax. Båda biblioteken har liknande cachearkitektur och hastighet.

Konfiguration av SDWebImage i ett iOS-projekt

Anslutning av SDWebImage sker via Swift Package Manager, CocoaPods eller Carthage. Biblioteket är uppdelat i moduler: huvud (SDWebImage), Coder (extra format) och MapKit (för 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'
// Plugin för WebP och SVG:
pod 'SDWebImageWebPCoder'
pod 'SDWebImageSVGCoder'

Efter installation är biblioteket redo att användas utan ytterligare konfiguration. För anpassning av cachen skapas en instans av SDImageCache med unikt namespace, som skickas till SDWebImageManager vid initiering. Global konfiguration görs via SDWebImageManager.shared.

// Anpassning av cache
let config = SDImageCacheConfig()
config.maxDiskAge = 14 * 86400 // 14 dagar istället för 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