<Swift> Kingfisher 사용하기

Kingfisher란?

 

Kingfisher is a powerful, pure-Swift library for downloading and caching images from the web.

 - 웹에서 이미지를 다운로드 하고 캐싱하기 위한 강력하고 순수한 라이브러리 입니다.

특징으로는

•  Asynchronous image downloading and caching.
•  Loading image from either URLSession-based networking or local provided data.
•  Useful image processors and filters provided.
•  Multiple-layer hybrid cache for both memory and disk.
•  Fine control on cache behavior. Customizable expiration date and size limit.
•  Cancelable downloading and auto-reusing previous downloaded content to improve performance.
•  Independent components. Use the downloader, caching system, and image processors separately as you need.
•  Prefetching images and showing them from the cache to boost your app.
•  Extensions for UIImageView, NSImageView, NSButton, UIButton, NSTextAttachment, WKInterfaceImage, TVMonogramView and CPListItem to directly set an image from a URL.
•  Built-in transition animation when setting images.
•  Customizable placeholder and indicator while loading images.
•  Extensible image processing and image format easily.
•  Low Data Mode support.
•  SwiftUI support.

번역 해보면 

• 비동기식 이미지 다운로드 및 캐싱.
• URLSession기반 네트워킹 또는 로컬 제공 데이터 에서 이미지를 로드 합니다.
• 유용한 이미지 프로세서 및 필터가 제공됩니다.
• 메모리와 디스크 모두를 위한 다중 계층 하이브리드 캐시.
• 캐시 동작에 대한 미세 제어. 사용자 정의 만료 날짜 및 크기 제한.
• 성능 향상을 위해 다운로드를 취소하고 이전에 다운로드한 콘텐츠를 자동으로 재사용합니다.
• 독립 구성 요소. 필요에 따라 다운로더, 캐싱 시스템 및 이미지 프로세서를 별도로 사용합니다.
• 이미지를 미리 가져오고 캐시에서 표시하여 앱을 향상시킵니다.
• UIImageView, NSImageView, NSButton, UIButton, NSTextAttachment, WKInterfaceImage및 URL에서 이미지 TVMonogramView를 CPListItem직접 설정하기 위한 확장자 .
• 이미지를 설정할 때 내장된 전환 애니메이션.
• 이미지를 로드하는 동안 사용자 정의 가능한 자리 표시자 및 표시기.
• 확장 가능한 이미지 처리 및 이미지 형식을 쉽게.
• 낮은 데이터 모드 지원.
• SwiftUI 지원.

이제 간단한 예제를 통해서 Kingfisher를 적용 해보면

 

우선 설치 부터 Xcode 예제로 새로운 프로젝트 생성 후 

터미널로 이동하여 새로운 프로젝트 경로로 이동후
pod init 으로 Podfile을 생성

그 후에 Podfile에

Podfile

pod 'Kingfisher', '~> 7.0'

다음과 같이 작성하여 pod install 명령어로 설치해 줍니다. 참고로 저는 프로젝트 이름을 kingfisher로 했습니다.

메인 스토리 보드에 imageView를 하나 넣어 줍니다. 해당 이미지는 상위뷰 가운데에 constraints를 주었고 가로 300 세로 150 사이즈를 주었습니다. 그 후에 imageView를 viewController에 outlet을 잡아줍니다.

outlet과 import

kingfisher를 사용할 viewcontroller 상단에 'import kingfisher'를 해주고 위처럼 outlet을 잡아줍니다!

이제 어디선가 불러올 이미지가 필요 합니다.

저는 Lorem Picsum라는 웹 서비스를 사용 해서 이미지를 불러올 생각 입니다. 

이미지 뷰에 적용

다음과 같이 kf를 사용해서 이미지를 적용 할 수 있습니다. 

이렇게 하면 UIImageView를 사용하는것과는 다르지 않죠. Kingfisher에 기능을 소개해드리겠습니다.

indicator 추가

kf.indicatorType을 추가하면 url을 통해 이미지가 로드될떄 indicator를 추가할 수 있습니다.

로드가 너무 빨리되서 이미지 사이즈를 크게 주고 option의 transition을 통해 이미지가 0.7초에 거쳐서 천천히 등장하게 설정했습니다.

완료 모습

아래 url 을 보면 좀 더 많은 정보를 확인 할 수 있습니다.

 

https://github.com/onevcat/Kingfisher

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