Swiftui with delegate functions for mkmapview and uitextfield

Question

I'm practicing and reading up on SwiftUI and I am starting off by making a simple app where you can type a location into a TextField View from swiftUI and then on enter the mkmapview within SwiftUI again will go to that location that I searched for. I can't for the life of me seem to grasp how to get this functionality setup with my mkmapview.

Additionally I can't even find a way to dismiss the keyboard from Textfield without doing a navigation or rendering a new view or removing a view.

Can anyone point to me how I can dismiss my keyboard? I'm used to resignFirstResponder() or didFinishEditing().
Also, does anyone have any suggestions on how to assign functionality to the MKMapView from swiftUI or am I looking at this all wrong?

I figured in my Textfield's onCommit handler I would call a function that could pass necessary data to MapView and handle that but I haven't been able to find a good way to do it.

struct MainView : View {

    @State var text: String = ""

    var body: some View {
        VStack {
            MapView()
                .frame(height: UIScreen.main.bounds.height)
                .offset(y: 50)
                //.edgesIgnoringSafeArea(.top)

            SearchField(text: "")
                .offset(y: -(UIScreen.main.bounds.height) + 60)
                .padding()
        }
    }
}

struct MapView : UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct SearchField : View {
    @State var text: String
    @State var showDetails: Bool = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 30).frame(width: 300, height: 40)
                .foregroundColor(.white)
                .offset(y: 55)
            TextField($text, placeholder: Text("City, State, or Address"), onEditingChanged: { body in
                print(body)

            }, onCommit: {
                print(self.text)
            })
                .padding()
                .offset(x: 50)
        }
    }
}

*Edit Note: my code above works, it will build a full screen map view with a text field on it and the text field takes text and will update it's state. My question is about moving forward from this with getting functionality to mapview and hiding my damn keyboard on return

user_7098111 · Answer

To dismiss the keyboard when pressing return button in TextField, you can use:

UIApplication.shared.keyWindow?.endEditing(true)

Calling it on TextField's onCommit method:

TextField($searchString, placeholder: Text("Search...")) {
     UIApplication.shared.keyWindow?.endEditing(true)
   }
   .font(.system(size: 23))
   .padding()

user_233602 · Answer

My gut feel is you need to pass the binding into the SearchField like this:

struct MainView : View {

    @State var text: String = ""

    var body: some View {
        VStack {
            MapView()
                .frame(height: UIScreen.main.bounds.height)
                .offset(y: 50)
            //.edgesIgnoringSafeArea(.top)

            SearchField(text: $text)
                .offset(y: -(UIScreen.main.bounds.height) + 60)
                .padding()
        }
    }
}

struct MapView : UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct SearchField : View {
    @State var text: Binding

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 30).frame(width: 300, height: 40)
                .foregroundColor(.white)
                .offset(y: 55)
            TextField(text, placeholder: Text("City, State, or Address"), onEditingChanged: { body in
                print(self.text)

            }, onCommit: {
                print(self.text)
            })
                .padding()
                .offset(x: 50)
        }
    }
}

user_3868534 · Answer

Use a coordinator. Check out their Landmarks example. Search for delegate in the tutorial. I’m writing on the go so can’t post the link.

I did this for UIImagePickerController

user_11607124 · Answer

Okay guys,

So from what I have seen so far keyboards will only dismiss on some ui change but I found a pretty elegant solution!

By using a Binding declaration for a boolean "didEnter" which I can pass between views, when the user hit's return on the keyboard the onCommit() function is called within the TextField view. So I added a toggle for onCommit that actually switches my TextField view to a Text view that displays the text simulating the same look, then after some task is completed I toggle didEnter again which switches back to the TextField.

Still feels like a workaround but works for now.

struct InputView : View {
    @Binding var text:          String
    @Binding var didEnter:      Bool
    @State   var searchType:    SearchType

    var body: some View {
        ZStack{
            RoundedRectangle(cornerRadius: 15).frame(width: 310, height: 100)
                .foregroundColor(.secondary)
                .offset(y: -20)
            ZStack{
                RoundedRectangle(cornerRadius: 30).frame(width: 290, height: 40)
                    .foregroundColor(.white)
                if(!didEnter){
                    TextField($text, placeholder: Text("City, State, Address")) {
                        print(self.text)
                        self.didEnter.toggle()
                    }
                        .frame(width: 220, height: 40, alignment: .leading)
                        .offset(x: -20)
                }
                else{
                    Text(self.text).frame(width: 220, height: 40, alignment: .leading)
                        .offset(x: -20)
                }
                Text("Select Location:").bold().fontWeight(.medium)
                    .offset(y: -40)
                    .foregroundColor(.white)
            }
        }
    }
}

Swiftui with delegate functions for mkmapview and uitextfield

4 Answers