Alternate Top Banner Instructions

.circleci/config.yml

@@ -175,12 +175,12 @@ workflows:
   workflow:
     jobs:
       - build-job:
-          name: "Xcode_10.2_iOS_12.2"
-          xcode: "10.2.0"
+          name: "Xcode_10.3_iOS_12.2"
+          xcode: "10.3.0"
           iOS: "12.2"
       - build-job:
-          name: "Xcode_10.1_iOS_12.1"
-          xcode: "10.1.0"
+          name: "Xcode_10.3_iOS_12.1"
+          xcode: "10.3.0"
           iOS: "12.1"
           codecoverage: true
       - build-job:

Example/ViewController.swift

@@ -100,12 +100,14 @@ class ViewController: UIViewController {
         let night: ActionHandler = {_ in self.startNavigation(styles: [NightStyle()]) }
         let custom: ActionHandler = {_ in self.startCustomNavigation() }
         let styled: ActionHandler = {_ in self.startStyledNavigation() }
+        let guidanceCards: ActionHandler = {_ in self.startGuidanceCardsNavigation() }
 
         let actionPayloads: [(String, UIAlertAction.Style, ActionHandler?)] = [
             ("Default UI", .default, basic),
             ("DayStyle UI", .default, day),
             ("NightStyle UI", .default, night),
             ("Custom UI", .default, custom),
+            ("Guidance Card UI", .default, guidanceCards),
             ("Styled UI", .default, styled),
             ("Cancel", .cancel, nil)
         ]
@@ -286,6 +288,21 @@ class ViewController: UIViewController {
 
         presentAndRemoveMapview(navigationViewController, completion: beginCarPlayNavigation)
     }
+
+    // MARK: Guidance Cards
+    func startGuidanceCardsNavigation() {
+        guard let route = routes?.first else { return }
+
+        let instructionsCardCollection = InstructionsCardViewController()
+        instructionsCardCollection.cardCollectionDelegate = self
+
+        let options = NavigationOptions(navigationService: navigationService(route: route), topBanner: instructionsCardCollection)
+        let navigationViewController = NavigationViewController(for: route, options: options)
+        navigationViewController.delegate = self
+
+        presentAndRemoveMapview(navigationViewController, completion: beginCarPlayNavigation)
+    }
+
 
     func navigationService(route: Route) -> NavigationService {
         let simulate = simulationButton.isSelected

MapboxNavigation/Constants+InstructionsCard.swift

@@ -0,0 +1,16 @@
+/// :nodoc:
+struct InstructionsCardConstants {
+    static let highlightDistance: CLLocationDistance = 152.4 // 500 ft
+
+    static let primaryLabelWidth: CGFloat = 170.0
+
+    static let primaryLabelLeadingPadding: CGFloat = 14.0
+
+    static let secondaryLabelWidth: CGFloat = 170.0
+
+    static let highlightAnimationDuration: TimeInterval = 0.2
+
+    static let highlightedBackgroundAlphaComponent: CGFloat = 0.90
+
+    static let backgroundColorAlphaComponent: CGFloat = 0.90
+}

MapboxNavigation/DayInstructionsCardStyle.swift

@@ -0,0 +1,98 @@
+/// :nodoc:
+public class DayInstructionsCardStyle: InstructionsCardStyle {
+    public var cornerRadius: CGFloat = 20.0
+
+    public var backgroundColor: UIColor = .white
+
+    public var highlightedBackgroundColor: UIColor = .cardBlue
+
+    public lazy var primaryLabelNormalFont: UIFont = {
+        return CardFont.create(.bold, with: 24.0)!
+    }()
+
+    public var primaryLabelTextColor: UIColor {
+        return .cardDark
+    }
+
+    public var primaryLabelHighlightedTextColor: UIColor {
+        return .cardLight
+    }
+
+    public lazy var secondaryLabelNormalFont: UIFont = {
+        return CardFont.create(.bold, with: 18.0)!
+    }()
+
+    public var secondaryLabelTextColor: UIColor {
+        return .cardDark
+    }
+
+    public var secondaryLabelHighlightedTextColor: UIColor {
+        return .cardLight
+    }
+
+    public lazy var distanceLabelNormalFont: UIFont = {
+        return CardFont.create(.regular, with: 16.0)!
+    }()
+
+    public var distanceLabelValueTextColor: UIColor {
+        return .cardDark
+    }
+
+    public var distanceLabelUnitTextColor: UIColor {
+        return .cardDark
+    }
+
+    public lazy var distanceLabelUnitFont: UIFont = {
+        return CardFont.create(.regular, with: 16.0)!
+    }()
+
+    public lazy var distanceLabelValueFont: UIFont = {
+        return CardFont.create(.bold, with: 20.0)!
+    }()
+
+    public var distanceLabelHighlightedTextColor: UIColor {
+        return .cardLight
+    }
+
+    public var maneuverViewPrimaryColor: UIColor {
+        return .cardBlue
+    }
+
+    public var maneuverViewSecondaryColor: UIColor {
+        return .cardLight
+    }
+
+    public var maneuverViewHighlightedColor: UIColor {
+        return .cardLight
+    }
+
+    public var nextBannerViewPrimaryColor: UIColor {
+        return .cardBlue
+    }
+
+    public var nextBannerViewSecondaryColor: UIColor {
+        return .cardLight
+    }
+
+    public var nextBannerInstructionLabelTextColor: UIColor {
+        return .cardDark
+    }
+
+    public lazy var nextBannerInstructionLabelNormalFont: UIFont = {
+       return CardFont.create(.regular, with: 14.0)
+    }()
+
+    public var nextBannerInstructionHighlightedColor: UIColor {
+        return .cardLight
+    }
+
+    public var lanesViewDefaultColor: UIColor {
+        return .cardBlue
+    }
+
+    public var lanesViewHighlightedColor: UIColor {
+        return .cardLight
+    }
+
+    public init() {}
+}

MapboxNavigation/InstructionsBannerViewLayout.swift

@@ -77,7 +77,7 @@ extension BaseInstructionsBannerView {
         addGestureRecognizer(swipeDownGesture)
     }
 
-    func setupLayout() {
+    @objc func setupLayout() {
         // firstColumnWidth is the width of the left side of the banner containing the maneuver view and distance label
         let firstColumnWidth = BaseInstructionsBannerView.maneuverViewSize.width + BaseInstructionsBannerView.padding * 3
 
@@ -135,20 +135,20 @@ extension BaseInstructionsBannerView {
     }
 
     // Aligns the instruction to the center Y (used for single line primary and/or secondary instructions)
-    func centerYAlignInstructions() {
+    @objc func centerYAlignInstructions() {
         _separatorView.isHidden = false
         baselineConstraints.forEach { $0.isActive = false }
         centerYConstraints.forEach { $0.isActive = true }
     }
 
     // Aligns primary top to the top of the maneuver view and the secondary baseline to the distance baseline (used for multiline)
-    func baselineAlignInstructions() {
+    @objc func baselineAlignInstructions() {
         _separatorView.isHidden = true
         centerYConstraints.forEach { $0.isActive = false }
         baselineConstraints.forEach { $0.isActive = true }
     }
 
-    func setupAvailableBounds() {
+    @objc func setupAvailableBounds() {
         // Abbreviate if the instructions do not fit on one line
         primaryLabel.availableBounds = { [unowned self] in
             // Available width H:|-padding-maneuverView-padding-availableWidth-padding-|

MapboxNavigation/InstructionsCard+Font.swift

@@ -0,0 +1,16 @@
+/// :nodoc:
+enum CardFont: String {
+    case regular
+    case bold
+
+    static func create(_ type: CardFont, with size: CGFloat) -> UIFont! {
+        let font = type == .bold ? UIFont.boldSystemFont(ofSize: size) : UIFont.systemFont(ofSize: size)
+        return font.adjustedFont
+    }
+}
+
+/// :nodoc:
+struct CardFontType {
+    static let regular: String = "FontSystem-Regular"
+    static let bold: String =  "FontSystem-Bold"
+}

MapboxNavigation/InstructionsCardCell.swift

@@ -0,0 +1,53 @@
+import UIKit
+import MapboxDirections
+import MapboxCoreNavigation
+
+/// :nodoc:
+public class InstructionsCardCell: UICollectionViewCell {
+
+    public var container: InstructionsCardContainerView!
+    public var style: InstructionsCardStyle = DayInstructionsCardStyle()
+
+    override public init(frame: CGRect) {
+        super.init(frame: frame)
+        self.commonInit()
+    }
+
+    required public init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+        self.commonInit()
+    }
+
+    func commonInit() {
+        container = InstructionsCardContainerView()
+        configureLayer()
+    }
+
+    func configureLayer() {
+        backgroundColor = .clear
+        layer.shadowColor = UIColor.black.cgColor
+        layer.shadowOffset = CGSize(width: 1, height: 2)
+        layer.shadowRadius = 1
+        layer.shadowOpacity = 0.4
+    }
+
+    func setupConstraints() {
+        container.translatesAutoresizingMaskIntoConstraints = false
+        container.topAnchor.constraint(equalTo: topAnchor, constant: 2).isActive = true
+        container.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
+        container.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
+    }
+
+    override public func layoutSubviews() {
+        super.layoutSubviews()
+        /* TODO: Smoothen animation here. */
+    }
+
+    public func configure(for step: RouteStep, distance: CLLocationDistance) {
+        addSubview(container)
+        setupConstraints()
+        container.prepareLayout(for: style)
+        container.updateInstruction(for: step, distance: distance)
+    }
+}
+

MapboxNavigation/InstructionsCardCollectionDelegate.swift

@@ -0,0 +1,25 @@
+import MapboxDirections
+import MapboxCoreNavigation
+
+/// :nodoc:
+@objc public protocol InstructionsCardCollectionDelegate: InstructionsCardContainerViewDelegate {
+    /**
+     Called when previewing the steps on the current route.
+
+     Implementing this method will allow developers to move focus to the maneuver that corresponds to the step currently previewed.
+     - parameter instructionsCardCollection: The instructions card collection instance.
+     - parameter step: The step for the maneuver instruction in preview.
+     */
+    @objc(instructionsCardCollection:didPreviewStep:)
+    func instructionsCardCollection(_ instructionsCardCollection: InstructionsCardViewController, didPreview step: RouteStep)
+
+    /**
+     Offers the delegate the opportunity to customize the size of a prototype collection view cell per the associated trait collection.
+
+     - parameter instructionsCardCollection: The instructions card collection instance.
+     - parameter traitCollection: The traitCollection associated to the current container view controller.
+     - returns: The preferred size of the cards for each cell in the instructions card collection.
+     */
+    @objc(instructionsCardCollection:cardSizeForTraitCollection:)
+    optional func instructionsCardCollection(_ instructionsCardCollection: InstructionsCardViewController, cardSizeFor traitCollection: UITraitCollection) -> CGSize
+}