[SwiftUI][iOS]UIKitの使い方(1)〜ビューの表示〜

SwiftUI

2021/5/18

「SwiftUIでUIKitを使いたい」

「SwiftUIでUIKitを使う時には、どうしたらいいの?」

と言う人に向けてこの記事は書かれています。

どうも、ちょげ(@chogetarou)です。

基本的には、SwiftUIのみでiOSアプリを作ることが出来ます。

ですが、どうしてもUIKitを使わなきゃいけない場面が出てきます。

そこで、この記事では、SwiftUIでUIKitを使う方法について解説します。

スポンサーリンク

流れ

ビューを表示するまでの大まかな流れは以下のようになっています。

  • SwiftUIとUIkitのインポート
  • UIViewRepresentableプロトコルに準拠したクラスを作成
  • UIKitのビューを作成
  • 更新を受け取るメソッドを定義

SwiftUIとUIKitのインポート

まずは、SwiftUIとUIKitをインポートします。

import SwiftUI
import UIKit

UIViewRepresentableプロトコルに準拠したクラスを作成

次に、UIViewRepresentableプロトコルに準拠したクラスを作成します。

UIViewRepresentableプロトコルは、SwiftUIでUIKitを使用するためのクラスです。

このプロトコルがなければ、UIKitのビューをSwiftUIで表示することが出来ません。

struct kitkat : UIViewRepresentable {

}

UIKitのビューを作成

Ui, Circle, Tv Menu

ここまで出来たら、実際のビューを作っていきます。

UIKitのビューをSwiftUIで作成するには、makeUIViewメソッドを実装しなければいけません。

func makeUIView(context: Context) -> UIView {
    //処理
   
   //表示したいビューをリターンする
   return UIView
}

処理には、ビューの定義や設定などを行います。

そして、作ったビューを戻り値として返すことによって、ビューの完成です。

更新を受け取るメソッドを定義

実は、UIViewRepresentableプロトコルは、2つのメソッドを定義しなければいけません。

1つは、先程のmakeUIViewメソッド。

もう1つは、updateUIViewメソッドです。

このメソッドは、プロパティが更新された時に呼び出されるメソッドです。

    func updateUIView(_ uiView: UIView, context: Context) {

    }

メソッド内は何も記述しなくても大丈夫です。

メソッド内には、プロパティが更新される度に行いたい処理を記述します。

まとめ

ここまでのコードを表示します。

import SwiftUI
import UIKit

struct kitkat : UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
    //処理
   //表示したいビューをリターンする
       return UIView
   }

     func updateUIView(_ uiView: UIView, context: Context) {

    }
}

ポイントをまとめます。

  • UIViewRepresentableプロトコルに準拠させる
  • makeUIViewメソッドで、UIKitのビューを作る
  • updateUIViewで、プロパティを監視する

ここまででUIKitのビューを表示することが出来ます。

次の記事

次は、コーディネータについて解説します。

コメント

タイトルとURLをコピーしました