「SwiftUI」 @Appstorageを使って画像(UIImage)を保存する方法

データベースを使うほどではないが、画像を保存したいケースがあり、@Appstorageを使ってUserDefaultsに保存したので備忘録として残しておきます。

コード全文

ContentView.swift

import SwiftUI

struct ContentView: View {
    @AppStorage("testImage") var testImage: Data?
    let image: UIImage? = UIImage(named: "sample")
    var body: some View {
        Button(action: {
            if let saveImage = image {
                // pngData()はData型を返す
                testImage = saveImage.pngData()
            }
        }) {
            Text("画像を保存します")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SecondView.swift

import SwiftUI

struct SecondView: View {
    var body: some View {
        VStack {
            if let uiimage = UIImage(data: UserDefaults.standard.data(forKey: "testImage")!) {
                Image(uiImage: uiimage)
            }
        }
    }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        SecondView()
    }
}

はじめに

現在@Appstorageを使って保存できるデータ型は

・String ・Int ・Bool ・Double ・Data

になっています。

なので、画像はそのままだと保存できないためData型に変更して保存します。 UIImage ↔︎ Data

コード解説

@AppStorage("testImage") var testImage: Data?
    let image: UIImage? = UIImage(named: "mac")

まずはテスト用の画像を用意してAssets.xcassetsに保存してください。 その後、UIImage(named: "ここに画像の名前")の箇所に保存した名前を入れてください

@AppstorageにはData型で保存するのでData?です。

var body: some View {
        Button(action: {
            if let saveImage = image {
                // pngData()はData型を返す
                testImage = saveImage.pngData()
            }
        }) {
            Text("画像を保存します")
        }
    }

ボタンを押したら画像がUserDefaultsに保存されるようになってます。 pngData()はimageをData?型に変換して値を返します。 これでUserDefaultsに保存されたので他のファイルからも使用することができます。

SecondView.swift

if let uiimage = UIImage(data: UserDefaults.standard.data(forKey: "testImage")!) {
                Image(uiImage: uiimage)
            }

UserDefaultsにはData型で保存されているのでそのままでは使えません。 なのでUIImage()で型を変換しています。

これで画像が表示されているはず。

以上です。