iOS 导航栏透明，变色动画

作者: Mokyz | 来源:发表于2016-01-20 08:48 被阅读17789次

iOS导航栏NavigationBar设置透明，以及添加变色的动画，类似知乎日报的导航栏。

知乎日报

透明

只需设置NavigationBar的背景图片为一张空图片即可

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];

NavigationBar下边有一个ShadowImage，也可以通过设置空的UIImage设置透明。

[self.navigationController.navigationBar setShadowImage:[UIImage new]];

变色动画

在NavigationBar下插入一个view，执行动画改变这个view的透明度即可。

CGRect frame = self.navigationController.navigationBar.frame;
alphaView = [[UIView alloc] initWithFrame:CGRectMake(0, -20, frame.size.width, frame.size.height+20)];
alphaView.backgroundColor = [UIColor blueColor];
alphaView.userInteractionEnabled = NO;
[self.navigationController.navigationBar insertSubview: alphaView atIndex:0];

就这么简单！

网友评论

lanmoyingsheng:现在不行了
会有默认的_UIBarBackground为白色挡住，必须设置为透明或者隐藏
可以参考 iOS导航栏全透明遇到的UIBarBackground问题
https://www.jianshu.com/p/5d0ed9dae24d

lanmoyingsheng:搞错了，是由于设置导航栏isTranslucent为false的原因

我唔知啊:谢谢，解决我的问题。

Felix灬泡泡:设置了[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];后，push后的页面也跟着透明了，应该怎么弄呢？

11eddd582230:太暴力了

Caiflower:UIBarMetricsCompact 这个应该换成UIBarMetricsDefault

Eric_1024:@Caiflower 这个对的

cloud_sky_z:导航栏黑了是什么情况

351e3f5fd77e:好文章

a_victor:代码在哪里？

c0d06aede7e3:这种跳到下一个界面也是透明的，我原来也这么弄过，单个界面可以，但是需要跳转我就换了其他方法

上冬十二:@risingTan 同问，你换成什么了

Yanni_L:@risingTan 那你换成什么样的方法了

Apples8023:楼主，有没有swift版本的啊，跪求啊

loghm:我设置变成透明之后，还是有黑线怎么办？

d15eb9289fc7:同求，还有最后一块代码，没有用。。

dapeng199:为何添加了这句代码以后黑色线还存在，请大神指教？

gh_coder:@tangw 设置阴影[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]]

dong_liang:这么设置后push后导航栏还是透明的,怎么改成push后变为不透明的啊

UItachi:navigation bar设置为透明，应该会改变self.view.frame的改变。

奋斗的DevAmos:@UItachi 不会改变frame的大小，只有在bar隐藏的时候才会改变frame的大小

480a52903ce5:^_^以吸收

JanzTam:虽然实现过程有点那个啥，但是思路挺好的

溪枫狼:必须要把这个view的交互关掉，不然push到下一界面后导航栏的按钮不会响应事件，被这行代码坑了一个上午，都没想明白为什么要这么做，而且只能插在index=0的位置，插在1的位置就会出问题。。还有种思路是在状态栏下面加个20高度的view，然后跟bar一起设置颜色。

maretell:@溪枫狼有demo吗?

vernepung:@溪枫狼我的做法是把这个你添加的View临时记下俩，Push或者Pop的时候（viewwilldisappear）的时候从navigationBar中remove，并把Nav还原为App的默认样式。

Mokyz:@溪枫狼对，要把交互关掉，感谢提醒。还有bar的下边还有一张阴影图片，也可以设置一张空图去掉。

389c20d5a244:不错，方法很简单实用，在我的思路里都是隐藏，然后创建一个view。

Mokyz:@WzxJiang 😊能实现效果就行，嘿嘿

lanmoyingsheng:现在不行了
会有默认的_UIBarBackground为白色挡住，必须设置为透明或者隐藏
可以参考 iOS导航栏全透明遇到的UIBarBackground问题
https://www.jianshu.com/p/5d0ed9dae24d
lanmoyingsheng:搞错了，是由于设置导航栏isTranslucent为false的原因
我唔知啊:谢谢，解决我的问题。
Felix灬泡泡:设置了[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];后，push后的页面也跟着透明了，应该怎么弄呢？
11eddd582230:太暴力了
Caiflower:UIBarMetricsCompact 这个应该换成UIBarMetricsDefault
Eric_1024:@Caiflower 这个对的
cloud_sky_z:导航栏黑了是什么情况
351e3f5fd77e:好文章
a_victor:代码在哪里？
c0d06aede7e3:这种跳到下一个界面也是透明的，我原来也这么弄过，单个界面可以，但是需要跳转我就换了其他方法
上冬十二:@risingTan 同问，你换成什么了
Yanni_L:@risingTan 那你换成什么样的方法了
Apples8023:楼主，有没有swift版本的啊，跪求啊
loghm:我设置变成透明之后，还是有黑线怎么办？
d15eb9289fc7:同求，还有最后一块代码，没有用。。
dapeng199:为何添加了这句代码以后黑色线还存在，请大神指教？
gh_coder:@tangw 设置阴影[self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]]
dong_liang:这么设置后push后导航栏还是透明的,怎么改成push后变为不透明的啊
UItachi:navigation bar设置为透明，应该会改变self.view.frame的改变。
奋斗的DevAmos:@UItachi 不会改变frame的大小，只有在bar隐藏的时候才会改变frame的大小
480a52903ce5:^_^以吸收
JanzTam:虽然实现过程有点那个啥，但是思路挺好的
溪枫狼:必须要把这个view的交互关掉，不然push到下一界面后导航栏的按钮不会响应事件，被这行代码坑了一个上午，都没想明白为什么要这么做，而且只能插在index=0的位置，插在1的位置就会出问题。。还有种思路是在状态栏下面加个20高度的view，然后跟bar一起设置颜色。
maretell:@溪枫狼有demo吗?
vernepung:@溪枫狼我的做法是把这个你添加的View临时记下俩，Push或者Pop的时候（viewwilldisappear）的时候从navigationBar中remove，并把Nav还原为App的默认样式。
Mokyz:@溪枫狼对，要把交互关掉，感谢提醒。还有bar的下边还有一张阴影图片，也可以设置一张空图去掉。
389c20d5a244:不错，方法很简单实用，在我的思路里都是隐藏，然后创建一个view。
Mokyz:@WzxJiang 😊能实现效果就行，嘿嘿

iOS 导航栏透明，变色动画

透明

变色动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

IOS开发

iOS开发系列

iOS开发

别人的iOS精华

iOS 开发

iOS

iOS开发技巧

iOS Blog