Improve `FloatingButton` styling. #4060

MaximAlien · 2022-08-09T15:28:01Z

Description

Remove shadow that is applied to FloatingButton to be aligned with other stylable views and to improve performance (shadow usage leads to such warning: The layer is using dynamic shadows which are expensive to render. If possible try setting 'shadowPath', or pre-rendering the shadow into an image and putting it under the layer.).
Add the ability apply type and cornerRadius while creating FloatingButton.

mapbox-github-ci-issues-public-1 · 2022-08-09T15:46:50Z

Breaking Changes in MapboxNavigation

Breaking API Changes

`FloatingButton`

removed source.lang.swift.decl.function.method.class: rounded(image:selectedImage:size:) in FloatingButton

MaximAlien · 2022-08-09T16:40:55Z

Example/ViewController.swift

@@ -603,6 +604,7 @@ class ViewController: UIViewController {
                                                                                   animations: {
                navigationViewController.navigationView.wayNameView.alpha = 1.0
                navigationViewController.navigationView.floatingStackView.alpha = 1.0
+                navigationViewController.navigationView.speedLimitView.alpha = 1.0


Just improves overall animation when presenting and dismissing NavigationViewController.

Is this compatible with SpeedLimitView’s built-in behavior to hide when there’s no content and to blink when the speed limit updates? The blinking operates on the view’s layer’s opacity.

mapbox-navigation-ios/Sources/MapboxNavigation/SpeedLimitView.swift

Lines 114 to 121 in 793a34f

func update() {

let wasHidden = isHidden

isHidden = !canDraw

setNeedsDisplay()

if canDraw && !wasHidden {

blinkIn()

}

}

Yes, I did a couple of tests and SpeedLimitView blinking occurs as expected whenever speed limit is changed (after showing or dismissing NavigationViewController).

MaximAlien · 2022-08-09T17:00:28Z

Sources/MapboxNavigation/NavigationView.swift

@@ -125,10 +118,6 @@ open class NavigationView: UIView {
        return stackView
    }()

-    lazy var overviewButton = FloatingButton.rounded(image: Images.overview)


IMHO these floating buttons should not be in NavigationView anymore as it can be used not only in active navigation.

Should we then move its management (showing, hiding, etc.) to the view controller? Seems like an extra knowledge for the view, if it doesn't contain the buttons.

Also, could it be a breaking change for the users of NavigationView?

I do not consider this as a breaking change because all components are internal and not exposed to the user.

There is actually another ResumeButton that currently resides in NavigationView, I haven't made any changes to it in scope of this PR, but it'd make sense to move it outside of NavigationView as well, because it's only active-navigation related UI component, and NavigationView is meant to be used in free-drive as well.

The reason I keep it here is because it's likely to be removed/deprecated altogether to match Android behavior.

Updated style:

mapbox-github-ci-issues-public-1 · 2022-08-09T17:10:23Z

Breaking Changes in MapboxNavigation

Breaking API Changes

`FloatingButton`

removed source.lang.swift.decl.function.method.class: rounded(image:selectedImage:size:) in FloatingButton

MaximAlien · 2022-08-10T03:11:26Z

Sources/MapboxNavigation/NavigationView.swift

@@ -44,13 +44,6 @@ open class NavigationView: UIView {
        static let buttonSpacing: CGFloat = 8.0
    }

-    private enum Images {


Was moved to UIImage extension.

1ec5 · 2022-08-10T19:14:24Z

Example/ViewController.swift

@@ -603,6 +604,7 @@ class ViewController: UIViewController {
                                                                                   animations: {
                navigationViewController.navigationView.wayNameView.alpha = 1.0
                navigationViewController.navigationView.floatingStackView.alpha = 1.0
+                navigationViewController.navigationView.speedLimitView.alpha = 1.0


Is this compatible with SpeedLimitView’s built-in behavior to hide when there’s no content and to blink when the speed limit updates? The blinking operates on the view’s layer’s opacity.

mapbox-navigation-ios/Sources/MapboxNavigation/SpeedLimitView.swift

Lines 114 to 121 in 793a34f

func update() {

let wasHidden = isHidden

isHidden = !canDraw

setNeedsDisplay()

if canDraw && !wasHidden {

blinkIn()

}

}

1ec5 · 2022-08-10T19:17:14Z

Sources/MapboxNavigation/Style.swift

+    class var defaultBorderWidth: CGFloat {
+        1 / UIScreen.main.scale
+    }


The original purpose of the shadow was to ensure contrast with a map background that could be the exact same color. A border can accomplish the same contrast, though we should do some field-testing to verify that the border is thick and dark enough to make the button discernible in a sunny, washed-out lighting condition.

chezzdev · 2022-08-11T10:55:52Z

Sources/MapboxNavigation/FloatingButton.swift

        button.translatesAutoresizingMaskIntoConstraints = false
        button.constrainedSize = size
-        button.setImage(image, for: .normal)
-        if let selected = selectedImage { button.setImage(selected, for: .selected) }
-        button.applyDefaultCornerRadiusShadow(cornerRadius: size.width / 2)


This is removing shadow completely, right? Would users expect that?

This is a tradeoff for performance as noted above. I think it could look like an intentional design change, as opposed to a bug – not dissimilar to changes in Apple software over the years. But the main thing is to make sure the border is sufficiently discernible.

I think two major reasons for this change is consistency and only partly performance. Previously we've shown shadow, border or no border in views where consistency is expected (top and bottom banners, resume button, floating button). With shadow removal we make look more consistent and customizable to bring new UI updates for next iteration of drop-in.

chezzdev · 2022-08-11T14:11:12Z

Sources/MapboxNavigation/NavigationView.swift

@@ -125,10 +118,6 @@ open class NavigationView: UIView {
        return stackView
    }()

-    lazy var overviewButton = FloatingButton.rounded(image: Images.overview)


Should we then move its management (showing, hiding, etc.) to the view controller? Seems like an extra knowledge for the view, if it doesn't contain the buttons.

Also, could it be a breaking change for the users of NavigationView?

mapbox-github-ci-issues-public-1 · 2022-09-06T21:25:50Z

Breaking Changes in MapboxNavigation

Breaking API Changes

`FloatingButton`

removed source.lang.swift.decl.function.method.class: rounded(image:selectedImage:size:) in FloatingButton

mapbox-github-ci-issues-public-1 · 2022-09-06T22:33:37Z

Breaking Changes in MapboxNavigation

Breaking API Changes

`FloatingButton`

removed source.lang.swift.decl.function.method.class: rounded(image:selectedImage:size:) in FloatingButton

mapbox-github-ci-issues-public-1 · 2022-09-06T23:21:08Z

Breaking Changes in MapboxNavigation

Breaking API Changes

`FloatingButton`

removed source.lang.swift.decl.function.method.class: rounded(image:selectedImage:size:) in FloatingButton

…ling that is similar to other UI components.

mapbox-github-ci-issues-public-1 · 2022-09-14T19:38:20Z

Breaking Changes in MapboxNavigation

Breaking API Changes

`FloatingButton`

removed source.lang.swift.decl.function.method.class: rounded(image:selectedImage:size:) in FloatingButton

1ec5

Let’s mention the border removal in the changelog. Even though it doesn’t affect the public API, it is a user-visible change that may necessitate tweaks to some custom UI styles. A public FloatingButton method has also been renamed to add the type and cornerRadius parameters.

MaximAlien added the UI Work related to visual components, Android Auto, Camera, 3D, voice, etc. label Aug 9, 2022

MaximAlien added this to the v2.8 milestone Aug 9, 2022

MaximAlien requested a review from a team August 9, 2022 15:28

MaximAlien self-assigned this Aug 9, 2022

MaximAlien marked this pull request as draft August 9, 2022 15:28

MaximAlien commented Aug 9, 2022

View reviewed changes

MaximAlien marked this pull request as ready for review August 9, 2022 16:58

MaximAlien commented Aug 9, 2022

View reviewed changes

MaximAlien commented Aug 10, 2022

View reviewed changes

1ec5 reviewed Aug 10, 2022

View reviewed changes

chezzdev reviewed Aug 11, 2022

View reviewed changes

MaximAlien force-pushed the maxim/make-floating-button-customizable branch from bfafdfd to 7064152 Compare August 25, 2022 00:48

MaximAlien force-pushed the maxim/make-floating-button-customizable branch from 7064152 to 53ac7cd Compare September 6, 2022 21:11

MaximAlien force-pushed the main branch from 308de3f to 604678c Compare September 6, 2022 22:13

MaximAlien force-pushed the maxim/make-floating-button-customizable branch from 53ac7cd to 0608050 Compare September 6, 2022 22:19

MaximAlien force-pushed the maxim/make-floating-button-customizable branch from 0608050 to 9f56ffc Compare September 6, 2022 23:08

MaximAlien requested review from a team, 1ec5 and chezzdev September 6, 2022 23:36

MaximAlien force-pushed the maxim/make-floating-button-customizable branch from 9f56ffc to 1eb5f68 Compare September 13, 2022 23:56

Improve FloatingButton styling by removing shadow and introducing sty…

8646e78

…ling that is similar to other UI components.

MaximAlien force-pushed the maxim/make-floating-button-customizable branch from 1eb5f68 to 8646e78 Compare September 14, 2022 19:23

1ec5 approved these changes Sep 14, 2022

View reviewed changes

MaximAlien removed this from the v2.8 milestone Sep 15, 2022

MaximAlien added this to the v2.9 milestone Sep 15, 2022

Update changelog.

62b4f51

MaximAlien merged commit c2d6233 into main Sep 15, 2022

MaximAlien deleted the maxim/make-floating-button-customizable branch September 15, 2022 00:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve `FloatingButton` styling. #4060

Improve `FloatingButton` styling. #4060

MaximAlien commented Aug 9, 2022 •

edited

mapbox-github-ci-issues-public-1 bot commented Aug 9, 2022

MaximAlien Aug 9, 2022 •

edited

1ec5 Aug 10, 2022

MaximAlien Sep 6, 2022

MaximAlien Aug 9, 2022 •

edited

chezzdev Aug 11, 2022

MaximAlien Sep 6, 2022

MaximAlien Sep 6, 2022

MaximAlien Sep 9, 2022

mapbox-github-ci-issues-public-1 bot commented Aug 9, 2022

MaximAlien Aug 10, 2022

1ec5 Aug 10, 2022

1ec5 Aug 10, 2022

chezzdev Aug 11, 2022

1ec5 Aug 16, 2022

MaximAlien Sep 6, 2022

chezzdev Aug 11, 2022

mapbox-github-ci-issues-public-1 bot commented Sep 6, 2022

mapbox-github-ci-issues-public-1 bot commented Sep 6, 2022

mapbox-github-ci-issues-public-1 bot commented Sep 6, 2022

mapbox-github-ci-issues-public-1 bot commented Sep 14, 2022

1ec5 left a comment •

edited

	func update() {
	let wasHidden = isHidden
	isHidden = !canDraw
	setNeedsDisplay()
	if canDraw && !wasHidden {
	blinkIn()
	}
	}

Improve FloatingButton styling. #4060

Improve FloatingButton styling. #4060

Conversation

MaximAlien commented Aug 9, 2022 • edited

Description

mapbox-github-ci-issues-public-1 bot commented Aug 9, 2022

Breaking Changes in MapboxNavigation

Breaking API Changes

FloatingButton

MaximAlien Aug 9, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MaximAlien Aug 9, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mapbox-github-ci-issues-public-1 bot commented Aug 9, 2022

Breaking Changes in MapboxNavigation

Breaking API Changes

FloatingButton

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mapbox-github-ci-issues-public-1 bot commented Sep 6, 2022

Breaking Changes in MapboxNavigation

Breaking API Changes

FloatingButton

mapbox-github-ci-issues-public-1 bot commented Sep 6, 2022

Breaking Changes in MapboxNavigation

Breaking API Changes

FloatingButton

mapbox-github-ci-issues-public-1 bot commented Sep 6, 2022

Breaking Changes in MapboxNavigation

Breaking API Changes

FloatingButton

mapbox-github-ci-issues-public-1 bot commented Sep 14, 2022

Breaking Changes in MapboxNavigation

Breaking API Changes

FloatingButton

1ec5 left a comment • edited

Choose a reason for hiding this comment

Improve `FloatingButton` styling. #4060

Improve `FloatingButton` styling. #4060

MaximAlien commented Aug 9, 2022 •

edited

`FloatingButton`

MaximAlien Aug 9, 2022 •

edited

MaximAlien Aug 9, 2022 •

edited

`FloatingButton`

`FloatingButton`

`FloatingButton`

`FloatingButton`

`FloatingButton`

1ec5 left a comment •

edited