Kyle
Kyle

Reputation: 4449

Increase UINavigationBar title font size on scroll

I saw this effect today where the navigation bar title seemingly starts within the view, then shrinks and moves upwards into the navigation bar's title as you scroll the page, it then reverses to its original state when scrolled back to the top.

SoulCycle initial view SoulCycle intermediate view SoulCycle final view

Does anyone have any insight on how this is done? Is a navigation bar used at all, or is it being mocked using a UIView that shrinks in height and the background colour darkens? Perhaps the title is a label converted to a UIImage and scaled down rather than the font size decreasing?

Just speculating on possible techniques.

Would love to get some opinions on this. Thanks in advance.

Upvotes: 2

Views: 113

Answers (1)

Cole
Cole

Reputation: 2646

Yes, You can change the size of the font and the origin of the Navigation Bar in accordance with your gesture recognizer.

navigationBar.frame.origin.y = -10

will shift the Navigation bar up by 10 points. The font can be changed using

if let font = UIFont(name: "Lato-Light.ttf", size: 34) {
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: font]
}

This format is because using a forced unwrap ! will crash the app with UIFont

In this context, font can be a variable where you call the normal init with same typeface and different size.

These two operations should be performed whenever the gesture recognizer updates its value or scroll position. You may or may not have to redraw the view, however.

Upvotes: 1

Related Questions