navigationbar在转场切换时分别使用不同的背景色

类似文章挺多的,大家都说的非常好,我就是凑凑热闹......

应用场景:

当前界面的设置一个透明的navigationbar的背景,并且实现渐变显示或隐藏的动画,二级界面的navigationbar的背景不透明,使用APP的主题背景色(例如:不透明且无毛玻璃效果);

实现效果:

demo480.gif

实现思路:

将系统原有导航栏的背景设置为透明色,同时在每个 ViewController 上添加一个 View 或者 NavigationBar 来充当我们实际看到的导航栏,每个 ViewController 同样只需要关心自身的样式即可。

第一步:增加一个属性

用于记录对navigationbar背景色的引用,用于实现navigationbar背景色变换动画;

/**
 记录对navigationbar背景色的引用,用于实现背景色变换动画;
 */
@property (nonatomic, strong) UIView *navigationBarBgViewRef;

第二步:在viewDidLoad中加入代码:

(1)打开navigationbar的背景毛玻璃效果;
(2)设置navigationbar的背景为一张透明图片;
(3)在self.view中添加一张模拟出来的navigaionbar的背景图片;

    /**
     不使用navigationbar自带的背景颜色,
     而是使用自己模拟的navigationbar背景色
     */
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];

self.navigationBarBgViewRef = [self appendSimulatorNavigationBarBgViewWithColor:COLOR_THEME];

第三步:在viewWillApear中加入代码:

因为在本界面的二级界面中可能会修改navigationbar的样式,所以当回到本界面时,要恢复到本界面应当显示的效果;
(1)打开navigationbar的背景毛玻璃效果;
(2)设置navigationbar的背景为一张透明图片;

self.navigationController.navigationBar.translucent = YES;
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationBarBgViewRef.alpha = 0;

补充相关代码

#define WIDTH_SCREEN         [[UIScreen mainScreen] bounds].size.width      //屏幕宽度
#define HEIGHT_SCREEN        [[UIScreen mainScreen] bounds].size.height     //屏幕高度
#define IS_IPHONE_X (WIDTH_SCREEN == 375.f && HEIGHT_SCREEN == 812.f ? YES : NO)
#define IS_IPHONE_XSMAX (WIDTH_SCREEN == 414.f && HEIGHT_SCREEN == 896.f ? YES : NO)
#define HEIGHT_STATUSBAR    (IS_IPHONE_X || IS_IPHONE_XSMAX ? 44.f : 20.f)
#define HEIGHT_NAVIGATION_BAR   44

- (UIView *)appendSimulatorNavigationBarBgViewWithColor:(UIColor *)color {
    NSInteger simulatorBgViewTag = -9834534;//该值是胡乱定义的,就是个tag而已
    if([self.view viewWithTag:simulatorBgViewTag]){
        UIView *simulatorView = [self.view viewWithTag:simulatorBgViewTag];
        [simulatorView removeFromSuperview];
    }
    CGFloat height = HEIGHT_NAVIGATION_BAR + HEIGHT_STATUSBAR;
    CGSize size = CGSizeMake(WIDTH_SCREEN, height);
    UIImage *imgNavBg = [UIImage imageWithColor:color size:size];
    UIImageView *imgview = [[UIImageView alloc] initWithImage:imgNavBg];
    imgview.contentMode = UIViewContentModeScaleToFill;
    imgview.frame = CGRectMake(0, -1 * height, WIDTH_SCREEN,height);
    imgview.tag = simulatorBgViewTag;//胡乱输入的
    [self.view addSubview:imgview];
    return imgview;
    
}


在界面切换时,实现navigationbar转场变换效果有三种方法,在美团《iOS系统中导航栏的转场解决方案与最佳实践》中有很详细的描述,这里仅摘抄部分,本文中提到的方案其实就是美团这篇文章中说到的方案二,文章的链接如下:
https://tech.meituan.com/navigation_transition_solution_and_best_practice_in_meituan.html

常见的解决方案如下所示:【摘抄自美团思琦《iOS系统中导航栏的转场解决方案与最佳实践》】

  1. 重新实现一个类似 UINavigationController 的容器类视图管理器,这个容器类视图管理器做好不同 ViewController 间的导航栏样式转换工作,而每个 ViewController 只需要关心自身的样式即可。

    19常见的导航栏转场方案1示例图
  2. 将系统原有导航栏的背景设置为透明色,同时在每个 ViewController 上添加一个 View 或者 NavigationBar 来充当我们实际看到的导航栏,每个 ViewController 同样只需要关心自身的样式即可。

    20常见的导航栏转场方案2示例图
  3. 在转场的过程中隐藏原有的导航栏并添加假的 NavigationBar,当转场结束后删除假的 NavigationBar 并恢复原有的导航栏,这一过程可以通过 Swizzle 的方式完成,而每个 ViewController 只需要关心自身的样式即可。

    21常见的导航栏转场方案3示例图

这三种方案各有优劣,我们在网上也可以看到很多关于它们的讨论。

例如方案一,虽然看起来工作量大且难度高,但是这个工作一旦完成,我们就会将处理导航栏转场的主动权牢牢抓在手里。但这个方案的一个弊端就是,如果苹果修改了导航栏的整体风格,就好比 iOS 11 的大标题特效,那么工作量就来了。

对于方案二而言,虽然看起来简单易用,但这需要一个良好的继承关系,如果整个工程里的继承关系混乱或者是历史包袱比较重,后续的维护就像“打补丁”一样,另外这个方案也需要良好的团队代码规范和完善的技术文档来做辅助。

对于方案三而言,它不需要所谓的继承关系,使用起来也相对简单,这对于那些继承关系和历史包袱比较重的工程而言,这一个不错的解决方案,但在解决 Bug 的时候,Swizzle 这种方式无疑会增加解决问题的时间成本和学习成本。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容