Developer

UI components

VERSION 0.45.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 Navigation SDK 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: TomTomNavigation,
9            navigationViewModel: TomTomNavigationView.ViewModel
10        ) {
11            self.navigation = navigation
12            self.navigationViewModel = navigationViewModel
13        }
14

15        convenience init() {
16            let navigationConfiguration = OnlineTomTomNavigationFactory.Configuration(
17                locationProvider: DefaultCLLocationProvider(),
18                routeReplanner: RouteReplannerFactory.create(
19                    routePlanner: OnlineRoutePlanner(apiKey: "YOUR_API_KEY")
20                ),
21                apiKey: "YOUR_API_KEY"
22            )
23

24            let navigation = try! OnlineTomTomNavigationFactory
25                .create(configuration: navigationConfiguration)
26            let navigationViewModel = TomTomNavigationView.ViewModel(
27                navigation,
28                tts: try! 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: TomTomNavigation
46    }
47}

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}

The final result appears as follows:

1import SwiftUI
2

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

11typealias TomTomNavigationView = TomTomSDKNavigationUI.NavigationView
12

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

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

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

27    // MARK: Private
28

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

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// ...

Next steps

Since you have learned about the navigation UI components, here are recommendations for the next steps: