动态修改UINavigationBar的背景色--by-胡 xu

这是我们最终想要得到的效果

思路

UISrollView的delegate方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView中根据当前的contentOffset更新navigationBar的backgroundColor即可,so easy~

开动

那么我们来看看apple为我们提供了哪些API来设置navigationBar的颜色。

首先想到的是最常用的[UINavigationBar appearance],我们一般会在AppDelegate中使用它对navigationBar进行统一的设置。但是如果试一下,会发现在scrollViewDidScrollView中调用它并不能动态地改变navigationBar的颜色,原因可以看一下Apple的doc:

Use the UIAppearance protocol to get the appearance proxy for a class. You can customize the appearance of instances of a class by sending appearance modification messages to the class’s appearance proxy.

但是:

iOS applies appearance changes when a view enters a window, it doesn’t change the appearance of a view that’s already in a window. To change the appearance of a view that’s currently in a window, remove the view from the view hierarchy and then put it back.

所以换一条路,直接修改UINavigationBar的backgroudColor:

结果却是。。。

仔细观察,会发现navigationBar的高度是44,它的上方是statusBar,而且,navigationBar的上面还有一个未知的View。。。到底Apple是怎么实现UINavigationBar的呢,让我们一探究竟!

在xcode的顶部菜单栏找到Debug > View Debugging > Capture View Hierarchy:

原来UINavigationBar上有一个_UIBackDropView,正是它决定了navigationBar的背景色。

那么我们是不是可以修改它的颜色呢,赶紧打开UINavigationBar.h,找了一圈,??

既然没有public的API,我们只能hack了!

Hack

我们的思路很简单,参照Apple的实现,在navigationBar的view hierarchy中插入一个view,通过它来控制在navigationBar的backgroundColor。

考虑到继承UINavigationBar使用起来会非常不便,我们决定用Category来实现,首先定义我们的category:

@interface UINavigationBar (BackgroundColor)
- (void)lt_setBackgroundColor:(UIColor *)backgroundColor;
@end

实现:我们使用associatedObject将overlayView动态地绑定到UINavigationBar的instance上,当调用lt_setBackgroundColor的时候,我们只要更新这个overlayView就行啦~

@implementation UINavigationBar (BackgroundColor)
static char overlayKey;

- (UIView *)overlay
{
    return objc_getAssociatedObject(self, &overlayKey);
}

- (void)setOverlay:(UIView *)overlay
{
    objc_setAssociatedObject(self, &overlayKey, overlay, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

- (void)lt_setBackgroundColor:(UIColor *)backgroundColor
{
    if (!self.overlay) {
        [self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];

        // insert an overlay into the view hierarchy
        self.overlay = [[UIView alloc] initWithFrame:CGRectMake(0, -20, [UIScreen mainScreen].bounds.size.width, self.bounds.size.height + 20)];
        self.overlay.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;

        [self insertSubview:self.overlay atIndex:0];
    }
    self.overlay.backgroundColor = backgroundColor;
}
@end

最后在scrollViewDidScroll中,我们就可以动态地修改UINavigationBar的backgroundColor了:

[self.navigationController.navigationBar lt_setBackgroundColor:[color colorWithAlphaComponent:alpha]];

完整的代码在这里:https://github.com/ltebean/LTNavigationBar

写在最后

UINavigationBar是一个比较特殊的view,它被系统高度集成,有时候定制起来并不那么方便。其实这个demo完全可以用另外一种方法实现,就是不用UINavigationBar,自己画一套UI。

很多时候我们都会发现系统原生控件出现一些预料之外的行为,那么打开view debugging,找出原因,然后解决它!

时间: 2024-10-07 19:21:48

动态修改UINavigationBar的背景色--by-胡 xu的相关文章

动态修改UINavigationBar的背景色(转载)

这是我们最终想要得到的效果: 思路 在UISrollView的delegate方法 1  - (void)scrollViewDidScroll:(UIScrollView *)scrollView 中根据当前的contentOffset更新navigationBar的backgroundColor即可,so easy~ 开动 那么我们来看看apple为我们提供了哪些API来设置navigationBar的颜色. 首先想到的是最常用的[UINavigationBar appearance],我们

动态修改UINavigationBar的背景色

这是我们最终想要得到的效果: 思路 在UISrollView的delegate方法 1  - (void)scrollViewDidScroll:(UIScrollView *)scrollView 中根据当前的contentOffset更新navigationBar的backgroundColor即可,so easy~ 开动 那么我们来看看apple为我们提供了哪些API来设置navigationBar的颜色. 首先想到的是最常用的[UINavigationBar appearance],我们

动态修改类注解(赋值)

1. 动态修改注解元凶: Java代码 /**  * 对象池工具类  *   * 目前提供ORM动态映射解决方案  *   * @author andy.zheng  * @since 2012.09.25 15:55 PM  * @vesion 1.0  *   */ public class ClassPoolUtils {                  /**      * 运行时动态ORM表映射      *       *       * @param entityClassNam

js 动态修改css文件

_.find(document.styleSheets[4].cssRules,function(cssRule){ if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){ cssRule.style.position=""; cssRule.style.top = "0px"; } if(cssRule.selec

js 动态修改属性值 动态修改图片,字等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv = "content-type" content="text/html;charset=utf-8"/> &

Quartz总结(四):动态修改定时器二

前文:http://www.cnblogs.com/LiuChunfu/p/5598806.html 提到了一种动态修改定时器的方法, 其本质就是在job方法中注入Schedular的对象,从Schedular中获取Trigger(触发器),然后修改触发器的条件,重新启动. 前文中的方法,其实已经涉及到了循环调用. Job类 => Job => Trigger => Schedular =>Job类. 这样是很容易发生问题的,也确实在实际项目中发生了问题,特别是当Schedular

python动态修改函数名

困惑 在之前用sgmllib解析网页的时候遇到了·def do_a(self,attr)·这类的函数,可以自动识别<a>并解析其中内容. 在看learningpythonthehardway时也遇到了render.index()之类的随着url路由而变化的函数名. 遂思考,怎么才能实现这种动态的函数名呢? 研究 在使用Java.C.C#等其他语言时,并没有这类的功能.有可能是python独有功能,遂百度,未发现相关介绍. python为动态语言,且为面向对象语言,一切为对象.函数也是一个对象,

自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现. 实现原理 1.除第一张图片外,其余图片全部隐藏,4张图片重叠起来. 2.导航按钮添加mouseover和mouseleave事件. 3.设置interval函数,启动定时器调用ShowImg函数. 4.动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属

如何动态修改下拉列表的默认选中项

两种方法,第一种嵌入java代码:原理是首先获取需要选中项,然后用java代码控制那个标签内需要添加selected,其中Wish是放在request中的一个对象,仅此而已 <select name="wish.visible"> <%int visible=((Wish)request.getAttribute("wish")).getVisible(); %> <option value="1" <%if(