見出し画像

SwiftUI ViewをUIKit Storyboard内の一部ビューとして表示する

こんにちは🐹
今回は最新(と言っても2年くらい経ちましたが😌)のノリに乗ってSwiftUIにチャレンジしてみました👊
仕事でもSwiftUIをこれから導入して行きましょう!という流れになったので私もその流れに積極的に乗っていきたいと思ってます😎

実装したいこと

画像1

当たり前のことですが、既存のUIはStoryboardで構成されていました。
今回はこのStoryboardの中に横スクロールのリストを追加する必要があり、このリストをUICollectionViewの代わりにSwiftUIで実装してみることになりました。
ところで、Storyboardの中のビューは全てUIKitになっているため、Storyboardの中にSwiftUIのビューを一部ビューとしてうまく埋め込むことが課題でした。

どう実装したのか

結論から言うとUIHostingControllerクラスを使用して実装しました。
UIHostingControllerクラスはUIViewControllerクラスを継承しているので、このUIHostingControllerクラスを使うとSwiftUIビューをUIViewControllerで使用できるようになります。
UIHostingControllerクラスはSwiftUIに含まれてますので使用する時は必ずimport SwiftUIをする必要があります。

サンプルコードは下記の通りです。

import UIKit
import SwiftUI

class SomeViewController: UIViewController {
	
	// Storyboardの中にSwiftUIビューを表示するためのUIViewを追加
	@IBOutlet weak var contentView: UIView!
	
	//UIHostingControllerを追加し、SwiftUIビューを表示させる 
	let vc: UIHostingController = UIHostingController(rootView: SomeListView())
	self.addChild(vc)
	self.contentView.addSubView(vc.view)
	vc.didMove(toParent: self)
	
	// UIView内で表示されているSwiftUIビューの位置とサイズなどを調整
	vc.view.translatesAutoresizingMaskIntoConstraints = false
	vc.view.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 0).isActive = true
	vc.view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: 0).isActive = true
	vc.view.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 0).isActive = true
	vc.view.rightAnchor.constraint(equalTo: cotentView.rightAnchor, constant: 0).isActive = true

}
import SwiftUI

struct SomeListView: View {

	var body: some View {
		ScrollView(.horizontal) {
			HStack {
				Text("aaa")
				Text("bbb")
				Text("ccc")
			}
		}
	}

}

参考資料


この記事が気に入ったらサポートをしてみませんか?