close
当前位置: 物联网在线 > 技术文库 > ios >

iOS NavigationBar 背景颜色设置方案探究

iOS中UIViewController对象如果通过push方式呈现,是由UINavigationController利用类栈结构去维护的;而UINavigationBar则是“寄生”在是UINavigationController上的属性对象,但栈顶的UIViewController对象却可以操作自身navigationItem属性(UINavigationItem对象)去决定这么多controller共享的UINavigationBar的视觉和交互表现……一言以蔽之,贵圈真乱!但UINavigationBar这么较特殊的存在,落到程序猿手中,还是得老老实实为需求服务。且恕笔者才疏学浅,就不展开那么多啦,单单就聊一聊关于UINavigationBar背景色的那些事。

曲径初探

闲话休表,直接拎出可能会影响UINavigationBar背景色表现的那些属性瞧瞧吧

1. backgroundColor

这个不用多介绍了,从UIView基类上继承而来,最常用的背景色设置手段,可惜UINavigationBar偏偏不那么寻常

先给UINaigationBar设backgroundColor为纯绿色,

self.navigationController.navigationBar.backgroundColor = [UIColor greenColor];

实际效果如下:

greenBg.png

这种朦胧的味道,仿佛是三月春风吹拂过茫茫草原……呃,可是这明显不是纯正绿色啊?

碰上这种幕后的小动作,就该Xcode自带神器Debug View Hierarchy派上用场了,让我们瞧瞧是谁在里面捣乱?

iOS NavigationBar 背景颜色设置方案探究

<font color="#4590a3">(此处以iOS 9.3为例,但iOS10中导航栏结构其实发生了变化,但层级相似)</font>

居然纯绿色的UINavigationBar前面还有好几层啊,最可恶的就是淡绿色的那层,完全遮盖住了那纯正的味道。从View Hierarchy可见,这个玩意原来是名为_UIBackdropEffectView的某个私有类对象,而且还非UINavigationBar的直接子视图,中间还隔了_UIBackdropView类对象。果然幕后好多见不得人的勾当……

接下再找另外一个页面练练手,如法炮制,设置UINaigationBar其backgroundColor为纯红色

self.navigationController.navigationBar.backgroundColor = [UIColor redColor];

但是效果却神奇的发生了变化!见下图

呵呵,隔着屏幕放佛也能听到某些人内心OS:这傻子连这都写不对……但我以苹果爸爸的声誉起誓,代码写的没错!那问题是出在哪呢?

正在苦苦思索中的我不小心瞥到了这么一句代码:

self.navigationBar.translucent = NO;

貌似translucent属性默认值为YES吧,难道是这家伙在捣鬼?那么就先把这个属性给扒个干净吧

2. translucent

@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)

原来这家伙会根据UINavigationBar设置的自定义的背景图片(见setBackgroundImage:forBarMetrics:方法),去判定是否为背景图添加透明度!

根据 1 中的探究,translucent属性还会影响UINavigationBar backgroundColor的体现与否,不仅如此,诸位还记得 UIViewController在iOS7.0中引入的如下两个属性 吗:

@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.

特别是extendedLayoutIncludesOpaqueBars,在iOS7.0后默认为NO,然而若UINavigationBar translucent属性为YES,则UINavigationController其topViewControll.view是包含UINavigationBar和UIStatusBar下面覆盖的那片区域的。但若translucent属性为NO,则除非设置controller的extendedLayoutIncludesOpaqueBars属性为YES,topViewControll.view都是不包含此区域的。


(责任编辑:ioter)

用户喜欢...

实现一个iOS渐变背景动画效果的Switch

在dribbble看到一个Switch动画效果就手痒想实现,下面就是我实现的思路。 源代码 GitHub地址: VGGradientSwitch 如果觉得不错,欢迎点star。 设计图 来自dribbble上的设计作者 Nick Buturishvili image 效果...