[Swift][Xcode]CellにURLのイメージを使う際に使えるサンプル

# ついに完成しました！！

CellにURLのイメージを使う際に使う用に作りました。

Cell を用いる際に、URLから画像を読み込んでということをしたいときに
Image に対して、読み込んだ後で表示するようにしてみたんです。

何度か、トライしてみたんですが、表示がうまくいかない！！って困っていたんです。
しかしながらやっと回答を出せました。




### closeButton
> closeButton には、戻るボタンや画面遷移してしまった時に、loadが終わってないのに移動を防げるように作ってみました

~~~Swift:SampleCell.swift
var tableItem:[SampleCellItem] = []

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    let cell = UITableViewCell()
    let cellItem = tableItem[indexPath.row]

    cell.detailTextLabel = cellItem.imageURL
    cell.imageCellItem(cellItem: cellItem) { imageType in
        self.closeButton.isEnabled = false
    } completion: { image,imageType in
        if tableView.visibleCells.contains(cell) {
            tableView.reloadRows(at: [indexPath], with: .automatic)
        }
        self.closeButton.isEnabled = true
    }

    return cell
}
~~~
### UITableViewCell
> UITableViewCellを拡張しました

~~~Swift:UITableViewCell
extension UITableViewCell {
    enum ImageType {
        case none
        case imageData
        case otherObject
        case imageLoading
        case image
        case imageURLLoading
        case imageURL
    }

    func imageCellItem(cellItem:SampleCellItem,
        loadHandler: ((ImageType) -> Void)? = nil,
        completion: ((UIImage?,ImageType) -> Void)? = nil) {
        self.imageView?.image = nil
        if let image = cellItem.imageData as? UIImage {
            self.imageView?.image = image
            completion?(image,
                        .imageData)
        } else if cellItem.otherObject != nil {
            if let image = cellItem.otherObject as? UIImage {
                self.imageView?.image = image
                completion?(image,
                            .otherObject)
            }
        } else if let imageURL = cellItem.imageURL {
            loadHandler?(.imageURL)
            UIImage.load(urlString: imageURL) { image, finish in
                if finish {
                    cellItem.imageURL = imageURL
                    cellItem.imageData = image

                    completion?(image,
                                .imageURL)

                } else {
                    completion?(image,
                                .imageURLLoading)
                }
            }
        } else if let imageURL = cellItem.image {
            loadHandler?(.image)
            UIImage.load(urlString: imageURL) { image, finish in
                if finish {
                    cellItem.imageURL = imageURL
                    cellItem.imageData = image

                    completion?(image,
                                .image)

                } else {
                    completion?(image,
                                .imageLoading)
                }
            }
        } else {
            completion?(nil,
                        .none)
        }
    }

}

~~~
###UIImage
> UIImage 拡張 URLなどでイメージをロードした後に処理する方法

~~~Swift:UIImage
extension UIImage {
    static func load(urlString : String,completion: ((UIImage?,Bool) -> Void)? = nil) {
        guard let url = URL(string: urlString)else {
            return
        }
        DispatchQueue.global().async { [self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        if self != nil {
                            completion?(image,true)
                        }
                    }
                } else {
                    completion?(nil,false)
                }
            } else {
                completion?(nil,false)
            }
        }
    }
}
~~~

###SampleCellItem
> SampleCellItem は１つのセルにイメージをセットする時の情報を格納

~~~Swift:SampleCellItem.swift
class SampleCellItem {
    var image:String? = nil
    var imageURL:String? = nil
    var imageData:Any? = nil
    var otherObject:Any? = nil
}
~~~

# まとめ
今回は、Cell のイメージをURLからデータを扱う際に、必要な処理を作ってみました。
データを読み込んだり、データなのかイメージなのかロード後なのかを判定する機能を作ってみました。
よかったら使ってみてください


---

【About】(http://qiita.com/sunstripe) - サンストライプ

---

## 制作チーム：サンストライプ

[![sunstripe_logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/322f2d60-f19d-af9e-2b6f-7290ca546848.png)](http://sunstripe.main.jp/)
http://sunstripe.main.jp/

(月１ WEBコンテンツをリリースして便利な世の中を作っていくぞ！！ボランティアプログラマー/デザイナー/イラストレーター/その他クリエイター声優募集中!!)

緩募


### 地域情報 THEメディア
THE メディア 地域活性化をテーマに様々なリリース情報も含め、記事をお届けしてます！！
https://the.themedia.jp/

### ゼロからはじめる演劇ワークショップ
多様化の時代に向けて他者理解を鍛える

https://workshop.themedia.jp/

### プログラミングワークショップ・ウェブ塾の開講！！！
様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら　↓　↓　↓　↓　↓　↓　↓　↓
[プログラミングサロン 月１だけのプログラミング学習塾](https://workshop.themedia.jp/posts/7057553?fbclid=IwAR32CfRQ7RvDOhvuogoSwqxDLMOU7Jvuzljlnx-TMc27qBPX1BnWsfLcBR8
)

### 協力応援 / 支援者の集い
## チーム：サンストライプ
https://twitter.com/sunstripe2011

#### プログラミングラボ
https://twitter.com/PLab2020

一緒にポートフォリオを作りませんか？現場の体験やそれぞれの立場から年齢関係なく作品を作りたい方々と一緒にチームを作って、作品を作っています。現場に行きたい人には、職場紹介や職場の体験や悩み相談なども受けております。
様々な職種からプログラミングの知識を得たい、デザインの知識を得たい、データーベースの知識を得たいという人が集まっております。
週１のミーティングにそれぞれの近況と作業報告して、たまにリモート飲み会などをしております！！

興味がある方は、DMに話しかけてみてください。

#### トラストヒューマン
http://trusthuman.co.jp/
私たちは何よりも信頼､人と考えてます｡

｢コンサルティング｣と｢クリエイティブ｣の両角度から｢人材戦略パートナー｣としてトータル的にサポートします！！

### キャリア教育事業

#### 青空プログラミング
[![青空プログラミング100px.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/603d53ab-828b-645e-a415-1b6f158d7356.png)](https://actcoin.jp/project/detail.php?id=600)

[![ダウンロード (9).jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/9bde9318-28c2-ce74-d4c5-326168061bcc.jpeg)](https://www.youtube.com/hashtag/%E9%9D%92%E7%A9%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

#### 広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/

#スポンサー募集

## ネリム
https://nerim.co.jp/
配信事業などを映像コンテンツなどの制作しております

## ビヨンドXプロジェクト

[ビヨンドXプロジェクト全体会議](https://www.youtube.com/playlist?list=PLaR6-YWiGWkYhEHWnt8f1z-JC0g3nwwC9)