SwiftUIでQRコードを表示してみる

はじめに

QRコードを生成するアプリを作ろうと思い、せっかくなのでSwiftUIで作成しました。

コードの解説

QRコードの生成

こちらは、よく検索すると出てくるコードです。いくつか検索していて気付いたのですが、CIContext().createCGImage()を実行していないコードがあります。
outputImageでciImageが生成されているのでGPUによるレンダリングする必要があるので、長いですが実装が必要なのではないかと思います。

あとハマったのは、謝り訂正レベルを指定するパラメーター"inputCorrectionLevel"には、"L"/"M"/"Q"/"H" いずれかを指定する必要があります。（数字だと思い込んでしまった・・・）

QRCodeMaker.swift

    func make(message:String , level:Int) -> UIImage? {
        guard let data = message.data(using: .utf8) else { return nil }

        guard let qr = CIFilter(name: "CIQRCodeGenerator", parameters: ["inputMessage": data, "inputCorrectionLevel": getCorrectionText(index: level)]) else { return nil }
        
        let sizeTransform = CGAffineTransform(scaleX: 10, y: 10)
        
        guard let ciImage = qr.outputImage?.transformed(by: sizeTransform) else { return nil }
        
        guard let cgImage = CIContext().createCGImage(ciImage, from: ciImage.extent) else { return nil }
        
        let image = UIImage(cgImage: cgImage)
        
        return image
    }

QRコード生成するコードはQRCodeMaker.swiftとして別ファイルに分離しました。

SwiftUI

基本は、VStackを用いて縦にパーツを配置しています。
QRコードの画像は中央、テキスト入力と誤り訂正レベルの選択肢は上部、生成ボタンは下部にしたいので、赤枠の箇所をSpacer()を入れることによって実現しています。
●画面レイアウト（赤枠がSpacer())

Spacer()を用いないと中央によってしまいます。
●Spacer()を用いていない画面

また、起動時はQRコード画像がありません。これはif文でImageを表示非表示を切り替えています。

ContentView.swift

            if qrImage != nil {
                Image(uiImage: qrImage!)
            }

終わりに

サンプルコードは、githubにアップしています。
参考にどうぞ。