iOS 10 contacts photo goes on navigation bar

Question

I want build a view controller with the same animation of Contacts app in iOS 10. When you scroll down the page the contact's photo goes in the middle of navigation bar.

There is an API in iOS 10 or is a custom implementation?

Answer 1

Research

There are many techniques trying to modify the navbar. I have spent a lot of hours by trying one after another:

1. Apple's official tutorial https://developer.apple.com/library/content/samplecode/NavBar/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007418-Intro-DontLinkElementID_2 which only visually extends the navbar. In fact, the put the second view under the bar and set the colors and lines to the seem like the second view is part of the bar. But it is NOT.
2. Levelmoney made nice lib for custom navbar: https://github.com/Levelmoney/resizable-navigation-bar
3. Another solution is to create your view, which will look like the navbar (use back color and shadow like in the Apple's example), and put it into the navbar like this: self.navigationController!.navigationBar.addSubview(self.titleView!) However this looks great, it hides the navbar elements and the back button does not respond to click. I couldn't make this work eventhough I tried different layers or bringing views to front/back.

Resolution

So, by my opinion, the best solution (but not the clearest one) is to:

1. Create your own custom view (XIB) which looks like the navbar iteself - like in option 3. above. Include your own implementation of back button and so on.
2. Hide the original navbar: self.navigationController!.isNavigationBarHidden = true in viewWillAppear(_ animated: Bool). Also do not forget to bring it back in viewWillDisappear(_ animated: Bool)
3. Put your own view on top of the screen. Not below the Top Layout Guide, but really on top of screen. Your view vill undercolor the status bar. Use your view's top margin to fit the content under the status bar.
4. Implement the animation like they say in UITableView Scroll event

This solution requires you to maintain your own "navbar" to look the same like the native one. Nevertheless, unlike the navbar modification, this would probably work in the future versions of iOS.

Answer 2

A trick could be to make the navigation bar invisible. In the storyboard set Simulated Metrics -> Top Bar = None (you could even avoid it anyway).

In your view controller add it in viewDidLoad:

Swift 3.0

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true

Objective-C

    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;

Then you should create an animation when sliding the uitableview/uiscrollview with the detail of the contact and here it depends on what you want to do...

Edit: Here you can find an example on the simulator... sorry for the ugly mockup :D