TableViewCellにImageを追加。非同期で画像取得
2020/09/26確認
command + 1 して、Main.storyboardを選択して画面を選択して、右上の＋をクリックして、Image Viewを追加します。
Editor - Document Outlineで表示して、Image ViewをTable/cell/Content Viewの下にドラッグで移動します。
Image ViewのTagを1に変更します。重複しない任意の数字。
非同期にしないと、スクロールした時に引っかかります。
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell: UITableViewCell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel!.text = articles[indexPath.row]["title"]! as? String
cell.detailTextLabel!.text = articles[indexPath.row]["created_at"]! as? String
// セルに表示する画像を設定する
let articleUser = articles[indexPath.row]["user"] as AnyObject?
let profileImageUrl = articleUser?["profile_image_url"]
let profileImage = cell.viewWithTag(1) as! UIImageView
let url: URL? = URL(string: profileImageUrl as! String)
profileImage.loadImageAsynchronously(url: url, defaultUIImage: nil)
return cell
}
[Swift4] URL指定した画像を非同期でUIImageViewにセットする、便利なExtension - Qiita
// 指定URLから画像を読み込み、セットする
// defaultUIImageには、URLからの読込に失敗した時の画像を指定する
extension UIImageView {
func loadImageAsynchronously(url: URL?, defaultUIImage: UIImage? = nil) -> Void {
if url == nil {
self.image = defaultUIImage
return
}
DispatchQueue.global().async {
do {
let imageData: Data? = try Data(contentsOf: url!)
DispatchQueue.main.async {
if let data = imageData {
self.image = UIImage(data: data)
} else {
self.image = defaultUIImage
}
}
}
catch {
DispatchQueue.main.async {
self.image = defaultUIImage
}
}
}
}
}
Type 'Any' has no subscript で悩まされる - Swiftサラリーマン
Swift UITableView UITableViewCell にUIImageViewとUITextViewを入れて 写真付き記事一覧の実装手順 - Qiita
How To Display Or Hide View Controller Scene ( Document Outline ) Panel In Xcode Project
【Swift4】UIImageでURLで画像を指定する - ハイパーマッスルエンジニアになりたい
