SDWebImage: ano ito, mga pangunahing konsepto at UIImageView

Ano ang SDWebImage?

SDWebImage — library para sa asynchronous na pag-load ng mga larawan sa mga Apple platform (iOS, macOS, tvOS, watchOS). Nagbibigay ito ng isang kategorya para sa UIImageView na may paraang sd_setImage na sa isang linya ay naglo-load, nag-cache, at nagpapakita ng larawan mula sa anumang pinagmulan.

Sinusuportahan ng library ang progresibong pag-load (ang larawan ay ipinapakita habang dumarating ang mga byte), mga animated na larawan (GIF, APNG), mga pagbabago (pag-ikot, pag-crop, pagdaragdag ng watermark), at mga custom na decoder. Ayon sa GitHub Stats, ang SDWebImage ay may higit sa 25 libong bituin at ginagamit sa malalaking aplikasyon kabilang ang Twitter, Pinterest, at Instagram.

Ang arkitektura ay binuo sa isang chain ng mga component: Coder (pag-decode), Cache (pag-iimbak), Loader (network), at Transformer (pagproseso). Ang bawat component ay mapapalitan, na nagbibigay-daan sa pag-adapt ng library sa mga partikular na pangangailangan ng proyekto.

Paano gumagana ang SDWebImage: manager at cache

SDWebImageManager — sentral na component na nag-coordinate ng proseso ng pag-load. Tumatanggap ito ng URL, sinusuri ang cache, naglo-load ng data, ni-decode ang mga ito sa UIImage, at ipinapadala sa ImageView o Completion Handler. Ang manager ay gumagana sa pamamagitan ng shared singleton, accessible mula sa anumang bahagi ng aplikasyon.

Proseso ng pag-load

Ang manager ay sunud-sunod na sinusuri ang Memory Cache (NSDictionary na may UIImage), pagkatapos ang Disk Cache (file system). Kapag walang data, isinasagawa ang network request sa pamamagitan ng NSURLSession. Pagkatapos ng pag-load, ang data ay dinedecode, dumaraan sa mga pagbabago, at nai-save sa parehong cache. Ang buong proseso ay nagaganap sa background queue, ang resulta ay ihahatid sa main queue.

• Memory Cache — pagsusuri sa O(1), pag-iimbak ng UIImage na may pagsasaalang-alang sa limitasyon ng memorya
• Disk Cache — pagbabasa mula sa file system, pag-iimbak ng naka-compress na data
• NSURLSession — pag-load na may suporta sa HTTP/2 at configurable timeout

Kategorya ng UIImageView

UIImageView+WebCache — Objective-C na kategorya (accessible mula sa Swift) na nagdaragdag ng paraang sd_setImage. Ang paraang ito ay tumatanggap ng URL, placeholder, opsyon (SDWebImageOptions), at completion-block. Awtomatikong kinakansela ng kategorya ang nakaraang request kapag muling ginamit ang cell ng table sa pamamagitan ng mekanismong sd_cancelCurrentImageLoad.

Mga pangunahing klase ng SDWebImage

Ang arkitektura ng SDWebImage ay hinati sa ilang module na may malinaw na mga lugar ng responsibilidad. Bawat klase ay lumulutas ng isang gawain — mula sa pag-load hanggang sa pagpapakita.

SDWebImageManager

SDWebImageManager — facade para sa lahat ng operasyon sa mga larawan. Naglalaman ng mga reference sa ImageCache (SDImageCache) at ImageLoader (SDWebImageDownloader). Sa pamamagitan ng delegate na SDWebImageManagerDelegate, maaaring ma-intercept ang pag-load at baguhin ang URL o behavior.

SDImageCache

SDImageCache — dalawang antas na cache (memory + disk), na-initialize na may natatanging namespace. Ang Memory Cache ay nag-iimbak ng UIImage na may configurable na limitasyon (default — hanggang system memory warning). Ang Disk Cache ay nag-iimbak ng data sa directory na Library/Caches na may configurable na panahon ng pag-iimbak (default 7 araw).

SDWebImageDownloader

SDWebImageDownloader — HTTP client na batay sa NSURLSession na may suporta sa mga header, timeout, at muling pagsubok. Pinagsasama ng downloader ang magkaparehong request sa isang network call (deduplication) at ipinamahagi ang resulta sa lahat ng subscriber.

Arkitektura ng pag-cache ng SDWebImage

Ipinapatupad ng SDWebImage ang dalawang antas na pag-cache na may deterministikong pagkakasunod-sunod ng pagsusuri: una memorya, pagkatapos disk. Ang cache key ay ang absolute URL ng larawan na walang query parameter o ang MD5 hash nito.

Kapag nakatanggap ng memory warning, inaabisuhan ng iOS ang SDImageCache sa pamamagitan ng UIApplicationDidReceiveMemoryWarningNotification, pagkatapos nito ang Memory Cache ay ganap na nililinis. Ang Disk Cache ay nililinis batay sa TTL o kapag lumampas sa limitasyon, na may pag-uuri ng mga file ayon sa petsa ng huling pag-access.

Para sa manu-manong pamamahala ng cache, available ang mga paraan: clearMemory, clearDisk, calculateSize. Ang pag-cache ay maaaring i-disable para sa mga partikular na request sa pamamagitan ng opsyon na SDWebImageCacheMemoryOnly o SDWebImageAvoidAutoSetImage.

Mga halimbawa ng paggamit ng SDWebImage sa Swift

Nagbibigay ang SDWebImage ng ilang interface para sa pag-load ng mga larawan: mula sa simpleng UIImageView na kategorya hanggang sa advanced na manager na may custom na pagproseso.

Pangunahing pag-load sa UIImageView

sd_setImage — pangunahing paraan para sa pag-load ng larawan sa UIImageView. Tumatanggap ng URL, placeholder, at opsyonal na parameter sa pamamagitan ng Options at Context. Lahat ng Completion Handler ay isinasagawa sa pangunahing thread.

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

Ang paraan ay nagbabalik ng SDWebImageToken (isang operasyon) na maaaring kanselahin kung kinakailangan. Sa loob, tinatawag ng sd_setImage ang SDWebImageManager.load, na ipinapasa ang ImageView bilang Target para sa awtomatikong pag-set ng larawan.

Pag-load na may custom na pagbabago

Sinusuportahan ng SDWebImage ang Transformer — isang protocol na may iisang paraan na transformedImage. Mga built-in na pagbabago: bilog, pag-ikot, paglalagay ng color filter, pagbabago ng laki. Ang pagsasama-sama ng mga pagbabago ay ginagawa gamit ang operator &&.

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

Paggamit sa SwiftUI

Nagbibigay ang library ng WebImage — isang View component para sa SwiftUI na may suporta sa placeholder, indicator ng progreso, at paghawak ng error. Awtomatikong nag-subscribe ang component sa lifecycle ng View at kinakansela ang pag-load kapag nawala ito.

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

Nagbibigay ang SDWebImage ng flexible na sistema ng pagbabago ng larawan sa pamamagitan ng protocol na SDImageTransformer. Ang mga pagbabago ay inilalapat pagkatapos ng pag-decode ngunit bago ang pag-cache — ang resulta ng pagbabago ay nai-save sa disk sa ilalim ng bagong key, na pumipigil sa muling paglalapat sa mga susunod na request.

Kasama sa mga built-in na pagbabago ang: SDImageResizingTransformer (pagbabago ng laki na may mode), SDImageRoundCornerTransformer (pag-ikot ng sulok na may opsyonal na border), SDImageFlipTransformer (pagmirror), at SDImageFilterTransformer (CoreImage filter). Ang pagsasama-sama ay ginagawa gamit ang operator &&, na lumilikha ng processing chain.

Para sa custom na pagbabago, sapat na ang pag-implement ng protocol na SDImageTransformer na may paraang transformedImageWithImage:forKey:. Ang transformation key ay awtomatikong idinaragdag sa cache key, na pumipigil sa collision sa pagitan ng iba’t ibang bersyon ng parehong larawan.

Paghahambing ng SDWebImage sa Kingfisher

Sa iOS platform, ang mga pangunahing kakumpitensya ng SDWebImage ay Kingfisher (purong Swift) at Nuke. Ang pagpili sa pagitan ng SDWebImage at Kingfisher ay madalas nakadepende sa wika ng proyekto at kinakailangang functionality.

Ang SDWebImage ay nananatiling gustong pagpilian para sa mga proyekto sa Objective-C o hybrid na proyekto. Ang Kingfisher ay mas angkop para sa purong Swift na proyekto dahil sa kaligtasan ng uri at native na Swift syntax. Ang parehong library ay may magkatulad na arkitektura ng cache at bilis.

Pag-set up ng SDWebImage sa isang iOS project

Ang pagkonekta ng SDWebImage ay ginagawa sa pamamagitan ng Swift Package Manager, CocoaPods, o Carthage. Ang library ay hinati sa mga module: pangunahing (SDWebImage), Coder (karagdagang format), at MapKit (para sa 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'
// Mga plugin para sa WebP at SVG:
pod 'SDWebImageWebPCoder'
pod 'SDWebImageSVGCoder'

Pagkatapos ng installation, ang library ay handa nang gamitin nang walang karagdagang configuration. Para sa pag-customize ng cache, gumawa ng instance ng SDImageCache na may natatanging namespace, na ipinapasa sa SDWebImageManager sa initialization. Ang global configuration ay ginagawa sa pamamagitan ng SDWebImageManager.shared.

// Pag-customize ng cache
let config = SDImageCacheConfig()
config.maxDiskAge = 14 * 86400 // 14 na araw sa halip na 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