동기 부여

UITableView를 사용하여 뉴스 앱 테이블을 만들고있었습니다. 다음은 뉴스 앱의 Gunosy의 일부이지만 이런 느낌의 사람입니다.



만들어보고 실기로 움직이는 단계에서 기사를 스크롤하면 빙글빙글 움직여 스크롤이 기분 나빠져 버렸습니다.
그래서 그것을 해결하고 싶었습니다.

결론으로서는 라이브러리를 넣어 조금 재작성하면 할 수 있었습니다.

원인

【swift】uitableview가 무거울 때 해결해야 할 두 가지 사항

라는 것을 보면,

셀 높이

셀 이미지

을 캐시해야 한다는 것을 알았습니다.

셀의 높이는 지정하고 있었으므로, 원인이 셀의 화상에 있을 것이라고 추측할 수 있었습니다.

이미지 최적화

이미지의 캐쉬계로 사용할 수 있는 라이브러리는 이하의 어떤 것일까-라는 것이 가볍게 검색한 인상이었습니다.

AlmofireImage

SDWebImage

KingFisher

다음 기사가 도움이되었습니다.
B2B2C 건강 관리 서비스를 만드는 방법

Q. 왜 SDWebImage를 사용하지 않습니까?

A.
Pure Swift로 작성된 라이브러리로 통일하고 싶었기 때문에
이미지 fetch 하는 벤치마크 결과는 거의 변하지 않았다
Kingfisher도 후보였지만 Alamofire를 도입했기 때문에 이쪽으로

클래식한 것은 아무래도 SDWebImage같습니다만 swift에서는 쓰여 있지 않은 것이 넥으로, AlmofireImage라고 swift로 쓰여져 있는 것 같습니다. Alamofire를 이미 사용하고 있었기 때문에 Kingfisher를 사용하는 정도라면 Almofire일까라고 생각해 Kingfisher는 선택사항으로부터 제외했습니다.
그리고 Pure Swift를 고집하지 않았기 때문에 스테디셀러 SDWebImage로 좋을까 생각하고 결국 SDWebImage를 선택했습니다.

구현

pod install

먼저 SDWebImage를 설치합니다.
다음과 같이 코드를 Podfile에 넣고 pod install

pod 'SDWebImage'

브리지 헤더 파일

그리고 SDWebImage 는 Objective-C의 코드이므로 브리지 헤더 파일 (Swift에서 사용할 수 있도록 해주는 사람)에 다음을 삽입합니다.

#import "SDWebImage/UIImageView+WebCache.h"

브리지 헤더 파일이 없는 경우(디폴트는 아니다)는 만들지 않으면 안됩니다.
iOS 초보자가 Swift에서 그노시 같은 탭형 RSS 리더를 만들어 보았다 을 참고로 브리지 헤더 파일을 만들었습니다.

코드

다음과 같이 이미지를 호출하는 부분을 변경하기만 하면 됩니다.

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath as IndexPath) as! CustomTopViewCell
      cell.title.text = self.entries[indexPath.row]["title"].string
      cell.site.text = self.entries[indexPath.row]["supported_site"]["name"].string

      // 以下3行部分
      let url = NSURL(string: self.entries[indexPath.row]["main_image_url"].string!)
      let imageData :Data = try! Data(contentsOf: url! as URL)
      cell.thumbnail.image = UIImage(data:imageData as Data)!

      return cell
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
      let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath as IndexPath) as! CustomTopViewCell
      cell.title.text = self.entries[indexPath.row]["title"].string
      cell.site.text = self.entries[indexPath.row]["supported_site"]["name"].string

      // 以下2行に変更
      let url = NSURL(string: self.entries[indexPath.row]["main_image_url"].string!)
      cell.thumbnail.sd_setImage(with: url as URL?)

      return cell
    }

이상으로, さくさく의 움직임이되었습니다!