UI components

VERSION 0.13.0
PUBLIC PREVIEW

The Navigation SDK for iOS is only available upon request. Contact us to get started.

Navigation View

Introduction

Usually the navigation process is followed using a visual representation of a navigation context (estimated time of arrival, current speed, progress, etc).

The GoSDK provides a UI component NavigationView built on top of modern technologies to allow you to integrate the Navigation visualization into your app in a few steps.

In the examples we will use a typealias for NavigationView named TomTomNavigationView.

Integrating NavigationView within the SwiftUI codebase

Since the NavigationView is built with the SwiftUI, you can use it the same way as you use other SwiftUI components within your codebase.

Navigation ViewModel creation and initialization

1extension ContentView {
2    final class ViewModel: ObservableObject {
3        // MARK: Lifecycle
4

5        // ...
6

7        init(
8            navigation: Navigation,
9            navigationViewModel: TomTomNavigationView.ViewModel
10        ) {
11            self.navigation = navigation
12            self.navigationViewModel = navigationViewModel
13        }
14

15        convenience init() {
16            let navigationConfiguration = NavigationConfiguration(
17                apiKey: "key",
18                locationProvider: DefaultCLLocationProvider(),
19                routeReplanner: DefaultRouteReplanner(
20                    routePlanner: OnlineRoutePlanner(apiKey: "key"),
21                    replanningPolicy: .findBetter
22                )
23            )
24

25            let navigation = Navigation(configuration: navigationConfiguration)
26            let navigationViewModel = TomTomNavigationView.ViewModel(
27                navigation,
28                tts: SystemTextToSpeechEngine()
29            )
30

31            self.init(
32                navigation: navigation,
33                navigationViewModel: navigationViewModel
34            )
35        }
36

37        // MARK: Internal
38

39        let navigationViewModel: TomTomNavigationView.ViewModel
40

41        // MARK: Private
42

43        // ...
44

45        private let navigation: Navigation
46    }
47}
48

49// MARK: - NavigationViewController

NavigationView

The initializer of a NavigationView expects a NavigationView.ViewModel object and a closure for handling the incoming actions occurring during the navigation process.

Let’s add some methods for NavigationView Actions handling and use the previously declared navigationViewModel.

1extension ContentView {
2    fileprivate func onNavigationViewAction(_ action: TomTomNavigationView.Action) {
3        switch action {
4        case let .arrival(action):
5            onArrivalAction(action)
6        case let .instruction(action):
7            onInstructionAction(action)
8        case let .confirmation(action):
9            onConfirmationAction(action)
10        case let .error(action):
11            onErrorAction(action)
12        }
13    }
14

15    fileprivate func onArrivalAction(_ action: TomTomNavigationView.ArrivalAction) {
16        // ...
17    }
18

19    fileprivate func onInstructionAction(_ action: TomTomNavigationView.InstructionAction) {
20        // ...
21    }
22

23    fileprivate func onConfirmationAction(_ action: TomTomNavigationView.ConfirmationAction) {
24        // ...
25    }
26

27    fileprivate func onErrorAction(_ action: TomTomNavigationView.ErrorAction) {
28        // ...
29    }
30}
31

32// MARK: ContentView.ViewModel

The final result appears as follows:

1import SwiftUI
2

3import TomTomSDKDefaultTextToSpeech
4import TomTomSDKLocationProvider
5import TomTomSDKNavigation
6import TomTomSDKNavigationUI
7import TomTomSDKRoutePlannerOnline
8import TomTomSDKRouteReplannerDefault
9

10typealias TomTomNavigationView = TomTomSDKNavigationUI.NavigationView
11

12// MARK: - ContentView
13

14struct ContentView: View {
15    // MARK: Internal
16

17    var body: some View {
18        ZStack(alignment: .bottom) {
19            // ...
20

21            TomTomNavigationView(
22                viewModel.navigationViewModel,
23                action: onNavigationViewAction(_:)
24            )
25        }
26    }
27

28    // MARK: Private
29

30    @StateObject
31    private var viewModel = ViewModel()
32}

It’s worth noting that this example utilizes the @StateObject property wrapper available starting from an iOS 14 deployment target, so if you need to support iOS 13+ you must provide the ViewModel from an outside source instead of creating it inside the SwiftUI View.

Integrating NavigationView within the UIKit codebase

The integration flow for the UIKit project is similar to the one from SwiftUI. There is a need to handle the Navigation View actions and hold the NavigationView.ViewModel object. In order to integrate the UI component itself - the UIHostingController is used.

1let navigationView = TomTomNavigationView(
2    viewModel.navigationViewModel,
3    action: onNavigationViewAction(_:)
4)
5let hostingController = UIHostingController(rootView: navigationView)
6

7view.addSubview(hostingController.view)
8

9// Add constraints
10// ...