【Swift】EurekaのImageRowにURLから画像を表示させる

EurekaのImageRowにURLから画像を表示させる方法。

Eurekaの入力フォームを用いて既存のデータを編集したりする際に、ImageRowにURLから画像を表示させたい。

使用ライブラリ

Eureka
入力フォーム用のライブラリ
https://github.com/xmartlabs/Eureka

ImageRow
Eurekaに画像用のフォームを追加したい時に使用するライブラリ
https://github.com/EurekaCommunity/ImageRow

SDWebImage
URLから画像を取得できるライブラリ
https://github.com/SDWebImage/SDWebImage

ライブラリのインストールについては以下の記事を参考にしてください。

実装コード

まずEurekaとImageRowで画像用の入力フォームを作る。

import Eureka
import ImageRow

class InputForm: FormViewController {
    
    //ImageRowの画像を入れるための変数
    var selectedImage : UIImage? = UIImage(named: "dummy")

    override func viewDidLoad() {
        super.viewDidLoad()
        
        form
        +++ Section("画像を選択")
        <<< ImageRow() {
            //セルのタイトル
            $0.title = "画像"
            //セルに付与するタグ(後で使う)
            $0.tag = "image"
            //どこから画像を取得するか
            $0.sourceTypes = [.PhotoLibrary, .SavedPhotosAlbum, .Camera]
            //セル内の画像の削除を認めるか認めないか
            $0.clearAction = .yes(style: .destructive)
            //最初に表示されている画像
            $0.placeholderImage = UIImage(named: "dummy")
            $0.onChange { [unowned self] row in
                //フォームに変化があった時の処理
                print("changed!")
                // ?? を使ってrow.valueが削除されてnilになった時にダミー画像を入れるようにしないとクラッシュします
                self.selectedImage = row.value ?? UIImage(named: "dummy")
            }
        }
    }
}

次にSDWebImageを用いて、画像URLからImageRowの中身の画像を設定します。

import SDWebImage

if let imageRow = self.form.rowBy(tag: "image") as? ImageRow {
    if  let imageUrl = "画像URLをここに書く",
        let url = URL(string:imageUrl) {
        
        imageRow.placeholderImage = UIImage(named: "dummy")
        
        SDWebImageDownloader.shared.downloadImage(with: url, completed: { image, _, _, _ in

            //セル内のvalueにSDWebImageで取得した画像を設定
            imageRow.value = image
            //imageRowをリロードして新しい画像を表示させる
            imageRow.reload()
            
        })
    }
}

rowBy(tag: "image")で、最初のフォーム実装コードで設定したタグを呼び出すことで、操作するセルを指定します。

SDWebImageで画像を設定するコードは、入力フォームが表示され終わってから実行しないとタイミングがずれることがあります。

自分はviewDidAppear内に書いています。

Swiftのお役立ち情報