Photos of iOS 10 contacts in the navigation bar

Question

I want to create a view controller with the same animation of the Contacts application in iOS 10. When you scroll down the page, the contact photo goes in the middle of the navigation bar.

Is there an API in iOS 10 or is it a custom implementation?

Answer 1

Study

There are many methods that try to change the navigation bar. I spent many hours trying one by one:

• The official Apple Guide https://developer.apple.com/library/content/samplecode/NavBar/Introduction/Intro.html#//apple_ref/doc/uid/DTS40007418-Intro-DontLinkElementID_2 which only visually extends the navigation bar. In fact, put the second one under the panel and set the colors and lines so that they look like the second view is part of the panel. But it is not.
• Levelmoney made a nice lib for a custom navigator: https://github.com/Levelmoney/resizable-navigation-bar
• Another solution is to create your view, which will look like navbar (use the back color and shadow, as in the Apple example), and place it in the navigation bar as follows: self.navigationController!.navigationBar.addSubview(self.titleView!) However, this It looks great, it hides the elements of the navigation panel and the back button does not respond to a click. I could not do this work, although I tried different layers or added views forward / backward.

Resolution

So, in my opinion, the best solution (but not the clearest) is:

• Create your own custom view (XIB) that looks like the navigator itself - as in option 3. above. Include your own implementation of the back button, etc.
• Hide source navigator: self.navigationController!.isNavigationBarHidden = true in viewWillAppear(_ animated: Bool) . Also remember to return it to viewWillDisappear(_ animated: Bool)
• Place your own view on top of the screen. Not lower than the top layout guide, but actually on top of the screen. Your viewer underlines the status bar. Use the top mark of your view to match the contents of the status bar.
• Implement animation as they say in the scroll event of a UITableView

This solution requires your own “navigator” to look the same as your native one. However, unlike the navbar modification, this is likely to work in future versions of iOS.

Answer 2

The trick may be to make the navigation bar invisible. In the Simulated Metrics storyboard set → Top Bar = None (you can even avoid this).

In your view, the controller adds it to 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 have to create the animation while moving the uitableview / uiscrollview with the contact details, and here it depends on what you want to do ...

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