SDWebImage: mi ez, kulcsfogalmak és UIImageView

Mi az SDWebImage?

SDWebImage — könyvtár képek aszinkron betöltéséhez Apple platformokon (iOS, macOS, tvOS, watchOS). Kategóriát biztosít az UIImageView számára az sd_setImage metódussal, amely egy sorban betölti, gyorsítótárazza és megjeleníti a képet bármilyen forrásból.

A könyvtár támogatja a progresszív betöltést (a kép a bájtok érkezésével jelenik meg), animált képeket (GIF, APNG), transzformációkat (lekerekítés, vágás, vízjel hozzáadása) és egyedi dekódereket. A GitHub Stats szerint az SDWebImage több mint 25 ezer csillaggal rendelkezik, és nagy alkalmazásokban használják, beleértve a Twittert, Pinterestet és Instagramot.

Az architektúra komponensek láncára épül: Coder (dekódolás), Cache (tárolás), Loader (hálózat) és Transformer (feldolgozás). Minden komponens cserélhető, ami lehetővé teszi a könyvtár testreszabását a projekt speciális követelményeihez.

Hogyan működik az SDWebImage: menedzser és gyorsítótár

SDWebImageManager — központi komponens, amely összehangolja a betöltési folyamatot. Fogadja az URL-t, ellenőrzi a gyorsítótárat, betölti az adatokat, dekódolja azokat UIImage-be és továbbítja az ImageView-ba vagy a Completion Handler-be. A menedzser a shared singleton-on keresztül működik, elérhető az alkalmazás bármely részéből.

Betöltési folyamat

A menedzser egymás után ellenőrzi a Memory Cache-t (NSDictionary UIImage-ekkel), majd a Disk Cache-t (fájlrendszer). Adatok hiányában hálózati kérés történik NSURLSession-en keresztül. Betöltés után az adatok dekódolásra kerülnek, átmennek a transzformációkon és mindkét gyorsítótárban elmentődnek. Az egész folyamat a háttérsoron zajlik, az eredmény a fő sorban kerül kézbesítésre.

• Memory Cache — ellenőrzés O(1)-ben, UIImage tárolása a memóriahatár figyelembevételével
• Disk Cache — olvasás a fájlrendszerből, tömörített adatok tárolása
• NSURLSession — betöltés HTTP/2 támogatással és konfigurálható időkorláttal

UIImageView kategória

UIImageView+WebCache — Objective-C kategória (Swift-ből elérhető), amely hozzáadja az sd_setImage metódust. Ez a metódus fogadja az URL-t, placeholdert, opciókat (SDWebImageOptions) és a completion-blokkot. A kategória automatikusan megszakítja az előző kérést a táblázati cella újrafelhasználásakor az sd_cancelCurrentImageLoad mechanizmuson keresztül.

Az SDWebImage fő osztályai

Az SDWebImage architektúrája több modulra van osztva, világos felelősségi körökkel. Minden osztály egy feladatot old meg — a betöltéstől a megjelenítésig.

SDWebImageManager

SDWebImageManager — homlokzat az összes képművelethez. Referenciákat tartalmaz az ImageCache-hez (SDImageCache) és az ImageLoader-hez (SDWebImageDownloader). Az SDWebImageManagerDelegate delegálton keresztül elfogható a betöltés és módosítható az URL vagy a viselkedés.

SDImageCache

SDImageCache — kétszintű gyorsítótár (memory + disk), egyedi névtérrel inicializálva. A Memory Cache UIImage-t tárol konfigurálható korláttal (alapértelmezettén — a system memory warning-ig). A Disk Cache adatokat tárol a Library/Caches könyvtárban konfigurálható tárolási időtartammal (alapértelmezettén 7 nap).

SDWebImageDownloader

SDWebImageDownloader — NSURLSession-alapú HTTP kliens fejlécek, időtúllépés és újrapróbálkozások támogatásával. A letöltő azonos kéréseket egyetlen hálózati hívásba egyesíti (deduplikáció), és elosztja az eredményt az összes előfizető között.

Az SDWebImage gyorsítótár architektúrája

Az SDWebImage kétszintű gyorsítótárazást valósít meg determinisztikus ellenőrzési sorrenddel: először memória, aztán lemez. A gyorsítótár kulcsa a kép abszolút URL-je lekérdezési paraméterek nélkül vagy annak MD5 hash-e.

Memory warning érkezésekor az iOS értesíti az SDImageCache-t a UIApplicationDidReceiveMemoryWarningNotification segítségével, ami után a Memory Cache teljesen törlődik. A Disk Cache a TTL vagy a limit túllépése esetén törlődik, a fájlok utolsó hozzáférés dátuma szerint rendezve.

A gyorsítótár kézi kezeléséhez elérhető metódusok: clearMemory, clearDisk, calculateSize. A gyorsítótárazás letiltható bizonyos kérésekhez az SDWebImageCacheMemoryOnly vagy SDWebImageAvoidAutoSetImage opción keresztül.

Példák az SDWebImage használatára Swift-ben

Az SDWebImage több interfészt biztosít a képek betöltéséhez: az egyszerű UIImageView kategóriától a speciális feldolgozással rendelkező fejlett menedzserig.

Alap betöltés UIImageView-ban

sd_setImage — a fő metódus kép betöltéséhez UIImageView-ban. Fogadja az URL-t, placeholdert és opcionális paramétereket az Options és Context segítségével. Az összes Completion Handler a fő szálban hajtódik végre.

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

A metódus SDWebImageToken-t (egy műveletet) ad vissza, amely szükség esetén megszakítható. Belsőleg az sd_setImage meghívja az SDWebImageManager.load-ot, átadva az ImageView-t Target-ként a kép automatikus beállításához.

Betöltés egyedi transzformációval

Az SDWebImage támogatja a Transformer-t — egy protokollt egyetlen transformedImage metódussal. Beépített transzformációk: kör, lekerekítés, színszűrő alkalmazása, méretváltoztatás. A transzformációk kombinálása a && operátorral történik.

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

Használat SwiftUI-val

A könyvtár WebImage-t biztosít — egy View komponenst SwiftUI-hoz placeholder, előrehaladás jelző és hibakezelés támogatásával. A komponens automatikusan feliratkozik a View életciklusára és megszakítja a betöltést eltűnéskor.

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 az SDWebImage-ben

Az SDWebImage rugalmas képtranszformációs rendszert biztosít az SDImageTransformer protokollon keresztül. A transzformációk a dekódolás után, de a gyorsítótárazás előtt kerülnek alkalmazásra — a transzformáció eredménya ajlra kerül új kulcs alatt, kiküszöbölve az újraalkalmazást a későbbi kérésekben.

A beépített transzformációk közé tartozik: SDImageResizingTransformer (méretváltoztatás móddal), SDImageRoundCornerTransformer (sarkok lekerekítése opcionális szegéllyel), SDImageFlipTransformer (tükrözés) és SDImageFilterTransformer (CoreImage szűrők). A && operátorral történő kombinálás feldolgozási láncot hoz létre.

Egyedi transzformációkhoz elegendő az SDImageTransformer protokoll implementálása a transformedImageWithImage:forKey: metódussal. A transzformációs kulcs automatikusan hozzáadódik a gyorsítótár kulcsához, megakadályozva az ütközéseket ugyanazon kép különböző változatai között.

SDWebImage összehasonlítása a Kingfisher-rel

Az iOS platformon az SDWebImage fő versenytársai a Kingfisher (tiszta Swift) és a Nuke. A SDWebImage és Kingfisher közötti választás gyakran a projekt nyelvétől és a szükséges funkcióktól függ.

Az SDWebImage továbbra is az előnyben részesített választás Objective-C projektekhez vagy hibrid projektekhez. A Kingfisher jobban megfelel tiszta Swift projektekhez a típusbiztonság és a natív Swift szintaxis miatt. Mindkét könyvtár hasonló gyorsítótár architektúrával és sebességgel rendelkezik.

SDWebImage beállítása iOS projektben

Az SDWebImage csatlakoztatása Swift Package Manager, CocoaPods vagy Carthage segítségével történik. A könyvtár modulokra van osztva: fő (SDWebImage), Coder (további formátumok) és MapKit (MKAnnotationView számára).

// 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'
// Bővítmények WebP és SVG számára:
pod 'SDWebImageWebPCoder'
pod 'SDWebImageSVGCoder'

A telepítés után a könyvtár használatra kész további konfiguráció nélkül. A gyorsítótár testreszabásához egy SDImageCache példány jön létre egyedi névtérrel, amely átadásra kerül az SDWebImageManager-nek inicializáláskor. A globális konfiguráció az SDWebImageManager.shared-en keresztül történik.

// Gyorsítótár testreszabása
let config = SDImageCacheConfig()
config.maxDiskAge = 14 * 86400 // 14 nap 7 helyett
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