0Pricing
Swift Academy · レッスン

UIViewRepresentable：UIKit Viewのラップ

SwiftUIでUIKit ViewのmakeUIView、updateUIView、解体処理を実装します。

「UIViewRepresentable：UIKit Viewのラップ」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。

UIViewRepresentableを使う理由

多くのUIKitビューには、まだSwiftUIに相当するものがありません。UIViewRepresentableはUIKitビューをSwiftUIに橋渡しします。

import SwiftUI
import UIKit

struct WebView: UIViewRepresentable {
  let url: URL
  // ...
}

必須メソッド

makeUIViewでビューを作成し、updateUIViewでSwiftUIの状態の変更を同期する処理を実装します。

func makeUIView(context: Context) -> WKWebView {
  WKWebView()
}
func updateUIView(_ uiView: WKWebView, context: Context) {
  uiView.load(URLRequest(url: url))
}

完全なWebViewの例

SwiftUIでWebコンテンツを表示するためにWKWebViewをラップした、完全なUIViewRepresentableの例です。

struct WebView: UIViewRepresentable {
  let url: URL
  func makeUIView(context: Context) -> WKWebView { WKWebView() }
  func updateUIView(_ uiView: WKWebView, context: Context) {
    uiView.load(URLRequest(url: url))
  }
}

SwiftUIでの使用

ラップしたビューは通常のSwiftUIビューと同じように使用し、モディファイアも通常どおり適用できます。

WebView(url: URL(string: "https://apple.com")!)
  .frame(height: 400)
  .cornerRadius(12)

データの受け渡し

representableの保存プロパティを介してSwiftUIからUIKitへデータを渡し、updateUIViewで更新します。

struct MapView: UIViewRepresentable {
  var region: MKCoordinateRegion
  func makeUIView(context: Context) -> MKMapView { MKMapView() }
  func updateUIView(_ uiView: MKMapView, context: Context) {
    uiView.setRegion(region, animated: true)
  }
}

UIKitビューの破棄

ビューが削除されたときにオブザーバーなどのリソースを解放するには、オプションのdismantleUIViewを実装します。

static func dismantleUIView(_ uiView: WKWebView, coordinator: Coordinator) {
  uiView.stopLoading()
}

Contextパラメータ

contextから、coordinator、environment、アニメーションのtransactionにアクセスできます。

func updateUIView(_ uiView: MKMapView, context: Context) {
  print(context.environment.colorScheme)  // .light or .dark
}

UIViewRepresentableでのEnvironment値

context.environmentからSwiftUIのenvironment値を読み取り、UIKitの設定を適応させます。

if context.environment.colorScheme == .dark {
  uiView.overrideUserInterfaceStyle = .dark
}

UIKitビューのサイズ調整

UIViewRepresentableでは、固有コンテンツサイズまたはSwiftUIのframeモディファイアが使用されます。カスタムサイズにはsizeThatFitsを実装します。

func sizeThatFits(_ proposal: ProposedViewSize, uiView: WKWebView, context: Context) -> CGSize? {
  CGSize(width: proposal.width ?? 300, height: 400)
}

makeUIViewでの副作用の回避

makeUIViewは純粋に保ち、作成と設定だけを行ってください。状態に応じた更新はupdateUIViewに記述します。

// WRONG:
func makeUIView(context: Context) -> MKMapView {
  let v = MKMapView()
  v.setRegion(region, animated: false)  // belongs in updateUIView
  return v
}

よくラップされるビュー

UIViewRepresentableでラップされる代表的なUIKitビューには、WKWebView、MKMapView、UITextView、UIImagePickerController、AVPlayerLayerがあります。

// UITextView with custom toolbar
struct RichTextEditor: UIViewRepresentable {
  @Binding var text: String
  // makeUIView, updateUIView, Coordinator...
}

理解度チェック

初回の作成後、SwiftUIの状態をUIKitビューに同期するためにUIViewRepresentableで呼び出されるメソッドはどれですか？

レッスンのまとめ

UIViewRepresentableには、makeUIView（一度だけ作成）とupdateUIView（状態変更時に同期）が必要です。context.environmentを使って外観を適応させます。dismantleUIViewでリソースを解放します。サイズ調整にはSwiftUIのframeモディファイアを適用します。

よくある質問

「UIViewRepresentable：UIKit Viewのラップ」レッスンは無料ですか？

はい。「UIViewRepresentable：UIKit Viewのラップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。

「UIViewRepresentable：UIKit Viewのラップ」で何を学びますか？

SwiftUIでUIKit ViewのmakeUIView、updateUIView、解体処理を実装します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Swift Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「UIViewRepresentable：UIKit Viewのラップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwift Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. UIViewRepresentable：UIKit Viewのラップ
  2. デリゲート通信のためのCoordinatorパターン
  3. UIViewControllerRepresentable
  4. UIHostingController：UIKit内のSwiftUI
← Swift Academyに戻る