[킹피셔] Kingfisher (Swift)

어플 '어때이' 출시 이후 여러개의 피드백을 받았다.

선물 결과창에서 CollectionView에 각각의 cell 마다 이미지들이 보여질때 원격저장소에서 가져온다.

콜렉션뷰를 스크롤하면 셀을 다시 그리고, 재사용하며, cell마다 이미지를 비동기식으로 처리하기에 이미지가 뒤죽박죽이 될 수도 있다.

때문에 Kinfgfisher를 사용해 볼 것이다. 

 

Kingfisher는 Url을 가지고 있는 이미지를 앱내에서 보여주게 하는 라이브러리이다.

이미지를  다운로드하여 캐시하기 때문에 이미지 비동기호출식을 해결해 줄 수 있다.

캐시가 된  이미지는 더 빠르게 호출 해 줄 수 있다.

 

 

 

1.킹피셔 설치

SPM, CocoaPods,  Carthage 모두 사용가능

https://github.com/onevcat/Kingfisher

GitHub - onevcat/Kingfisher: A lightweight, pure-Swift library for downloading and caching images from the web.

SPM을 지원하기 때문에 손쉽게 사용해 보겠다.

추가된 모습

2. Kingfisher를 사용할 ViewController에서 먼저 import를 해준다.

import Kingfisher

 

3. 변경 전에는 cellForItemAt함수에 받은 데이터를 보여주기 위해 string형식의 imageUrl을 URL형식으로 변환해주고 URL을 NSData로 객체로 변환하였음 

변경 후에는 URL형식으로 변환해주면 가능

변경전 코드)

  func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        if let url = URL(string: onboardingDataArray[indexPath.row].imageUrl){
        if let imagedata = try? Data(contentsOf: url){
            top5Cell.top5ImageView.image = UIImage(data: imagedata)
        }
    }
}

 

변경 후 코드)

킹피셔 라이브러리에서 제공하는 것을 바탕으로 변경 

import Kingfisher

let url = URL(string: "https://example.com/image.png")
imageView.kf.setImage(with: url)

 

       if let kingurl = URL(string: onboardingDataArray[indexPath.row].imageUrl){
            top5Cell.top5ImageView.kf.setImage(with: kingurl)
        }

 

변경전

 

변경후

 

느낀점 

- Kingfisher 라이브러리 사용했을 때가 훨씬 빠르게 이미지를 보여주었다.

- 콜렉션뷰를 좌우 스크롤할때 화면에 노출될때마다 새로 다운로드해서 버벅이는 경우가 많았는데

  한번 다운받은 사진을 캐싱해 놓고 있다가 그 url을 요청하면 임시저장한 사진을 바로 보여줄 수있어서 성능이 올라간 것 같다.