iOS 10联系人照片在导航栏上显示 [英] iOS 10 contacts photo goes on navigation bar

问题描述

我希望在iOS 10中使用相同的联系人应用动画构建一个视图控制器。
当您向下滚动页面时，联系人的照片会显示在导航栏的中间。

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.

iOS 10中有一个API或者是自定义实现吗？

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

推荐答案

研究

Research

尝试修改导航栏有很多技巧。我花了很多时间一个接一个地尝试：

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

1. Apple的官方教程
   https://developer.apple。 com / library / content / samplecode / NavBar / Introduction / Intro.html＃// apple_ref / doc / uid / DTS40007418-Intro-DontLinkElementID_2
   只能直观地扩展导航栏。实际上，将第二个
   视图放在条形图下并将颜色和线条设置为看起来像
   第二个视图是条形图的一部分。但它不是。


2. Levelmoney为自定义导航栏做了很好的lib： https://github.com/Levelmoney/resizable-navigation-bar


3. 另一个解决方案是创建您的视图，它看起来像导航栏（使用背面颜色和Apple的例子中的阴影一样，并将其放入导航栏中，如下所示： self.navigationController！.navigationBar.addSubview（self.titleView！）但是这看起来不错，它隐藏了导航栏元素，后退按钮不响应点击。虽然我尝试了不同的图层或将视图带到前/后，但我无法完成这项工作。

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.

分辨率

因此，根据我的观点，最好的解决方案（但不是最清晰的解决方案）是：

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

1. 创建自己的自定义视图（XIB），看起来像navbar iteself - 就像上面的选项3一样。包括你自己的后退按钮实现等等。


2. 隐藏原始导航栏： self.navigationController！.isNavigationBarHidden = true in viewWillAppear（_ animated：Bool）。另外不要忘记将其带回 viewWillDisappear（_ animated：Bool）


3. 将您自己的视图放在屏幕顶部。不在顶部布局指南的下方，但实际上在屏幕上方。您的视图vill undercolor状态栏。使用视图的上边距来填充状态栏下的内容。


4. 像在 UITableView滚动事件

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

此解决方案要求您维护自己的导航栏以查看和原生的一样。然而，与导航栏修改不同，这可能适用于iOS的未来版本。

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.

这篇关于iOS 10联系人照片在导航栏上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！