SwiftUIからUIKitへ値を渡す。

6962 ワード
UIKit SwiftUI Swift UIKit テキストリンク

はじめに

SwiftUIからUIKitの利用を理解する為の二歩目として
・値を渡す。
・値が変わったら、表示を変更する。
最低限の実装方法を記載したものです。
最初の一歩は下記参照
https://qiita.com/ikaasamay/items/108ac5c211b75a9739d4

環境

macOS Big Sur 11.1
XCode 12.4
Swift 5

実装

加算ボタンを押したら、値が＋１されます。

SwiftUI側でボタン押下時に
countを＋１して、
UIKit側では+1された値を追従して表示しています。

ContentView.swift
import SwiftUI

struct ContentView: View {
    @State var count = 0

    var body: some View {
        ZStack (alignment: .center) {
            // SwiftUI -------------
            VStack {
                HStack {
                    Text("SwiftUI")
                    Spacer()
                }

                // 加算ボタン
                Button(action: {
                    // 加算処理
                    count += 1
                }){
                    // 加算ボタンのレイアウト
                    Text("加算ボタン")
                        .font(.largeTitle)
                        // ボタンらしくレイアウトを調整
                        .frame(width: 250, height: 40, alignment: .center)
                        .overlay(
                            RoundedRectangle(cornerRadius: 10)
                                .stroke(Color.blue, lineWidth: 2)
                    )
                }
                Spacer()
            }

            // UIKitへcountを引数で渡す。
            CountUIKitLabel(count: $count)
                .frame(height: 100)
        }
    }
}

struct CountUIKitLabel:UIViewRepresentable {
    // 表示する値を保持するプロパティ
    @Binding var count:Int

    // SwiftUI側に返却するUILabelのインスタンスを返却する。
    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.backgroundColor = UIColor.red
        label.textAlignment = NSTextAlignment.center

        return label
    }

     // プロパティ（count）が変更されると、その都度実行する。
    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.text = "UIKit  " + count.description
    }
}

次回はコーディネーターを記事にする予定