iOS NavigationBar 背景颜色设置方案探究
sdwangming
8年前
<p>iOS中UIViewController对象如果通过push方式呈现，是由UINavigationController利用类栈结构去维护的；而UINavigationBar则是“寄生”在是UINavigationController上的属性对象，但栈顶的UIViewController对象却可以操作自身navigationItem属性（UINavigationItem对象）去决定这么多controller共享的UINavigationBar的视觉和交互表现……一言以蔽之，贵圈真乱！但UINavigationBar这么较特殊的存在，落到程序猿手中，还是得老老实实为需求服务。且恕笔者才疏学浅，就不展开那么多啦，单单就聊一聊关于UINavigationBar背景色的那些事。</p> <h3><strong>曲径初探</strong></h3> <p>闲话休表，直接拎出可能会影响UINavigationBar背景色表现的那些属性瞧瞧吧</p> <p><strong>1. backgroundColor</strong></p> <p>这个不用多介绍了，从UIView基类上继承而来，最常用的背景色设置手段，可惜UINavigationBar偏偏不那么寻常</p> <ul> <li>先给UINaigationBar设backgroundColor为纯绿色，</li> </ul> <pre> <code class="language-objectivec">self.navigationController.navigationBar.backgroundColor = [UIColor greenColor];</code></pre> <p>实际效果如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/6eaa83b86769086d5cd71270fb7ed5cb.png"></p> <p style="text-align:center">greenBg.png</p> <p>这种朦胧的味道，仿佛是三月春风吹拂过茫茫草原……呃，可是这明显不是纯正绿色啊？</p> <p>碰上这种幕后的小动作，就该Xcode自带神器Debug View Hierarchy派上用场了，让我们瞧瞧是谁在里面捣乱？</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/c83ecfbe062685a7c5c8901708bb2257.png"></p> <p><font color="#4590a3">（此处以iOS 9.3为例，但iOS10中导航栏结构其实发生了变化，但层级相似）</font></p> <p>居然纯绿色的UINavigationBar前面还有好几层啊，最可恶的就是淡绿色的那层，完全遮盖住了那纯正的味道。从View Hierarchy可见，这个玩意原来是名为_UIBackdropEffectView的某个私有类对象，而且还非UINavigationBar的直接子视图，中间还隔了_UIBackdropView类对象。果然幕后好多见不得人的勾当……</p> <ul> <li>接下再找另外一个页面练练手，如法炮制，设置UINaigationBar其backgroundColor为纯红色</li> </ul> <pre> <code class="language-objectivec">self.navigationController.navigationBar.backgroundColor = [UIColor redColor];</code></pre> <p>但是效果却神奇的发生了变化！见下图</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e227f9b22df92cffe50a55bd0a65b7f7.png"></p> <p>呵呵，隔着屏幕放佛也能听到某些人内心OS：这傻子连这都写不对……但我以苹果爸爸的声誉起誓，代码写的没错！那问题是出在哪呢？</p> <p>正在苦苦思索中的我不小心瞥到了这么一句代码：</p> <pre> <code class="language-objectivec">self.navigationBar.translucent = NO;</code></pre> <p>貌似translucent属性默认值为YES吧，难道是这家伙在捣鬼？那么就先把这个属性给扒个干净吧</p> <p><strong>2. translucent</strong></p> <pre> <code class="language-objectivec">@property(nonatomic,assign,getter=isTranslucent) BOOL translucent NS_AVAILABLE_IOS(3_0) UI_APPEARANCE_SELECTOR; // Default is NO on iOS 6 and earlier. Always YES if barStyle is set to UIBarStyleBlackTranslucent Description A Boolean value indicating whether the navigation bar is translucent (YES) or not (NO). The default value is YES. If the navigation bar has a custom background image, the default is YES if any pixel of the image has an alpha value of less than 1.0, and NO otherwise. If you set this property to YES on a navigation bar with an opaque custom background image, the navigation bar will apply a system opacity less than 1.0 to the image. If you set this property to NO on a navigation bar with a translucent custom background image, the navigation bar provides an opaque background for the image using black if the navigation bar has UIBarStyleBlack style, white if the navigation bar has UIBarStyleDefault, or the navigation bar’s barTintColor if a custom value is defined. Availability iOS (3.0 and later), tvOS (3.0 and later)</code></pre> <p>原来这家伙会根据UINavigationBar设置的自定义的背景图片(见setBackgroundImage:forBarMetrics:方法)，去判定是否为背景图添加透明度！</p> <p>根据 1 中的探究，translucent属性还会影响UINavigationBar backgroundColor的体现与否，不仅如此，诸位还记得 <strong>UIViewController在iOS7.0中引入的如下两个属性</strong> 吗：</p> <pre> <code class="language-objectivec">@property(nonatomic,assign) UIRectEdge edgesForExtendedLayout NS_AVAILABLE_IOS(7_0); // Defaults to UIRectEdgeAll @property(nonatomic,assign) BOOL extendedLayoutIncludesOpaqueBars NS_AVAILABLE_IOS(7_0); // Defaults to NO, but bars are translucent by default on 7_0.</code></pre> <p>特别是extendedLayoutIncludesOpaqueBars，在iOS7.0后默认为NO，然而若UINavigationBar translucent属性为YES，则UINavigationController其topViewControll.view是包含UINavigationBar和UIStatusBar下面覆盖的那片区域的。但若translucent属性为NO，则除非设置controller的extendedLayoutIncludesOpaqueBars属性为YES，topViewControll.view都是不包含此区域的。</p> <p>这也是经常见到与页面大小一致的控件却往往会有两种不同的frame指定方式的原因：</p> <pre> <code class="language-objectivec">self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAV_HEIGHT) style:UITableViewStylePlain]; 或 self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, self.view.bounds.size.height) style:UITableViewStylePlain];</code></pre> <p>平心而论，我个人以为同一个iOS App项目内，最好统一规范controller这些属性设置，以免这两种思路碰撞出的不是火花，而是排版错乱的各种bug……</p> <p>既然使用backgroundColor可能会受其他属性的干扰，那还是要尝试一些能更直接了当的方式，比如下面这个原生方法~</p> <p><strong>3. setBackgroundImage:forBarMetrics:方法</strong></p> <p>其完全体声明如下</p> <pre> <code class="language-objectivec">- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;</code></pre> <p>看到这个方法，我们不禁陷入沉思：既然可以设置背景图，那么用纯色去填充生成UIImage对象，然后再利用该方法不就解决了问题吗？思路很简单，实现很明了：</p> <pre> <code class="language-objectivec">//KPAppImage + (UIImage *)createImageWithColor:(UIColor *)color size:(CGSize)size { CGRect rect = CGRectMake(0.0f, 0.0f, size.width, size.height); UIGraphicsBeginImageContext(rect.size); CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetFillColorWithColor(context, [color CGColor]); CGContextFillRect(context, rect); UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return theImage; } //UINavigationBar+Color - (void)KPSetBackgroundColor:(UIColor*)color { UIImage *img = [KPAppImage createImageWithColor:color size:CGSizeMake(1, 1)]; [self setBackgroundImage: forBarMetrics:UIBarMetricsDefault]; }</code></pre> <p>嗯，参照视觉大大要求，设置背景色为0xf8f8f8的效果新鲜出炉！</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e8c897019d040afba4b2cf323943229b.png"></p> <p>呃，怎么感觉有那么一丝不对劲？:sweat:</p> <p>毋需动用视觉大大的像素眼，我们已经发现了端倪！</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/39fda5cd31dd3bd6cdc08ded81cfb670.png"></p> <p>这不是列表支持下拉刷新的loading indicator吗，居然还薄纱披身半遮面……</p> <p>哎，不用多说，八成还是translucent属性搞的鬼！</p> <p>立马把这些可恶的UINavigationBar的translucent属性改为NO，没想到不一会各路bug如:snowflake:般翩然而至：“消息页面怎么导航栏底下留了一块空白？”“为啥页面排版都错乱？”“iOS同学你们在搞神马，没有bug都改出bug了！”……</p> <p>饱含着眼泪的程序猿啊，默默的把代码回滚了……哎，刚刚还提醒大家注意呢，结果自己踩进大坑，各路UINavigationController translucent属性设置不一致的历史遗留问题太可恶了，任务这么紧急，可再不敢随便改动了。那怎么才能让效果过得了视觉大大的像素眼呢？只好再去瞅瞅UINavigationBar的视图层级结构，看看有啥治病偏方木有</p> <h3><strong>洞天石扉，訇然中开</strong></h3> <p><strong>4. 探查UINavigationBar View Hierarchy(before iOS10 vs iOS10)</strong></p> <p>借助Xcode View Hierarchy Debug工具，查看仅通过方案3设置背景色且translucent属性为YES的UINavigationBar对象，可得iOS10之前的视图结构如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/32c0d53402f7ed1a58a7eabe5d826d64.png"></p> <p>而iOS10的UINavigationBar视图结构如图：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0818a218564b663f884b6754550e4b25.png"></p> <p>同时打印选中的UIImageView对象其description如下，可见是默认其alpha通道非1.0即略微透明：</p> <pre> <code class="language-objectivec"><UIImageView: 0x7fa87ec42d60; frame = (0 0; 320 64); alpha = 0.909804; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x60000042e060>> - (null)</code></pre> <p>当然，如果关闭translucent属性，自然不会有导航栏透视的问题，但假如是存在前述的“历史遗留问题”，这种修正影响页面会比较庞多的情况，有没有附带伤害更小的解决方案呢？</p> <p>自然是天无绝人之路，程序猿们总能想出一些诡计来实现期望的效果。很明显，如若避免透视导航栏其层级之下内容，让其渲染背景色的视图（before iOS10:_UINavigationBarBackground, iOS10:_UIBarBackground)以及其子视图不透明就可以了嘛，那么自然会有两个方案：</p> <ul> <li>1.把这些alpha值不为1.0的控件设置为不透明</li> <li>2.利用别的视图遮蔽掉这些透明控件</li> </ul> <p>很不幸的是，我对方案1的尝试失败了，特别是有设置backgroundColor的情况下，UINavigationBar其subviews（或迭代包含的subviews）还包括了_UIBackDropView（before iOS10)、UIVisualEffectView（iOS10)等模糊效果控件，对其设置alpha或背景色效果可能无效甚至表现有问题，故此方案暂告一段落。</p> <p>那么方案2的表现呢？</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fa004862ec4573b7ca1549e967c5aabf.png"></p> <p>啊哦，终于达成了为导航栏完美设置0xf8f8f8背景色的需求！</p> <p>再来剖析一下此时的View Hierarchy</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/09021d274ee3ee9a7d756b3bf9cff85b.png"></p> <p style="text-align:center">Paste_Image.png</p> <p>眼尖的同学可能发现，与之前的View Hierarchy相比，_UIBarBackground的subviews中似乎多了一个UIView对象——没错，这个UIView对象即担负着填充背景色且遮挡可能出现模糊透视的任务的关键视图。</p> <p>Talk is cheap, show me the code~~</p> <pre> <code class="language-objectivec">- (UIView *)overlay { return objc_getAssociatedObject(self, &overlayKey); } - (void)setOverlay:(UIView *)overlay { objc_setAssociatedObject(self, &overlayKey, overlay, OBJC_ASSOCIATION_RETAIN_NONATOMIC); } - (void)KPSetBackgroundColor:(UIColor *)backgroundColor { if (!self.overlay) { [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; UIView *backgroundView = [self KPGetBackgroundView]; self.overlay = [[UIView alloc] initWithFrame:backgroundView.bounds]; self.overlay.userInteractionEnabled = NO; self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight; [backgroundView insertSubview:self.overlay atIndex:0]; } self.overlay.backgroundColor = backgroundColor; } - (UIView*)KPGetBackgroundView { //iOS10之前为 _UINavigationBarBackground, iOS10为 _UIBarBackground //_UINavigationBarBackground实际为UIImageView子类，而_UIBarBackground是UIView子类 //之前setBackgroundImage直接赋值给_UINavigationBarBackground，现在则是设置后为_UIBarBackground增加一个UIImageView子控件方式去呈现图片 if ([currentSystemVersion floatValue] >= 10.0) { UIView *_UIBackground; NSString *targetName = @"_UIBarBackground"; Class _UIBarBackgroundClass = NSClassFromString(targetName); for (UIView *subview in self.subviews) { if ([subview isKindOfClass:_UIBarBackgroundClass.class]) { _UIBackground = subview; break; } } return _UIBackground; } else { UIView *_UINavigationBarBackground; NSString *targetName = @"_UINavigationBarBackground"; Class _UINavigationBarBackgroundClass = NSClassFromString(targetName); for (UIView *subview in self.subviews) { if ([subview isKindOfClass:_UINavigationBarBackgroundClass.class]) { _UINavigationBarBackground = subview; break; } } return _UINavigationBarBackground; } } #pragma mark - shadow view - (void)KPHideShadowImageOrNot:(BOOL)bHidden { UIView *bgView = [self KPGetBackgroundView]; //shadowImage应该是只占一个像素，即1.0/scale for (UIView *subview in bgView.subviews) { if (CGRectGetHeight(subview.bounds) <= 1.0) { subview.hidden = bHidden; } } }</code></pre> <p>设置overlay的设计是比较普遍使用的一种办法，但上述实现还针对iOS10之前与之后UINavigationBar不同的View Hierarchy去更精准地插入overlay；同时还可以很方便的定位导航栏下方的阴影条，可以随心所欲地设置其隐藏或显现。</p> <h3><strong>归去来兮</strong></h3> <p>综上所述，仅仅是设置UINavigationBar背景色这么简简单单的效果，却可能会涉及这么多关联因素。</p> <p>不得不感叹，纵然牛逼如苹果，把UI相关的设计和接口做到纯粹的简约清晰也还是很有难度。</p> <p>(以上语录都可以入选装逼遭雷劈的典型案例了吧……:flushed:）</p> <p>但是忽然想到，冥冥之中居然还遗漏了UINavigationBar的一个关键属性，即 <strong> barTintColor </strong></p> <pre> <code class="language-objectivec">@property(nullable, nonatomic,strong) UIColor *barTintColor NS_AVAILABLE_IOS(7_0); Description The tint color to apply to the navigation bar background. This color is made translucent by default unless you set the translucent property to NO.</code></pre> <p>看描述似乎我们上面那一番劳累难道白费了？？拿事实说话，来瞧一瞧为translucent为YES的UINavigationBar对象设置其barTintColor为0xf8f8f8 RGB色值后的表现：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/27c1cdbc6a5924e819dac49c033a6495.png"></p> <p>效果居然出乎意料的不错。不过用xscope仔细探查像素发现，虽然颜色看起来差不多，但实际取到色值却是在0xf4f4f4~0xf9f9f9之间，并不是完全纯正的0xf8f8f8。这是怎么回事呢？照旧Debug View Hierarchy大法好~</p> <p><img src="https://simg.open-open.com/show/8109585e2cc0dacbfdfd7b77add07eb4.png"></p> <p><font color="#4590a3">（此处以iOS 10作为测试版本）</font></p> <p>又出现了UIVisualEffectView这家伙！前面提到过，它是负责产生模糊透明特效的，而View Hierarchy中看到它自己本身是透明的，关键还是_UIVisualEffectBackdropView以及两个_UIVisualEffectFilterView共3个私有子视图，且明显可以看出，前者是有实时模糊生成（根据其层级之下的展现内容验算），中者则是设置了半透明的背景色，后者则为纯正的0xf8f8f8颜色但alpha值不为1，这两者背景色合成之后的结果，才代表最终展现的导航栏颜色（不管你信不信，反正我是晕了）……利用console debug命令探查这三者alpha值、背景色属性如下</p> <pre> <code class="language-objectivec">//_UIVisualEffectBackdropView对象 (lldb) po (CGFloat)self.navigationController.navigationBar.subviews[0].subviews[1].subviews[0].alpha 1 (lldb) po self.navigationController.navigationBar.subviews[0].subviews[1].subviews[0].backgroundColor 0x0000000000000000 //第一个_UIVisualEffectFilterView对象 (lldb) po (CGFloat)self.navigationController.navigationBar.subviews[0].subviews[1].subviews[1].alpha 1 (lldb) po self.navigationController.navigationBar.subviews[0].subviews[1].subviews[1].backgroundColor UIExtendedGrayColorSpace 0.97 0.8 //第二个_UIVisualEffectFilterView对象 (lldb) po (CGFloat)self.navigationController.navigationBar.subviews[0].subviews[1].subviews[2].alpha 0.85000002384185791 (lldb) po self.navigationController.navigationBar.subviews[0].subviews[1].subviews[2].backgroundColor UIExtendedSRGBColorSpace 0.972549 0.972549 0.972549 1</code></pre> <p>实事也呼应了barTintColor属性描述中那段话</p> <p>This color is made translucent by default unless you set the translucent property to NO.</p> <h3><strong>恍如隔世</strong></h3> <p>这么一番曲折的经历下来，除了脑袋搞晕了之外，还能得出什么结论吗？哎，姑且以我的一家之言收尾吧：</p> <p>想要为UINavigationBar设置某个色值的纯色背景，则</p> <ul> <li> <p>translucent属性为YES:</p> <ul> <li>如果想要通过视觉大大一丝不苟的像素眼，请参照 4 中的方案2</li> <li>否则若只是要求肉眼不容易发觉（请不要吐槽我的随便），请利用 barTintColor属性</li> <li>如果要求放松到无所谓的程度，透不透视都不关心，请使用 setBackgroundImage:forBarMetrics: 方法或者干脆用 backgroundColor属性</li> </ul> </li> <li>translucent属性为NO: <ul> <li>如果想要通过视觉大大一丝不苟的像素眼，依旧参照 4 中的方案2</li> <li>否则若只是要求肉眼不容易发觉（请不要吐槽我的随便），使用barTintColor 或者 setBackgroundImage:forBarMetrics: 方法(仍然存在混色问题，例如设置纯红色，view hierarchy看单个视图取色为0xff0000，而直接从App中取色则前者效果为0xfb2930,后者效果为0xfc0d1b，相对而言后者更精准)</li> <li>backgroundColor设置则是无效的，请放弃该方式</li> </ul> </li> </ul> <p> </p> <p>来自：http://www.jianshu.com/p/6a5552ec5099</p> <p> </p>