Improve layout in landscape orientation

[1ec5]

NavigationViewController is laid out inefficiently when the device is in landscape orientation. Each banner takes up the entire width of the screen, revealing plenty of whitespace, while taking up valuable vertical screen real estate. With enough banners visible (lanes, “then”, simulation), the user puck overlaps the banners, and the floating action buttons at right overlap the bottom bar, obscuring the exit button.

Many navigation applications, including Apple Maps, switch to a two-column layout in landscape orientation, with the left column containing the banners and the bottom bar. With this layout, the banner gets less horizontal space but more vertical space, which can be used for line wrapping or for displaying additional information like incidents.

Previously: #726.

/cc @mapbox/navigation-ios

[bsudekum]

I'm actually unsure how the lanes view and the then banner are both showing up in this pr, as we only show the then banner if the lanes view is hidden

mapbox-navigation-ios/MapboxNavigation/RouteMapViewController.swift

Lines 276 to 279 in c45d938

	lanesView.update(for: routeController.routeProgress.currentLegProgress)
	if lanesView.isHidden {
	nextBannerView.update(for: routeController.routeProgress)
	}

[1ec5]

For the original report above, I was simulating approximately this route, and the stacked views did reproduce reliably. There’s a bit of a gap between these two checks:

mapbox-navigation-ios/MapboxNavigation/NextBannerView.swift

Lines 78 to 82 in c45d938

	let durationForNext = RouteControllerHighAlertInterval * RouteControllerLinkedInstructionBufferMultiplier
	guard routeProgress.currentLegProgress.currentStepProgress.durationRemaining <= durationForNext, upcomingStep.expectedTravelTime <= durationForNext else {
	return false
	}

mapbox-navigation-ios/MapboxNavigation/LanesView.swift

Line 78 in c45d938

durationRemaining < RouteControllerMediumAlertInterval {

So one view showed up first, then the other, as I approached the intersection.

[bsudekum]

Posting UI without any sub instructions:

[1ec5]

Note that the screenshot in #1139 (comment) was taken on an iPhone 8, while the screenshot in #1139 (comment) was taken on an iPhone X. (You can tell because of the extra padding on the right to make room for the notch.)

[brsbl-zz]

cc @cjballard would love your input here more generally, but also I think it's important to think about landscape mode as we are sprinting on redesigning the UI.

[Cjballard-zz]

@brsbl Was thinking about this as well while doing some test drives in landscape mode. I liked the Apple & Waze two-column approach a little better because it consolidated info neatly and reserved more map space.

But more generally interested in how we can rectify information dead zones where we rarely present any information and instruction in landscape mode, and split-screen is just one solution.

[1ec5]

By the way, we implemented a two-column layout as a matter of course in CarPlay. (We didn’t have a choice, and it looks good!)

[1ec5]

mapbox/mapbox-gl-native#14664 adjusts the map’s vanishing point to account for edge padding, which unblocks the sort of landscape layout seen in CarPlay. (#2134 updates the CarPlay support code to take advantage of this improvement to the map SDK.)

[MaximAlien]

Moving to v2.2 for now. There is a low chance that we'll be able to tackle this in v2.1.