透明导航栏之间的过渡到半透明 [英] Transitioning between transparent navigation bar to translucent

查看:191
本文介绍了透明导航栏之间的过渡到半透明的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在Apple最近发布的Remote应用程序中,我注意到导航栏的行为方式是独特的,我无法重现它。当弹出正在播放视图控制器时,导航栏对于正在播放视图控制器保持透明,并且库视图控制器的导航栏也保持半透明(屏幕截图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我希望我已经解释得很好,我只是想着它而感到困惑!

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


  • On nowplaying_vc 's viewWillAppear:


  • 使用将导航栏设置为隐藏[self.navigationController setNavigationBarHidden:YES animated: YES]; 。由于这是在动画块中,这将使推导动画期间导航栏滑出。

  • 设置 [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.

On nowplaying_vc 's 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:完成: 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆