在透明导航栏到半透明之间转换 [英] Transitioning between transparent navigation bar to translucent

问题描述

在 Apple 最近发布的 Remote 应用程序中，我注意到导航栏的行为方式是独一无二的，我无法重现它.弹出 Now Playing 视图控制器时，Now Playing 视图控制器的导航栏保持透明，库视图控制器的导航栏也保持半透明(屏幕截图 1).我试图弄清楚他们是使用两个导航控制器还是只使用一个.就我个人而言，我觉得他们只使用了一个，原因有两个:(1)启用了交互式弹出手势；(2) 当您按下库视图控制器中的正在播放"按钮时，就在正在播放的屏幕完成推送视图控制器"动画之前，导航栏变得透明(屏幕截图 2).这是我在推送视图控制器(将导航栏设置为透明)时遇到的行为.所以我的问题是:Apple 如何将两个视图控制器的两个导航栏都呈现为单独的(如屏幕截图 1 所示)，即使是栏按钮、导航标题等......在切换时也是 100% 的不透明度(通常在推动/弹出前一个视图控制器的按钮和标题会随着新控制器的被推动而消失).我已经尝试在两个视图控制器中使用 viewDidAppear 和 viewWillAppear 中的条形色调颜色，但无法重现相同的行为，并且无法防止条形按钮褪色.

In Apple's recently released Remote app I noticed the way in which the navigation bar behaves is unique and I haven't been able reproduce it. When popping the Now Playing view controller the navigation bar remains transparent for the Now Playing view controller and the navigation bar for the library view controller also stays translucent (Screenshot 1). I'm trying to figure out if they are using two navigation controllers or only one. Personally I feel they're using just one for two reasons (1) the interactive pop gesture is enabled; (2) when you press the 'Now Playing' button in the library view controller, just before the now playing screen has finished 'push view controller' animation the navigation bar becomes transparent (Screenshot 2). This is the behaviour I experience when pushing my view controller (which sets the navigation bar to transparent). So my question is: How does Apple present both navigation bars of the two view controllers as if they were individual (as with Screenshot 1), even the bar buttons, navigation title etc... are 100% in opacity when switching (usually when pushing/popping the buttons and titles of the previous view controller fade as the new controller is being pushed). I've tried playing around with the bar tint colour in viewDidAppear and viewWillAppear in both view controllers but cannot reproduce the same behaviour, and cannot prevent the bar buttons from fading.

天哪，我希望我已经很好地解释了这一点，我只是想一想就感到困惑！

Gosh I hope I've explained this well, I get confused just thinking about it!

屏幕截图 1(弹出):

Screenshot 1 (Popping):

屏幕截图 2(推送):

Screenshot 2 (Pushing):

推荐答案

我刚刚下载了应用程序以确保.使用了两个不同的导航栏.您可以使用交互式弹出手势看到这一点.注意底部视图控制器上的导航栏是如何滑入和滑出的.在正常的推送和弹出转换期间，导航项只是在现有栏上淡入和淡出，而栏是静止的.这是在推送正在播放的视图控制器之前发生的情况.

I just downloaded the application to make sure. Two different navigation bars are used. You can see this by using the interactive pop gesture. Notice how the navigation bar on the bottom view controller slides in and out. During normal push and pop transitions, the navigation items just fade in and out on the existing bar, while the bar is stationary. This is what happens up until the point where the now playing view controller is pushed.

如果你快速看，在正在播放的视图控制器动画期间，你可以看到底部导航栏消失了.

If you look quickly, during the now playing view controller animation, you can see the bottom navigation bar disappear.

根据我对 UIKit 行为的经验以及我在应用中看到的情况，我认为会发生以下情况:

From my experience with UIKit behavior and what I see in the app, here is what I think happens:

album_vc = 底部，列表视图控制器nowplaying_vc = 顶视图控制器

album_vc = the bottom, list view controller nowplaying_vc = the top view controller

• 在 nowplaying_vc 的 viewWillAppear:

• 使用 [self.navigationController setNavigationBarHidden:YES animated:YES]; 将导航栏设置为隐藏.由于这是在动画块中，这将使导航栏在推送动画期间滑出.
• Set [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent; 很确定，因为注意状态栏样式的过渡没有动画.它只是变成白色.

• Set the navigation bar to hidden using [self.navigationController setNavigationBarHidden:YES animated:YES];. Since this is in animation block, this will make the navigation bar slide out during the push animation.
• Set [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent; Pretty sure about this, because notice there is no animation in the transition of the status bar styles. It just becomes white.

在 nowplaying_vc 的 viewWillDisappear:

• 使用 [self.navigationController setNavigationBarHidden:NO animated:YES]; 将导航栏设置为显示.由于这是在动画块中，这将使导航栏在弹出动画期间滑入.
• 设置 [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault; 再次注意，在交互式弹出手势期间，状态栏只是在没有动画的情况下发生变化.

• Set the navigation bar to shown using [self.navigationController setNavigationBarHidden:NO animated:YES];. Since this is in animation block, this will make the navigation bar slide in during the pop animation.
• Set [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault; Again, notice how during interactive pop gesture, the status bar just changes with no animation.

要实现nowplaying_vc导航栏的透明外观，可以使用空图片([UIImage alloc])和setBackgroundImage:forBarPosition:barMetrics:.

To achieve the transparent look of the navigation bar of nowplaying_vc, you can use an empty image ([UIImage alloc]) with setBackgroundImage:forBarPosition:barMetrics:.

由于应用程序不旋转，我们无法确定 nowplaying_vc 上的导航栏是另一个导航控制器的一部分，还是只是顶部位置为 的导航栏UIBarPositionTopAttached.据我们所知，那里甚至没有导航栏，只有一个后退 V 形图像视图(后退栏按钮由一个图像视图和一个按钮组成).

Since the application does not rotate, we can't be sure if the navigation bar on nowplaying_vc is part of another navigation controller or just a navigation bar on the top with a position of UIBarPositionTopAttached. For all we know, there isn't even a navigation bar there but just a back chevron image view (back bar button is comprised of an image view and a button).

我认为 viewWillAppear: 和 viewWillDisappear: 中的状态栏样式发生了变化，因为在交互式弹出手势期间存在不自然的感觉.我建议使用动画过渡，或者更好的是，使用新的基于视图控制器的状态栏样式，系统会自行对过渡进行动画处理.

I think the status bar style is changed in viewWillAppear: and viewWillDisappear: due to the unnatural feel there is during interactive pop gesture. I would recommend using an animated transition, or even better, use the new view controller-based status bar style, which the system animates transitions by itself.

现代 API 更新:

您应该使用 animateAlongsideTransition:completion: 或 animateAlongsideTransitionInView:animation:completion: API，而不是依赖 viewWillAppear: 和 viewWillDisappear:.

You should use the animateAlongsideTransition:completion: or animateAlongsideTransitionInView:animation:completion: API, rather than relying on the implicit animations of viewWillAppear: and viewWillDisappear:.

这篇关于在透明导航栏到半透明之间转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！