見出し画像

SwiftUIでいこう! - Search App! - 3

検索できるようになりました。最後の仕上げです。アートワークを表示させます。今のままだと

画像1

こんな感じで写真は表示されません。これを写真が表示できるようにします。

新しいファイルを作って、class ArtworkLoader{}を作ります。URLSessionでデータを取り出します。

import Foundation
import SwiftUI

class ArtworkLoader{
   private var dataTasks:[URLSessionDataTask] = []
   
   func LoadArtwork(forSong song:Song,completion:@escaping((Image?)->Void)){
       guard let imageURL = URL(string: song.artworkUrl) else {
           completion(nil)
           return
       }
       
       let dataTask = URLSession.shared.dataTask(with:imageURL){data,_ ,_ in
           guard let data = data,let artwork = UIImage(data: data)else{
               completion(nil)
               return
           }
           
           let image = Image(uiImage: artwork)
           completion(image)
       }
       
       dataTasks.append(dataTask)
       dataTask.resume()
   }
   func reset(){
       dataTasks.forEach{$0.cancel()}
   }
   
}
let image = Image(uiImage: artwork)

これでアートワークの画像を変数 imageに取得します。

次にclass SongListViewModel{}を編集します。

まず変数を作ります。

 private let artwarkLoader = ArtworkLoader()

これで変数artwarkLoaderで操作できるようになります。

func loadSongs()に以下追加します。

artwarkLoader.reset()

次に 非同期で画像のデータを取得したものを

songViewModel.artwork 

に代入します。

artwarkLoader.LoadArtwork(forSong: song){ image in
           DispatchQueue.main.async {
               songViewModel.artwork = image
           }
           
 }

これで検索したアーチストのアートワークの画像のデータが読み込まれ表示されるようになります。

この記事が気に入ったらサポートをしてみませんか?