KingFisher에서 다운로드한 이미지에 흐림(Blur) 추가

개시하다

KingFisher는 인터넷에서 이미지를 다운로드하고 캐시할 수 있는 가벼운 순수 Swift 프로그램 라이브러리입니다.
소스 여기 있다https://github.com/onevcat/Kingfisher
가장 간단한 사용 방법은 UIImageView를 사용하여 확장하는 방법입니다.

let url = URL(string: "https://autolap.jp/img/Top1.jpg")
imageView.kf.setImage(with: url)

이렇게 하면 네트워크를 통해 이미지를 다운로드하여 UIImageView에 캐시합니다.캐시가 있으면 더 이상 얻지 않고 그것을 사용합니다.

Xcode 프로젝트에 라이브러리 설치

그럼 바로 프로젝트에 프로그램 라이브러리를 추가합니다.
이번엔 캐럿 허그를 이용해서
사용할 Xcode 항목 디렉토리를 이동합니다.

Cartifile 제작

다음 내용으로 Cartfile의 이름으로 파일을 만듭니다.

github "onevcat/Kingfisher" ~> 4.8

집필할 때의 최신 버전을 지정합니다. (지정하지 않으면 그때의 최신 버전입니다.)

라이브러리 다운로드 및 구축

이번에는 iOS 이외에는 사용하지 않기 때문에

$ carthage update --platform ios

빌드 버전은 Cartifile입니다.resolved에 기술합니다.

github "onevcat/Kingfisher" "4.8.0"

Xcode 프로젝트에서 작성된 라이브러리 가져오기

대상 항목General Linked Frameworks 및 Libraries의 + 버튼에 추가합니다.

프레임 선택 대화 상자가 표시되면 Add Other...를 클릭하고 를 클릭합니다.

구문된 프레임을 선택합니다.
프로젝트 폴더 > Carthage > Build > iOS > Kingfisher.framework
를 클릭하고 Open을 클릭합니다.

Linked Frameworks 및 Libraries의 Kingfihser프레임워크 추가.

Run 스크립트 구성

프로젝트의 Build Phases > + 버튼 > New Run Script Phase 를 클릭합니다.

셸에 /usr/local/bin/carthage copy-frameworks라고 기술했다.
카드가 설치된 경로가 다르면 적당히 변경하십시오.
Input Files에 $(SRCROOT)/Carthage/Build/iOS/Kingfisher.framework라고 기술합니다.

KingFisher의 라이브러리 가져오기가 완료되었습니다.

시용하다

Kingfisher는 여러 가지 처리 옵션이 있는데 이번에는 다음과 같은 4가지 상황을 사용해 설명한다.

1. Place holder 이미지 설정

Plaaceholder 이미지는 다운로드하기 전에 표시된 이미지를 대체하려는 것입니다.placeholder에 이미지를 표시하기 전에 표시할 UIImage를 설정합니다.

2. 이미지 표시 시 Transition 설정

options에서 지정.transition(ImageTransition)이번에는 5초로 Fade의 효과를 설정합니다..transition(.fade(5.0))

3. 이미지 흐림 효과

options에서 지정.processor(ImageProcessor）이번BlurImageProcessor에서 blurRadius를 10으로 설정

4. 오류 시 이미지 표시

오류가 발생한 경우 ImageView에서 오류가 설정된 이미지

전체 코드

ImageView의 전체 프로세스

let blurRadius = CGFloat(10.0)
let url = URL(string: "https://autolap.jp/img/Top1.jpg")
let processor = BlurImageProcessor(blurRadius: blurRadius) // Blur with a radius
cell.imageView.kf.setImage(with: url, placeholder: placeholderImage, options: [.transition(.fade(5.0)), .processor(processor)], progressBlock: nil, completionHandler: { (image, error, cachType, url) in
    cell.setErrorImageIfNeeded(error: error)
})

오류 처리는 다음과 같은 Cell에서 수행됩니다.

class CollectionViewCell: UICollectionViewCell {
    - 省略 -
    private let noImage = UIImage(named: "NoImage")
    func setErrorImageIfNeeded(error: NSError?) {
        if error != nil { imageView.image = noImage }
    }
}

실제 프로젝트에서 가져올 때 이미지의 취득은 인증이 필요하고 고속 캐시의 생명주기 등을 관리해야 하는 경우도 있다.
요청 처리, 캐시 처리, 이미지 처리 등을 독립적으로 실시할 수 있으니 반드시 다양한 도전을 시도해 보십시오.
모든 코드가 아래에 있으니 자유롭게 시도해 보세요.
https://github.com/alyousecond/KingfisherExample
동작은 이런 느낌.


왼쪽 아래 모서리의 NoImage에는 오류 처리에 설정된 이미지가 표시됩니다.
오른쪽 아래 "Now loading..."오류가 발생하지 않았을 때 Plaaceholder 이미지가 계속 표시됩니다.