Navigation Navigation Bar Title

Question

In an application called "Luvocracy", the name of the navigation bar changes when the user goes over the screen. The old name is being pushed up while the new one is moving in. I don’t have a video right now, but here are a few screenshots:

https://www.dropbox.com/s/sns0bsxkdv7pw3l/Photo%20Apr%2008%2C%2011%2001%2005%20AM.png

https://www.dropbox.com/s/ys9a49u3dyxrlcm/Photo%20Apr%2008%2C%2011%2001%2009%20AM.png

https://www.dropbox.com/s/dlcfvfvqqov3ag7/Photo%20Apr%2008%2C%2011%2001%2013%20AM.png

How can I animate or go to the new title of the navigation bar as shown?

Edit: The app is no longer available in the app store, so I can’t upload a video of this action.

Answer 1

You can animate the name change with CATransition ... however, since the title itself is a private property in the navigation bar, you first need to create a custom shortcut and attach it to the navigation element.

Set the title label (this will override the default navigation bar name):

UILabel *titleLabelView = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 44.0f) /* auto-sized anyway */]; titleLabelView.backgroundColor = [UIColor clearColor]; titleLabelView.textAlignment = NSTextAlignmentCenter; titleLabelView.textColor = [UIColor blackColor]; titleLabelView.font = [UIFont systemFontOfSize:16.0f]; titleLabelView.adjustsFontSizeToFitWidth = YES; titleLabelView.text = @"@cracy123"; self.navigationItem.titleView = titleLabelView; 

Then, whenever you want to animate the name change (suppose the scroll delegate action has been viewed), add a CAAnimation and presto level:

 CATransition *animation = [CATransition animation]; animation.duration = 1.0; animation.type = kCATransitionPush; animation.subtype = kCATransitionFromTop; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [self.navigationItem.titleView.layer addAnimation:animation forKey:@"changeTitle"]; ((UILabel*)self.navigationItem.titleView).text = @"JACOB K"; 

You can obviously change the properties of the CATransition animation to get the effect you need, but it will give you a push-up effect.

Answer 2

Just because there was no Swift answer, here's the answer from Gavin's Quick Answer:

Custom Title Label Setting:

 let titleLabelView = UILabel.init(frame: CGRect(x: 0, y: 0, width: 0, height: 44)) titleLabelView.backgroundColor = UIColor.clearColor() titleLabelView.textAlignment = .Center // this next line picks up the UINavBar tint color instead of fixing it to a particular one as in Gavin solution titleLabelView.textColor = UINavigationBar.appearance().tintColor titleLabelView.font = UIFont.boldSystemFontOfSize(16.0) titleLabelView.text = "Old Title" self.navigationItem.titleView = titleLabelView 

And here is the header animation code:

 let titleAnimation = CATransition() titleAnimation.duration = 0.5 titleAnimation.type = kCATransitionPush titleAnimation.subtype = kCATransitionFromTop titleAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) navigationItem.titleView!.layer.addAnimation(titleAnimation, forKey: "changeTitle") (navigationItem.titleView as! UILabel).text = "New Title" // I added this to autosize the title after setting new text (navigationItem.titleView as! UILabel).sizeToFit() 

Answer 3

It was a great answer, but it took me some clarification to get everything right.

So the general idea is that you have text in the middle of your scrollView and when the user scrolls past that text, then you want it to become a new heading. Also, when you scroll back, you want it to go back to the default name again.

So, using the code that Gix sent, now converted to Swift 3, is how you do it.

Add these variables to the top of your viewController

 var didChangeTitle = false let defaultTitle = "Default Title" let animateUp: CATransition = { let animation = CATransition() animation.duration = 0.5 animation.type = kCATransitionPush animation.subtype = kCATransitionFromTop animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) return animation }() let animateDown: CATransition = { let animation = CATransition() animation.duration = 0.5 animation.type = kCATransitionPush animation.subtype = kCATransitionFromBottom animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseInEaseOut) return animation }() 

In your viewDidLoad add this code to set the default title.

 let titleLabelView = UILabel.init(frame: CGRect(x: 0, y: 0, width: 200, height: 44)) titleLabelView.backgroundColor = .clear titleLabelView.textAlignment = .center titleLabelView.textColor = UINavigationBar.appearance().tintColor titleLabelView.font = UIFont.boldSystemFont(ofSize: 16) titleLabelView.text = defaultTitle self.navigationItem.titleView = titleLabelView 

Now you add the code to the scrollView delegate function:

 extension MyViewController: UIScrollViewDelegate { func scrollViewDidScroll(_ scrollView: UIScrollView) { if scrollView.contentOffset.y >= (labelName.frame.origin.y + labelName.frame.height) && !didChangeTitle { if let label = navigationItem.titleView as? UILabel { label.layer.add(animateUp, forKey: "changeTitle") label.text = labelName.text } didChangeTitle = true } else if scrollView.contentOffset.y < labelName.frame.origin.y && didChangeTitle { if let label = navigationItem.titleView as? UILabel { label.layer.add(animateDown, forKey: "changeTitle") label.text = defaultTitle } didChangeTitle = false } } } 

"labelName" var is the label in your scroll containing your future title.

Answer 4

This is an example:

 UILabel *titleLabelView = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 100.0f) /* auto-sized anyway */]; titleLabelView.backgroundColor = [UIColor clearColor]; titleLabelView.textAlignment = NSTextAlignmentCenter; 

(and other applications)

 self.navigationItem.titleView = LabelView; 

I do not understand your question very well!