Styled UI elements | Navigation SDK | iOS

Customize the style of UI elements.
CustomStyleUIElements
/*
This code example is part of the Mapbox Navigation SDK for iOS demo app,
which you can build and run: https://github.com/mapbox/mapbox-navigation-ios-examples
To learn more about each example in this app, including descriptions and links
to documentation, see our docs: https://docs.mapbox.com/ios/navigation/examples/styled-ui-elements
*/
 
import Foundation
import UIKit
import MapboxCoreNavigation
import MapboxNavigation
import MapboxDirections
 
class CustomStyleUIElements: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
 
let origin = CLLocationCoordinate2DMake(37.77440680146262, -122.43539772352648)
let destination = CLLocationCoordinate2DMake(37.76556957793795, -122.42409811526268)
let routeOptions = NavigationRouteOptions(coordinates: [origin, destination])
 
Directions.shared.calculate(routeOptions) { [weak self] (_, result) in
switch result {
case .failure(let error):
print(error.localizedDescription)
case .success(let response):
guard let strongSelf = self else {
return
}
 
// For demonstration purposes, simulate locations if the Simulate Navigation option is on.
let indexedRouteResponse = IndexedRouteResponse(routeResponse: response, routeIndex: 0)
let navigationService = MapboxNavigationService(indexedRouteResponse: indexedRouteResponse,
customRoutingProvider: NavigationSettings.shared.directions,
credentials: NavigationSettings.shared.directions.credentials,
simulating: simulationIsEnabled ? .always : .onPoorGPS)
let navigationOptions = NavigationOptions(styles: [CustomDayStyle(), CustomNightStyle()],
navigationService: navigationService)
let navigationViewController = NavigationViewController(for: indexedRouteResponse,
navigationOptions: navigationOptions)
navigationViewController.modalPresentationStyle = .fullScreen
// Render part of the route that has been traversed with full transparency, to give the illusion of a disappearing route.
navigationViewController.routeLineTracksTraversal = true
 
strongSelf.present(navigationViewController, animated: true, completion: nil)
}
}
}
}
 
class CustomDayStyle: DayStyle {
 
private let backgroundColor = #colorLiteral(red: 0.06276176125, green: 0.6164312959, blue: 0.3432356119, alpha: 1)
private let darkBackgroundColor = #colorLiteral(red: 0.0473754704, green: 0.4980872273, blue: 0.2575169504, alpha: 1)
private let secondaryBackgroundColor = #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
private let blueColor = #colorLiteral(red: 0.26683864, green: 0.5903761983, blue: 1, alpha: 1)
private let lightGrayColor = #colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)
private let darkGrayColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
private let primaryLabelColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
private let secondaryLabelColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0.9)
 
required init() {
super.init()
mapStyleURL = URL(string: "mapbox://styles/mapbox/satellite-streets-v9")!
styleType = .day
}
 
override func apply() {
super.apply()
 
let traitCollection = UIScreen.main.traitCollection
ArrivalTimeLabel.appearance(for: traitCollection).textColor = lightGrayColor
BottomBannerView.appearance(for: traitCollection).backgroundColor = secondaryBackgroundColor
BottomPaddingView.appearance(for: traitCollection).backgroundColor = secondaryBackgroundColor
Button.appearance(for: traitCollection).textColor = #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
CancelButton.appearance(for: traitCollection).tintColor = lightGrayColor
DistanceLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [InstructionsBannerView.self]).unitTextColor = secondaryLabelColor
DistanceLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [InstructionsBannerView.self]).valueTextColor = primaryLabelColor
DistanceLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self]).unitTextColor = lightGrayColor
DistanceLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self]).valueTextColor = darkGrayColor
DistanceRemainingLabel.appearance(for: traitCollection).textColor = lightGrayColor
DismissButton.appearance(for: traitCollection).textColor = darkGrayColor
FloatingButton.appearance(for: traitCollection).backgroundColor = #colorLiteral(red: 0.9999960065, green: 1, blue: 1, alpha: 1)
FloatingButton.appearance(for: traitCollection).tintColor = blueColor
TopBannerView.appearance(for: traitCollection).backgroundColor = backgroundColor
InstructionsBannerView.appearance(for: traitCollection).backgroundColor = backgroundColor
LanesView.appearance(for: traitCollection).backgroundColor = darkBackgroundColor
LaneView.appearance(for: traitCollection).primaryColor = #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
ManeuverView.appearance(for: traitCollection).backgroundColor = backgroundColor
ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [InstructionsBannerView.self]).primaryColor = #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [InstructionsBannerView.self]).secondaryColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0.5)
ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [NextBannerView.self]).primaryColor = #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [NextBannerView.self]).secondaryColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0.5)
ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self]).primaryColor = darkGrayColor
ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self]).secondaryColor = lightGrayColor
NextBannerView.appearance(for: traitCollection).backgroundColor = backgroundColor
NextInstructionLabel.appearance(for: traitCollection).textColor = #colorLiteral(red: 0.9842069745, green: 0.9843751788, blue: 0.9841964841, alpha: 1)
NavigationMapView.appearance(for: traitCollection).tintColor = blueColor
NavigationMapView.appearance(for: traitCollection).routeCasingColor = #colorLiteral(red: 0.1968861222, green: 0.4148176908, blue: 0.8596113324, alpha: 1)
NavigationMapView.appearance(for: traitCollection).trafficHeavyColor = #colorLiteral(red: 0.9995597005, green: 0, blue: 0, alpha: 1)
NavigationMapView.appearance(for: traitCollection).trafficLowColor = blueColor
NavigationMapView.appearance(for: traitCollection).trafficModerateColor = #colorLiteral(red: 1, green: 0.6184511781, blue: 0, alpha: 1)
NavigationMapView.appearance(for: traitCollection).trafficSevereColor = #colorLiteral(red: 0.7458544374, green: 0.0006075350102, blue: 0, alpha: 1)
NavigationMapView.appearance(for: traitCollection).trafficUnknownColor = blueColor
// Customize the color that appears on the traversed section of a route
NavigationMapView.appearance(for: traitCollection).traversedRouteColor = #colorLiteral(red: 0.8039215803, green: 0.8039215803, blue: 0.8039215803, alpha: 0.5)
PrimaryLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = primaryLabelColor
PrimaryLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor = darkGrayColor
ResumeButton.appearance(for: traitCollection).backgroundColor = secondaryBackgroundColor
ResumeButton.appearance(for: traitCollection).tintColor = blueColor
SecondaryLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [InstructionsBannerView.self]).normalTextColor = secondaryLabelColor
SecondaryLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self]).normalTextColor = darkGrayColor
TimeRemainingLabel.appearance(for: traitCollection).textColor = lightGrayColor
TimeRemainingLabel.appearance(for: traitCollection).trafficLowColor = darkBackgroundColor
TimeRemainingLabel.appearance(for: traitCollection).trafficUnknownColor = darkGrayColor
WayNameLabel.appearance(for: traitCollection).normalTextColor = blueColor
WayNameView.appearance(for: traitCollection).backgroundColor = secondaryBackgroundColor
}
}
 
class CustomNightStyle: NightStyle {
 
private let backgroundColor = #colorLiteral(red: 0.06276176125, green: 0.6164312959, blue: 0.3432356119, alpha: 1)
private let darkBackgroundColor = #colorLiteral(red: 0.0473754704, green: 0.4980872273, blue: 0.2575169504, alpha: 1)
private let secondaryBackgroundColor = #colorLiteral(red: 0.1335069537, green: 0.133641988, blue: 0.1335278749, alpha: 1)
private let blueColor = #colorLiteral(red: 0.26683864, green: 0.5903761983, blue: 1, alpha: 1)
private let lightGrayColor = #colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1)
private let darkGrayColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
private let primaryTextColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
private let secondaryTextColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 0.9)
 
required init() {
super.init()
mapStyleURL = URL(string: "mapbox://styles/mapbox/satellite-streets-v9")!
styleType = .night
}
 
override func apply() {
super.apply()
 
let traitCollection = UIScreen.main.traitCollection
DistanceRemainingLabel.appearance(for: traitCollection).normalTextColor = primaryTextColor
BottomBannerView.appearance(for: traitCollection).backgroundColor = secondaryBackgroundColor
BottomPaddingView.appearance(for: traitCollection).backgroundColor = secondaryBackgroundColor
FloatingButton.appearance(for: traitCollection).backgroundColor = #colorLiteral(red: 0.1434620917, green: 0.1434366405, blue: 0.1819391251, alpha: 0.9037466989)
TimeRemainingLabel.appearance(for: traitCollection).textColor = primaryTextColor
TimeRemainingLabel.appearance(for: traitCollection).trafficLowColor = primaryTextColor
TimeRemainingLabel.appearance(for: traitCollection).trafficUnknownColor = primaryTextColor
ResumeButton.appearance(for: traitCollection).backgroundColor = #colorLiteral(red: 0.1434620917, green: 0.1434366405, blue: 0.1819391251, alpha: 0.9037466989)
ResumeButton.appearance(for: traitCollection).tintColor = blueColor
}
}