[ Swift ] 오픈소스 Kingfisher 이미지 라이브러리 사용법

onevcat/Kingfisher

고급 사용법

다음은 다운로드 핸들러를 포함한 이미지 다운로드 예시입니다.

let iv = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        let url = URL(string: "https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/logo.png")
        let processor = DownsamplingImageProcessor(size: iv.bounds.size)
            |> RoundCornerImageProcessor(cornerRadius: 0)
        iv.kf.setImage(
            with: url,
            placeholder: UIImage(named: "placeholderImage"),
            options: [
                .processor(processor),
                .scaleFactor(UIScreen.main.scale),
                .transition(.fade(1)),
                .cacheOriginalImage
            ], completionHandler:
                {
                    result in
                    switch result {
                    case .success(let value):
                        print("Task done for: \(value.source.url?.absoluteString ?? "")")
                    case .failure(let error):
                        print("Job failed: \(error.localizedDescription)")
                    }
                })
        
        self.view.addSubview(iv)

 

▼ 1. 리소스 설정

100, 100 사이즈의 이미지뷰에 테스트 할 URL을 생성합니다.

let iv = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
let url = URL(string: "https://raw.githubusercontent.com/onevcat/Kingfisher/master/images/logo.png")

 

▼ 2. 기본 사용법

이미지 뷰에 setImage 함수를 호출합니다. 파라미터로 위에서 만든 url을 포함합니다.

iv.kf.setImage(with: url)

 

▼ 2. 플레이스 홀더 넣기 (이미지가 없을때 노출하는 이미지)

iv.kf.setImage(with: url, placeholder: image)

 

▼ 2. 인디케이터 표시

iv.kf.indicatorType = .activity
iv.kf.setImage(with: url)

 

▼ 2. 트랜지션 옵션

iv.kf.setImage(with: url, options: [.transition(.fade(0.2))])

 

▼ 2.라운드 옵션

let processor = RoundCornerImageProcessor(cornerRadius: 20)
iv.kf.setImage(with: url, options: [.processor(processor)])

 

▼ 2. 싱글톤 이미지 로드

KingfisherManager.shared.retrieveImage(with: url) { result in 
    // Do something with `result`
}

 

 

▼ 8. 다운로드 함수

싱글톤 객체를 이용해서 다음과 같은 함수를 만들어 재사용할 수 있겠죠? 스위치 문을 이용해서 이미지의 다운로드 여부를 알 수 있어서 편리합니다.

func downloadImage(`with` urlString : String){
    guard let url = URL.init(string: urlString) else {
        return
    }
    let resource = ImageResource(downloadURL: url)

    KingfisherManager.shared.retrieveImage(with: resource, options: nil, progressBlock: nil) { result in
        switch result {
        case .success(let value):
            print("Image: \(value.image). Got from: \(value.cacheType)")
        case .failure(let error):
            print("Error: \(error)")
        }
    }
}

 

▼ 9. 싱글톤 이미지 로드

이미지 다운로드의 실패를 하게 되면 다시 시도하는 함수 입니다. DelayRetryStrategy 객체를 만들어서 재시도의 형태를 만들어주고 이미지 로드시 옵션값으로 추가해줍니다. maxRetryCount는 5회 재시도, retryInterval 값의 경우 3초 딜레이를 말합니다.

let retry = DelayRetryStrategy(maxRetryCount: 5, retryInterval: .seconds(3))
iv.kf.setImage(with: url, options: [.retryStrategy(retry)])

 

▼ 10. 프로그래스

프로그래스 처리를 하게 되면 다운로드 퍼센테이지를 볼 수 있습니다. print를 이용해서 값을 확인합니다.

iv.kf.setImage(with: url, progressBlock: {
    receivedSize, totalSize in
    let percentage = (Float(receivedSize) / Float(totalSize)) * 100.0
    print("downloading progress: \(percentage)%")
})

 

 

캐쉬 처리

이제 이미지 라이브러리에서 중요한 이미지 캐싱 (Cache) 처리에 대해서 알아보겠습니다.

• .none - Just downloaded.
• .memory - Got from memory cache.
• .disk - Got from disk cache.

▼ 1. 캐쉬 무시

이미지 캐싱을 무시합니다. 계속 새로 받아야 할 경우에 선택할 전략입니다.

imageView.kf.setImage(with: url, options: [.forceRefresh])

 

▼ 2. 캐쉬 의존 (오프라인 모드)

오프라인 모드에서 이미지 로드를 할 수 없겠죠. 네트웍이 끊어졌을때 이미 캐싱된 이미지에 대해서만 접근하는 방법입니다.

imageView.kf.setImage(with: url, options: [.onlyFromCache])

 

▼ 3. 캐쉬 처리

다음은 기본적으로 캐쉬처리 하는 방법입니다. retriveImage 함수의 클로저에서 캐쉬 성공시 if let 으로 이미지 가 있으면 캐쉬된 걸로 생각하고 없다면 다운로드합니다.

let cache = ImageCache.default
cache.retrieveImage(forKey: urlString, options: nil) { result in // 캐시에서 키를 통해 이미지를 가져온다.
    switch result {
    case .success(let value):
        if let image = value.image {
						// 캐시 이미지
            self.image = image
        } else {
            guard let url = URL(string: urlString) else { return }
            let resource = ImageResource(downloadURL: url, cacheKey: urlString) // URL로부터 이미지를 다운받고 String 타입의 URL을 캐시키로 지정하고
            self.kf.setImage(with: resource)
        }
    case .failure(let error):
        print(error)
    }
}

 

▼ 3. 익스텐션

위의 기능을 익스텐션으로 사용하면 편리합니다.

extension UIImageView {
    func setImage(with urlString: String) {
        let cache = ImageCache.default
        cache.retrieveImage(forKey: urlString, options: nil) { result in // 캐시에서 키를 통해 이미지를 가져온다.
            switch result {
            case .success(let value):
                if let image = value.image { // 만약 캐시에 이미지가 존재한다면
                    self.image = image // 바로 이미지를 셋한다.
                } else {
                    guard let url = URL(string: urlString) else { return }
                    let resource = ImageResource(downloadURL: url, cacheKey: urlString) // URL로부터 이미지를 다운받고 String 타입의 URL을 캐시키로 지정하고
                    self.kf.setImage(with: resource) // 이미지를 셋한다.
                }
            case .failure(let error):
                print(error)
            }
        }
    }
}

 

▼ 3. 모든 캐시 삭제

캐쉬를 삭제할 수도 있어야 겠죠? 다음은 모든 캐시를 삭제하는 방법입니다.

// Remove all.
cache.clearMemoryCache()
cache.clearDiskCache { print("Done") }

// Remove only expired.
cache.cleanExpiredMemoryCache()
cache.cleanExpiredDiskCache { print("Done") }

 

▼ 5. 캐시 크기 확인

캐쉬 크기를 확인할 수 있습니다.

ImageCache.default.calculateDiskStorageSize { result in
    switch result {
    case .success(let size):
        print("Disk cache size: \(Double(size) / 1024 / 1024) MB")
    case .failure(let error):
        print(error)
    }
}