iOS 关于navigationBar的一些:毛玻璃、透明、动态缩放、动态隐藏

前言

本文整理了一些关于navigationBar的非常规的但是较为实用的操作,包括利用毛玻璃、动态透明、动态item颜色、动态隐藏,以及头视图的动态缩放,并同时涉及了statusBar的动态设置(换色)。
先预览下整体效果:

Demo详见GitHub:Demo_AboutNavigationBar
为了便于展示,类没有复用,也没有继承共有的父类,所有存在大量“有丝分裂”的重复代码。。。说白了就是懒。。。千万别学我就是了。

1.不要“浪费”了这块毛玻璃

这里所谓的不要浪费,只是个人的偏好,当然也是顺遂了苹果的UI特色之一:毛玻璃穿透效果。
一般界面上是有两块毛玻璃的:navigationBar和tabBar,很多APP都会自定义这两块Bar,不仅是颜色,甚至是控件本身。单考虑利用系统的Bar的话,如果不自定义颜色,就是利用毛玻璃效果本身了,然而很多APP,也并未利用起这个毛玻璃效果,简书的就是这样,不过简书应该是自定义了navigationBar?或许。
(这里插一句,就是QQ的某次更新,更新之后,navigationBar的蓝色变成了毛玻璃,之后的一次更新又换了回来……可能是被吐槽太多?这里应该是用户习惯先入为主的问题了;还有就是微信,微信应该算得上是个十分纯粹的iOS风格的APP,有留意过的话,也会发现其navigationBar是黑色的毛玻璃,或许是barStyle = UIBarStyleBlack,因为微信也是有很多非原生的处理的。)
下面结合tableView介绍下其与navigationBar的毛玻璃的作用效果。知道我可能要啰嗦什么的朋友可自行跳过这部分内容。
先对比下这两种效果(图不太清晰,仔细看navigationBar,还是很容易对比出来差别的):

有毛玻璃穿透效果的效果

没有毛玻璃穿透效果

1.1.一般的处理

- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 64, ScreenWidth, ScreenHeight - 64)];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.backgroundColor = [UIColor whiteColor];
        _tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    }
    return _tableView;
}

相信有很多人大概是以与这样类似的方式去初始化tableView的,origin.y=64,总高度-64,都是为了防止navigationBar的遮挡,然而这样的处理会产生一个bug,就是tableView整体居然下移了64……,然后就有了这段解决代码:

if ([self respondsToSelector:@selector(automaticallyAdjustsScrollViewInsets)]) {
    self.automaticallyAdjustsScrollViewInsets = NO;
}

这是iOS7的特性之一,navigationBar自适应scrollView滑动视图,然而因为我们的+64的处理,导致系统的这个默认开启的功能就成了自作多情。如果

_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];

这样做,之前的“bug”自然就会没有,而且我们想要的毛玻璃效果就会自然的展现出来(如上图一),但是因为系统的自适应,在某些特殊情况下,依旧会产生不可控的bug,所以刚才处理bug的代码,还是有必要的。

1.2.“释放”系统的毛玻璃效果的处理

配合:

if ([self respondsToSelector:@selector(automaticallyAdjustsScrollViewInsets)]) {
    self.automaticallyAdjustsScrollViewInsets = NO;
}

这样初始化tableView:

- (UITableView *)tableView
{
    if (!_tableView) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, ScreenHeight)];
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.backgroundColor = [UIColor whiteColor];
        _tableView.contentInset = UIEdgeInsetsMake(64, 0, 0, 0);
        _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(64, 0, 0, 0);
        _tableView.separatorStyle = UITableViewCellSeparatorStyleSingleLine;
    }
    return _tableView;
}

这里利用了edgeInset内嵌边距,tableView的frame依旧是全屏尺寸的,只是设置了下contentInset使得其内容视图的尺寸改变了,scrollIndicatorInsets是右侧的滑动指示器,要跟着一起才自然。如果当前页还有tabBar的话,只需要设置UIEdgeInsetsMakebottom值就行。这样,上图一的毛玻璃穿透效果就自然的释放了出来。

1.3.设置contentInset带来的小问题

  • 1.webView初始加载时底部的黑条
    如果使用上述方式初始化webView(同样是滑动视图,有scrollView属性,可设置scrollView.contentInset),至于所谓的“黑条”,大致类似于下面的效果:

黑条出现在视图底部,一般高度为64,也就是contentInsettop值,上图的因为设置关系要大很多。相信很多人都在浏览APP的webView时,在web加载完之前的空白页时,见到过这一现象。
关于这以现象的解决方法网上也有很多,我一般是在初始化时,将contentOffset.y设置一个(-64)的偏移量,这样,初始进入webView时,在不滑动页面的情况下,是不可见的,这算是较为温和的解决方法吧,还有一种就是,初始化时设置opaque=NO,也就是使得view透明,但是在加载之后,要设置opaque=YES,也就是默认不透明,这样,黑条是彻底不可见的。

  • 2.滑动偏移量改变
    在实现一些滑动视图的动态变化的处理中,例如稍后提到的动态缩放,一般会用代理检测contentOffset.y值,但是因为设置了contentInset.top,此时contentOffset.y值也就发生了变化:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsetY = scrollView.contentOffset.y + self.tableView.contentInset.top;//注意
}

初始不再是0,而是-64,也就是-top

1.4.为什么需要毛玻璃效果

费了一些功夫,都只是为了实现毛玻璃效果,至于为什么要这个毛玻璃穿透效果,我也说不好,喜好也罢,设计风格也罢,至少,感觉这样做出的APP,不用专门考虑各种Bar的配色什么的,动态模糊穿透的彩色,也的确很漂亮,至少,iOS的UI风格有这样的趋势。也不要小瞧这个毛玻璃效果,真正实现一个高效的毛玻璃,也就是动态模糊渲染,也是很麻烦的,一些三方库,为了版本适配(适配iOS7),自定义的毛玻璃,也是利用了系统的toolBar。看过一些文章,介绍来介绍去,还是说,用系统在iOS8之后提供的API实现毛玻璃是最好的方式。
下图(渣图……)是我最近封装了有一阵子的一个自定义控件,同样是为了效果,用toolBar自定义了一块毛玻璃,这个控件还未彻底完善,稍后会开源,下图只是其中一种样式,这个控件的自定义程度还是非常高的。

2.navigationBar的透明

有时候,我们需要将navigationBar设置透明,但不是隐藏,因为还需要其item控件(返回键什么的),虽然navigationBar是继承于UIView的,但是直接设置其alpha是无效的,应该是因为navigationBar复合的视图层级:



根据视图层级关系,我们用这个十分简单的方法来设置navigationBar的透明:

[[[self.navigationController.navigationBar subviews] objectAtIndex:0] setAlpha:0];

关于navigationBar设置透明的方法,不知上述一种,还有许多,详见此文,非常具有参考价值:

怎么把顶部这个navigationbar设置为透明呢,能够让下面的图片显示出来,但是返回按钮不透明?

如果想像QQ空间或者微博那样动态的改变透明度,只需要在scrollViewDidScroll方法中,动态去设置alpha值就行,何时开始改变、变化率全凭自定义的参数控制,具体详见Demo中的代码。

3.动态statusBar颜色

改变item的颜色很简单,只需设置:

self.navigationController.navigationBar.tintColor = [UIColor blackColor];

动态设置的方式同刚才的alpha。这里主要说的是statusBar的颜色或者说样式的改变。
iOS7之后,statusBar不再是全局属性,每个VC都可自行控制statusBar的样式,虽然样式只有简单的字体黑或白两种,但是在很多情况下都是很有用的,尤其是上面的navigationBar的alpha动态改变,在QQ空间中就有这个效果。
在设置statusBar样式之前,需要做一个处理,而且是针对navigationBar的处理,在使用了navigationController之后,直接设置某一个VC的statusBar的样式是无效的,因为navigationBar是唯一的,所有压栈推出的VC,都是navigationController的子控制器,这就需要指定statusBar样式改变的VC为当前的topVC,具体方式网上也有很多,这里只介绍个人使用的一种。
首先创建一个继承于UINavigationController的子类,在这个类中实现下面的方法:

- (UIViewController *)childViewControllerForStatusBarStyle
{
    return self.topViewController;
}

或者是同样效果的这个方法:

- (UIStatusBarStyle)preferredStatusBarStyle
{
    UIViewController * topVC = self.topViewController;
    return [topVC preferredStatusBarStyle];
}

之后,只需在要改变statusBar样式的VC类中实现:

#ifdef __IPHONE_7_0
- (UIStatusBarStyle)preferredStatusBarStyle
{
    if (_statusBarStyleControl) {
        return UIStatusBarStyleDefault;
    }
    else {
        return UIStatusBarStyleLightContent;
    }
}
- (BOOL)prefersStatusBarHidden
{
    return NO;
}
#endif

__IPHONE_7_0是系统的宏,这里用来版本适配,这个不写貌似没有关系?因为之前试了iOS7以下的系统没有崩溃,iOS7之前没有这个方法,应该是不会执行的,也就不会崩溃。
preferredStatusBarStyle就是控制用来控制statusBar颜色或者说样式的,_statusBarStyleControl是自定义的一个用来动态控制的BOOL属性。
prefersStatusBarHidden这个控制statusBar的显示隐藏,建议NO或直接默认不写,如果设置隐藏,视图会整体上移20,效果不太好,看具体需求。

至于控制statusBar的改变,也是在scrollViewDidScroll代理中动态实现,例如某一情况下触发如下:

_statusBarStyleControl = YES;
if ([self respondsToSelector:@selector(setNeedsStatusBarAppearanceUpdate)]) {
    [self setNeedsStatusBarAppearanceUpdate];
}

第一步是设置之前提到的_statusBarStyleControl标志位的值的切换,第二部是最重要的setNeedsStatusBarAppearanceUpdate,这个系统的方法是在改变statusBar显示样式之前必须执行的,否则preferredStatusBarStyle不会再当前视图加载完成后再次执行。

4.navigationBar的动态隐藏

navigationBar的隐藏很简单:

[self.navigationController setNavigationBarHidden:YES animated:YES];

这个方法可以使动态隐藏时有动画效果,不会显得突兀。
动态隐藏的效果有两个场景:一个就是例如简书这样的,在浏览时,上滑,navigationBar隐藏,下滑navigationBar显示,在这期间,手指是不松开的,这需要实时检测当前是上滑还是下滑;第二个场景是Safari浏览器那样的,滑动后松手,根据上滑还是下滑设置隐藏(Safari的navigationBar不是隐藏,只是变化)。这样的两种场景虽然很相似,但就是松不松手的问题,处理方式和体验也是完全不同的。

  • 1.第二场景,松手
    这个处理十分简单:
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    NSLog(@"======== %lf", velocity.y);
    if(velocity.y > 0) {
        [self.navigationController setNavigationBarHidden:YES animated:YES];
    }
    else {
        [self.navigationController setNavigationBarHidden:NO animated:YES];
    }
}

velocity.y这个量,在上滑和下滑时,变化极小(小数),但是因为方向不同,有正负之分,这就很好处理了。

  • 2.第一场景,不松手
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat offsetY = scrollView.contentOffset.y + _tableView.contentInset.top;//注意
    CGFloat panTranslationY = [scrollView.panGestureRecognizer translationInView:self.tableView].y;
    
    if (offsetY > 64) {
        if (panTranslationY > 0) { //下滑趋势,显示
            [self.navigationController setNavigationBarHidden:NO animated:YES];
        }
        else {  //上滑趋势,隐藏
            [self.navigationController setNavigationBarHidden:YES animated:YES];
        }
    }
    else {
        [self.navigationController setNavigationBarHidden:NO animated:YES];
    }
}

这里的offsetY > 64只是为了在视图滑过navigationBar的高度之后才开始处理,防止影响展示效果。
panTranslationY是scrollView的pan手势的手指位置的y值,这个方法是个人自己想到的,可能不是太好,因为panTranslationY这个值在较小幅度上下滑动时,可能都为正或都为负,这就使得这一方式不太灵敏,如果有更好的方法,欢迎留言交流。

5.动态缩放

这个效果纯粹是为了仿简书的个人信息的头像的缩放效果。
头像视图的布局直接利用了navigationBar的titleView,代码还是很好理解的,视图层级关系如下:

头像的一半是“悬空”的。
缩放只是滑动代理监听时的一个动态缩放的过程,缩放率同之前说的alpha的动态变化一样,自行设置常量,这里注意缩放过程的分段执行,为了效果,这个有下拉放大回弹的效果,这部分不是简书的效果:

_topImageView.transform = CGAffineTransformMakeScale(1 - offsetY/300, 1 - offsetY/300);

如果只是设置缩放,效果如下:



为了使缩放过程中位置相对保持,之前想到了改变锚点的方式,然而效果很差,最终还是以简单的方式实现:

CGRect frame = _topImageView.frame;
frame.origin.y = 5;
_topImageView.frame = frame;

就是保持y的坐标为初始值。
下面的这个仿微博的效果,也是基于同样的原理,只是要注意图层关系,详细参考代码,不再赘述。

6.侧滑返回

这算是个比较大的话题了,前面提到的那篇文章中有关于此的详细论述,这里只是简单提及,稍后有机会,会专门写一篇关于侧滑返回的自定义实现。
iOS7之后,navigationController推出的视图,只要返回按钮不自定义覆盖,或者相关属性默认,右滑屏幕左边缘,可以直接pop返回,这是个十分方便的功能。关于实现和自定义实现,网上也有太多的文章。这里只是说明一点,就是在设置navigationBar透明之后,使用侧滑返回的过程中,navigationBar会突然出现,显得十分突兀,这也是目前微博APP的效果,QQ和微信都针对此做了不同的处理,本文的Demo中也尝试做了一定的处理,但是效果并不是十分理想的,就是中断侧滑返回动作时,navigationBar闪的问题。这个问题已经超出本文内容的范围,有机会会在今后的文章中介绍。

参考文章:
1.iOS开发的一些奇巧淫技
2.自定义iOS7导航栏背景,标题和返回按钮文字颜色
3.Removing the title text of an iOS 7 UIBarButtonItem
4.iOS 实现ScrollView 上滑隐藏Navigationbar,下滑显示
5.iOS 7 改变 app 的外观(NavigationBar,TabBar,StatusBar)
6.iOS不同版本适配问题(#ifdef __IPHONE_7_0)
7. __IPHONE_OS_VERSION_MIN_REQUIRED
8.IOS开发之不同版本适配问题3(#ifdef __IPHONE_7_0 BaseSDK Development Target)
9.IOS开发之不同版本适配问题2(#ifdef __IPHONE_7_0)
10.ios7 statusBar的字体颜色怎么设置为白色的呢
11.IOS上 关于状态栏的相关设置(UIStatusBar)
12.IOS7怎么修改Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色
13.怎么把顶部这个navigationbar设置为透明呢,能够让下面的图片显示出来,但是返回按钮不透明?
14.iOS navigationbar全透明的方法
15.IOS中设置UINavigationBar的各种样式(图片/透明效果/下方内容显示情况)
16.iOS开发UI篇—CAlayer层的属性
17.iOS - UINavigationController简介

·转载请声明出处·

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

推荐阅读更多精彩内容