I'm trying to wrap a ViewController from one of Apple's demos in a SwiftUI UIViewControllerRepresentable, and it has a group of IBOutlets, which connect to the Main storyboard. How do I handle this situation? Should the IBOutlets be replaced with View structs, or should I try to incorporate the Storyboard along SwiftUI?
struct ARViewContainer: UIViewControllerRepresentable {
#ObservedObject var model: Model
typealias UIViewControllerType = ARView
func makeUIViewController(context: Context) -> ARView {
return ARView(model)
}
func updateUIViewController(_ uiViewController:
ARViewContainer.UIViewControllerType, context:
UIViewControllerRepresentableContext<ARViewContainer>) { }
}
class ARView: UIViewController, ARSCNViewDelegate {
#ObservedObject var model: Model
// MARK: IBOutlets
#IBOutlet var sceneView: VirtualObjectARView!
#IBOutlet weak var addObjectButton: UIButton!
#IBOutlet weak var blurView: UIVisualEffectView!
#IBOutlet weak var spinner: UIActivityIndicatorView!
#IBOutlet weak var upperControlsView: UIView!
It can definitely work, but you have to instantiate your UIViewController from the storyboard. Right now, you're just initializing it with ARView(), so it has no connection to the storyboard and no way to connect the outlets.
Basic example:
struct ContentView : View {
var body: some View {
MyStoryboardVCRepresented()
}
}
struct MyStoryboardVCRepresented : UIViewControllerRepresentable {
func makeUIViewController(context: Context) -> MyStoryboardVC {
UIStoryboard(name: "MyStoryboard", bundle: Bundle.main).instantiateViewController(identifier: "MyVC") as! MyStoryboardVC //theoretically unsafe to unwrap like this with `!`, but we know it works, since the view controller is included in the storyboard
}
func updateUIViewController(_ uiViewController: MyStoryboardVC, context: Context) {
uiViewController.label.text = "Hello, world!"
}
}
class MyStoryboardVC : UIViewController {
#IBOutlet var label : UILabel!
}
Related
I'm stuck with the really strange problem. I'm implementing map into my SwiftUI app. It should act like a normal map (drag, scroll and so on). When changing position (that is binding point) the app gets an address via geocoder.
Also user can click "Change" button and enter address manually (with autocompletion). After selecting the address, the map should move to the reverse geocoded point.
Built-in SwiftUI Map() is a good thing, but... it's unreal to make it show buildings. And in the app it's something that matters. So, going with UIViewRepresentable gives me another strange problem.
If I set the center coordinate in UpdateUIView, the map stops any interactivity. Otherwise changing the address manually doesn't work.
What could be wrong with this?
struct MapView: UIViewRepresentable {
#Binding var point: CLLocationCoordinate2D
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.showsBuildings = true
mapView.delegate = context.coordinator
return mapView
}
func updateUIView(_ uiView: MKMapView, context: Context) {
// uiView.setCenter(point, animated: true)
}
func makeCoordinator() -> MapView.Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: MapView
init(_ parent: MapView) {
self.parent = parent
}
func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) {
self.parent.point = mapView.centerCoordinate
}
}
}
I tried wrapping everything into DispatchQueue.main.async {} - not working (and honestly I don't think it could)
I also tried this solution, but it worked neither: https://www.reddit.com/r/SwiftUI/comments/kti9r9/uiviewrepresentable_how_to_update_bindings/
I also had the same problem. I solved this using #state. So every time the mapView changes, the corresponding function of the coordinator is definitely called. Hope it helps.
struct YourView: View {
#State mapView: MKMapView = .init()
#State var point: CLLocationCoordinate2D = [...]
var body: some View {
MapView(mapView: $mapView, point: $point)
...
}
struct MapView: UIViewRepresentable {
#Binding var mapView: MKMapView
#Binding var point: CLLocationCoordinate2D
func makeUIView(context: Context) -> MKMapView {
self.mapView = MKMapView()
self.mapView.showsBuildings = true
self.mapView.delegate = context.coordinator
return self.mapView
}
...
func updateUIView(_ uiView: MKMapView, context: Context) {
// uiView.setCenter(point, animated: true)
}
func makeCoordinator() -> MapView.Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: MapView
init(_ parent: MapView) {
self.parent = parent
}
func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) {
self.parent.point = self.mapView.centerCoordinate
}
}
}
I have a UIViewControllerRepresentable with a UIStoryboard. How do I pass my #ObservedObject to the ViewController? It's currently not initialised, and I can't pass it to "as! ARView(model: model)"
struct ARViewContainer: UIViewControllerRepresentable {
#ObservedObject var model: Model
typealias UIViewControllerType = ARView
func makeUIViewController(context: Context) -> ARView {
UIStoryboard(name: "Main", bundle: Bundle.main).instantiateViewController(identifier: "Main") as! ARView
}
func updateUIViewController(_ uiViewController: ARViewContainer.UIViewControllerType, context: UIViewControllerRepresentableContext<ARViewContainer>) { }
}
class ARView: UIViewController, ARSCNViewDelegate {
// MARK: Object model
#ObservedObject var model: Model
// MARK: - Initalisation
init(model: Model) {
self.model = model
super.init(nibName: nil, bundle: nil)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
There's no reason to use #ObservableObject inside a UIViewController. The property wrapper isn't doing you any good like it would inside a View, triggering updates.
An #ObservableObject can't be an Optional, but since it no longer has to have the property wrapper, you can make it an Optional. Obviously, you'll have to unwrap when it needs to be used.
struct ARViewContainer: UIViewControllerRepresentable {
#ObservedObject var model: Model
typealias UIViewControllerType = ARView
func makeUIViewController(context: Context) -> ARView {
let vc = UIStoryboard(name: "Main", bundle: Bundle.main).instantiateViewController(identifier: "Main") as! ARView
vc.model = model
return vc
}
func updateUIViewController(_ uiViewController: ARViewContainer.UIViewControllerType, context: UIViewControllerRepresentableContext<ARViewContainer>) {
}
}
class ARView: UIViewController, ARSCNViewDelegate {
var model: Model?
}
I have made a custom UIViewController called ViewControllerA and want to be able to use it so I made a UIViewControllerRepresentable called ViewControllerARepresentable as shown below, the problem though is that when I call ViewControllerARepresentable in my SwiftUI view and pass a value for stringToUpdateTextView, the ViewControllerA says the htmlTextView(UITextView) in ViewControllerA is nil and I'm not sure why.
ViewControllerARepresentable(stringToUpdateTextView: "<html>Send some Html Text as string here</html>")
ViewControllerARepresentable
public struct ViewControllerARepresentable: UIViewControllerRepresentable {
var stringToUpdateTextView: String
public func makeUIViewController(context: Context) -> ViewControllerA {
let viewcontrollerA = ViewControllerA(testString: testingString)
return viewcontrollerA
}
public func updateUIViewController(_ uiViewController: ViewControllerA, context: Context) {}
}
ViewControllerA
open class ViewControllerA: UIViewController {
public var stringToUpdateTextView: String
override open func viewDidLoad() {
super.viewDidLoad()
htmlTextView.text = stringToUpdateTextView
}
#IBOutlet weak var htmlTextView: UITextView!
public init(testString: String) {
self.testString = testString
super.init(nibName: nil, bundle: nil)
}
required public init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Crash occurs at htmlTextView.text = stringToUpdateTextView saying that htmlTextView.text is nil even though its an IBOutlet.
Any Change made to the htmlTextView like background color ,etc, also causes a crash if called in viewDidAppear or viewDidLoad
When instantiating your view controller in makeUIViewController, the outlets haven't been initialised yet.
The following code loads your view controller from the storyboard, and updates the properties in updateUIViewController:
ViewController.swift
import UIKit
import SwiftUI
class ViewController: UIViewController {
#IBOutlet weak var htmlTextView: UITextView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}
struct ViewControllerWrapper: UIViewControllerRepresentable {
typealias UIViewControllerType = ViewController
#Binding var text: String
func makeUIViewController(context: Context) -> ViewController {
let storyboard = UIStoryboard(name: "Main", bundle: nil)
guard let viewController = storyboard.instantiateViewController(
identifier: "ViewController") as? ViewController else {
fatalError("Cannot load from storyboard")
}
return viewController
}
func updateUIViewController(_ uiViewController: ViewController, context: Context) {
uiViewController.htmlTextView.text = text
}
}
struct ViewControllerPreview: PreviewProvider {
static var previews: some View {
ViewControllerWrapper(text: .constant("hello world!"))
}
}
SwiftUIView.swift
struct SwiftUIView: View {
#State var text = "Text"
var body: some View {
HStack {
TextField("Text:", text: $text)
ViewControllerWrapper(text: $text)
}
}
}
I am trying to implement CNContactViewDelegate to be able to show detail of the CNContact. And apparently, I am the first one to implement it with SwiftUI and getting problems. Anyway, I can see the detail of CNContact with using UIViewControllerRepresentable but I have an issue with the NavigationBar, which there is gap between the Contact's image and StatusBar -because of the NavigationBar and NavigationLink I think- and this gap is not there in the native Contacts app and apparently in this link that implemented the framework in UIKit.
Here is the code;
struct ContactsListView: View {
#ObservedObject var contactsModel: ContactsViewModel
var body: some View {
NavigationView{
List {
//After some ForEach's and Section's
//This view is working.
NavigationLink(destination: ContactDetailView(contact: self.$contactsModel.contacts[sectionIdx].contacts[contactIdx])) {
Text(self.contactsModel.contacts[sectionIdx].contacts[contactIdx].givenName)
}
}
.navigationBarTitle("Contacts")
}
}
}
struct ContactView: UIViewControllerRepresentable {
#Binding var contact: CNContact
func makeCoordinator() -> ContactView.Coordinator {
Coordinator(self)
}
func makeUIViewController(context: UIViewControllerRepresentableContext<ContactView>) -> CNContactViewController {
let controller = CNContactViewController(for: contact)
self.navigationBarHidden(true)
return controller
}
func updateUIViewController(_ uiViewController: CNContactViewController, context: UIViewControllerRepresentableContext<ContactView>) {
print(context)
}
class Coordinator: NSObject, CNContactViewControllerDelegate {
var parent: ContactView
init(_ contactDetail: ContactView) {
self.parent = contactDetail
self.parent.navigationBarHidden(true)
}
}
}
In the ContactView, both of those self.navigationBarHidden(true)'s are not working. As an example of the problem here is the native app's screenshot;
And here is the result of my code;
Posted my comment on the solution and then I came to the idea to wrap the contact view controller inside my custom NavigationController. And voila that fixed it!
struct ContactView: UIViewControllerRepresentable {
var contact: CNContact
func makeCoordinator() -> ContactView.Coordinator {
Coordinator(self)
}
func makeUIViewController(context: UIViewControllerRepresentableContext<ContactView>) -> NavigationController {
let controller = CNContactViewController(forUnknownContact: contact)
controller.contactStore = CNContactStore()
controller.delegate = context.coordinator
let navigationController = NavigationController(rootViewController: controller)
return navigationController
}
func updateUIViewController(_ uiViewController: NavigationController, context: UIViewControllerRepresentableContext<ContactView>) {
}
class Coordinator: NSObject, CNContactViewControllerDelegate {
var parent: ContactView
init(_ contactDetail: ContactView) {
self.parent = contactDetail
}
func contactViewController(_ viewController: CNContactViewController,
didCompleteWith contact: CNContact?) {
}
func contactViewController(_ viewController: CNContactViewController,
shouldPerformDefaultActionFor property: CNContactProperty) -> Bool {
return true
}
}
}
As the question is got an upvote I thought I can share my half way solution. This solves the gap however during the transition to detail there is a glitch of navigation bar with background color. After the transition it is becoming clear.
struct ContactDetailView: View {
var contact: CNContact
var body: some View {
ZStack {
Color.clear
ContactView(contact: self.contact)
.navigationBarTitle("", displayMode: .inline)
}.edgesIgnoringSafeArea(.top)
}
}
struct ContactView: UIViewControllerRepresentable {
var contact: CNContact
func makeCoordinator() -> ContactView.Coordinator {
Coordinator(self)
}
func makeUIViewController(context: UIViewControllerRepresentableContext<ContactView>) -> CNContactViewController {
let controller = CNContactViewController(forUnknownContact: contact)
controller.allowsActions = true
controller.allowsEditing = false
controller.delegate = context.coordinator
return controller
}
func updateUIViewController(_ uiViewController: CNContactViewController, context: UIViewControllerRepresentableContext<ContactView>) {
print("updated")
}
class Coordinator: NSObject, CNContactViewControllerDelegate {
var parent: ContactView
init(_ contactDetail: ContactView) {
self.parent = contactDetail
}
func contactViewController(_ viewController: CNContactViewController, didCompleteWith contact: CNContact?) {
}
func contactViewController(_ viewController: CNContactViewController, shouldPerformDefaultActionFor property: CNContactProperty) -> Bool {
return true
}
}
}
I have made a simple UIViewRepresentable from MKMapView. You can scroll the mapview, and the screen will be updated with the coordinates in the middle.
Here's the ContentView:
import SwiftUI
import CoreLocation
let london = CLLocationCoordinate2D(latitude: 51.50722, longitude: -0.1275)
struct ContentView: View {
#State private var center = london
var body: some View {
VStack {
MapView(center: self.$center)
HStack {
VStack {
Text(String(format: "Lat: %.4f", self.center.latitude))
Text(String(format: "Long: %.4f", self.center.longitude))
}
Spacer()
Button("Reset") {
self.center = london
}
}.padding(.horizontal)
}
}
}
Here's the MapView:
struct MapView: UIViewRepresentable {
#Binding var center: CLLocationCoordinate2D
func makeUIView(context: Context) -> MKMapView {
let mapView = MKMapView()
mapView.delegate = context.coordinator
return mapView
}
func updateUIView(_ uiView: MKMapView, context: Context) {
uiView.centerCoordinate = self.center
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, MKMapViewDelegate {
var parent: MapView
func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) {
parent.center = mapView.centerCoordinate
}
init(_ parent: MapView) {
self.parent = parent
}
}
}
Tapping the reset button should simply set mapView.center to london. The current method will make the map scrolling super slow, and when the button is tapped, cause the error "Modifying state during view update, this will cause undefined behavior."
How should resetting the coordinates be communicated to the MKMapView, such that the map scrolling is fast again, and the error is fixed?
The above solution with an ObservedObject will not work. While you wont see the warning message anymore, the problem is still occurring. Xcode just isn't able to warn you its happening anymore.
Published properties in ObservableObjects behave almost identically to #State and #Binding. That is, they trigger a view update any time their objectWillUpdate publisher is triggered. This happens automatically when an #Published property is updated. You can also trigger it manually yourself with objectWillChange.send()
Because of this, it is possible to make properties that do not automatically cause view state to update. And we can leverage this to prevent unwanted state updates for UIViewRepresentable and UIViewControllerRepresentable structs.
Here is an implementation that will not loop when you update its view model from the MKMapViewDelegate methods:
struct MapView: UIViewRepresentable {
#ObservedObject var viewModel: Self.ViewModel
func makeUIView(context: Context) -> MKMapView{
let mapview = MKMapView()
mapview.delegate = context.coordinator
return mapview
}
func updateUIView(_ uiView: MKMapView, context: Context) {
// Stop update loop when delegate methods update state.
guard viewModel.shouldUpdateView else {
viewModel.shouldUpdateView = true
return
}
uiView.centerCoordinate = viewModel.centralCoordinate
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
class Coordinator: NSObject, MKMapViewDelegate {
private var parent: MapView
init(_ parent: MapView) {
self.parent = parent
}
func mapViewDidChangeVisibleRegion(_ mapView: MKMapView){
// Prevent the below viewModel update from calling itself endlessly.
parent.viewModel.shouldUpdateView = false
parent.viewModel.centralCoordinate = mapView.centerCoordinate
}
}
class ViewModel: ObservableObject {
#Published var centerCoordinate: CLLocationCoordinate2D = .init(latitude: 0, longitude: 0)
var shouldUpdateView: Bool = true
}
}
If you really dont want to use an ObservableObject, the alternative is to put the shouldUpdateView property into your coordinator. Although I still prefer to use a viewModel because it keeps your UIViewRepresentable free of multiple #Bindings. You can also use the ViewModel externally and listen to it via combine.
Honestly, I'm surprised apple didn't consider this exact issue when they created UIViewRepresentable.
Almost all UIKit views will have this exact problem if you need to keep your SwiftUI state in sync with view changes.