Custom banners
Enhance user experience by displaying customized banners, providing information like upcoming events and notification.
This example shows:
-
How to customize the styling of the Navigation Top banner and Bottom Banner
-
How to config custom banner for NavigationViewController
For all code examples, refer to Navigation Code Examples
CustomBannersViewController view source
1import UIKit
2import NbmapNavigation
3import NbmapCoreNavigation
4import NbmapDirections
5
6class CustomBannersViewController: UIViewController {
7
8 override func viewDidLoad() {
9 super.viewDidLoad()
10
11
12 let origin = CLLocation(latitude: 37.77440680146262, longitude: -122.43539772352648)
13 let destination = CLLocation(latitude: 37.76556957793795, longitude: -122.42409811526268)
14 let options = NavigationRouteOptions(origin: origin, destination: destination)
15 Directions.shared.calculate(options) { [weak self] routes, error in
16 guard let strongSelf = self else {
17 return
18 }
19 guard error == nil else {
20 print(error!)
21 return
22 }
23
24 guard let routes = routes else { return }
25
26
27 // Initialize NBNavigationService with the fetched routes, set routeIndex of the primary route to 0
28 let navigationService = NBNavigationService(routes: routes, routeIndex: 0)
29
30 let topBanner = CustomTopBarViewController()
31 let bottomBanner = CustomBottomBarViewController()
32 let navigationOptions = NavigationOptions(navigationService: navigationService,topBanner: topBanner,bottomBanner:bottomBanner)
33
34 // Initialize the NavigationViewController
35 let navigationViewController = NavigationViewController(for: routes,navigationOptions: navigationOptions)
36
37 bottomBanner.navigationViewController = navigationViewController
38
39 let parentSafeArea = navigationViewController.view.safeAreaLayoutGuide
40 let bannerHeight: CGFloat = 80.0
41 let verticalOffset: CGFloat = 20.0
42 let horizontalOffset: CGFloat = 10.0
43
44 // To change the top and bottom banner size and position change layout constraints directly.
45 topBanner.view.topAnchor.constraint(equalTo: parentSafeArea.topAnchor).isActive = true
46
47 bottomBanner.view.heightAnchor.constraint(equalToConstant: bannerHeight).isActive = true
48 bottomBanner.view.bottomAnchor.constraint(equalTo: parentSafeArea.bottomAnchor, constant: -verticalOffset).isActive = true
49 bottomBanner.view.leadingAnchor.constraint(equalTo: parentSafeArea.leadingAnchor, constant: horizontalOffset).isActive = true
50 bottomBanner.view.trailingAnchor.constraint(equalTo: parentSafeArea.trailingAnchor, constant: -horizontalOffset).isActive = true
51
52
53 // Set the delegate of navigationViewController to subscribe for NavigationView's events, This is optional
54 navigationViewController.modalPresentationStyle = .fullScreen
55
56 // Render part of the route that has been traversed with full transparency, to give the illusion of a disappearing route.
57 navigationViewController.routeLineTracksTraversal = true
58
59 // Start navigation
60 strongSelf.present(navigationViewController, animated: true, completion: nil)
61 }
62
63 }
64
65}This code creates a simple navigation app using NbmapNavigation.
-
The code begins by importing necessary libraries.
-
It defines a CustomBannersViewController class that inherits from UIViewController, a base class for managing a view.
-
Inside the viewDidLoad() method, which is called after the view controller, which is responsible for managing your screen, has loaded into memory,
-
It calculates the route using Directions.shared.calculate(options).
-
The options contain information about the origin and destination coordinates for the route, which are hardcoded into the CLLocation objects.
-
If there are no errors, and the routes are returned, the NBNavigationService is initialized with these routes.
-
The code then creates two custom view controllers: CustomTopBarViewController and CustomBottomBarViewController. These controllers handle the banner at the top and the bottom of the navigation view, respectively.
-
It then creates NavigationOptions with the navigationService, topBanner, and bottomBanner.
-
A NavigationViewController is initialized using the routes and navigationOptions.
-
Then, navigationViewController is set as the property of bottomBanner for accessing `navigationViewController,
-
The code then defines the constraints for topBanner and bottomBanner views, which control their size and position on the screen.
-
navigationViewController.modalPresentationStyle = .fullScreen makes the navigation view appear as a full screen when presented.
-
navigationViewController.routeLineTracksTraversal = true makes the navigation view render the traversed route with full transparency, giving the illusion of a disappearing route.
-
The navigation is started by presenting the navigationViewController.
