【导航条滚动透明】一个分类搞定

下面这个界面有没有觉得很眼熟。打开你手里的App仔细观察,你会发现很多都有实现这个功能。比如美团外卖的首页模块,新浪微博的个人详情页面。要怎么样才能快速的实现这个功能呢!那下面由笔者来告诉你如何三行代码,集成这个功能。。。

原理介绍:

要想把一个view设计成透明的我们一下子就会想到两种方案,设置view的alpha值为0,或者设置view的backgroundColor为clearColor.但是UINavigationBar是一个比较特殊的视图,它是没有alpha属性的,那我们可以设置opaque(不透明度)为NO,上代码试一试

//方案一:不透明度为NO

navigationBar.opaque = NO;

//方案二:背景颜色为clearColor

navigationBar.backgroudcolor = [UIColor clearColor];

结果,然并卵,完全没用。这时候该怎么办呢?这时候我们就得来看看UINavigationBar这个视图的结构了,如下图。

NavgationBar.png

现在笔者教大家一个小技巧。请看下面代码:

//设置一张空的图片

[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];

//清除边框,设置一张空的图片

[self.navigationController.navigationBar setShadowImage:[[UIImage alloc]init]];

这时候再打开项目层次图,你会有惊人的发现

对比一下,你会发现只剩两层了。不要问为什么,这都是系统帮你做的。。。当你设置了背景图片的时候,就会出现这样的结果。

知道了上述的原理,这就好办了,现在只要监听,控制器内部的scrollView 的滚动,就可以实现导航条渐渐透明的效果了。

  • 业务逻辑,功能实现其实都不是很难。但是也需要花费一些时间,笔者在这给大家分享一下自己写的一个分类。导入这个分类,你只需要调用两三个接口就可以实现这个功能了。

    首先看一下分类提供的接口

Snip20160326_2.png

分类介绍

  • 我写的这个分类不仅可以在系统的UITableViewController 和UICollectionViewController中使用,(系统的只需调用分类中两个方法即可)。而且当你的UIViewController中有1个或多个可以垂直滚动的scrollView都可以使用。(需要告诉控制器需要监听哪个scrollView的滚动,即设置keyScrollView).
  • 重要的是,这个分类的代码侵入性非常低,使用简单方便。当不需要这些功能的时候,你只需要注释掉几行代码即可。对原控制器没有任何影响,无需更改控制器内的其他代码结构。

分类代码

分类接口

#import <UIKit/UIKit.h>

typedef struct {

BOOL isLeftAlpha;

BOOL isTitleAlpha;

BOOL isRightAlpha;

}HYBarItemAlphaControl;

@interface UIViewController (NavBarHidden)

/** 当你的控制器里有多个scrollView的时候,设置需要监听的keyScrollView */

@property (nonatomic,weak) UIScrollView * keyScrollView;

/** 设置导航条上的标签是否需要跟着隐藏  */

- (void)setBarItemAlphaControl:(HYBarItemAlphaControl)isBarItemAlphaControl;

/**

*      在控制器ViewWillAppear.ViewWillDisappear需要调用的接口

*      避免push到下一个控制器,消除对其他控制器导航条的影响

*/

- (void)setInViewWillAppear;

- (void)setInViewWillDisappear;

/** rate将决定颜色变化程度,值越大,颜色变化越明显,rate的取值范围是0.01 - 0.999999 */

- (void)scrollControlRate:(CGFloat)height colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue ;

@end



下面这个效果图是系统的UITableViewController,以下是效果图和代码

2.gif

控制器代码:

#import "TestViewController.h"

#import "UIViewController+NavBarHidden.h"

@implementation TestViewController

- (void)viewDidLoad{

[super viewDidLoad];

//设置当有导航栏自动添加64的高度的属性为NO

self.automaticallyAdjustsScrollViewInsets = NO;

//设置tableView的头部视图

UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 0, 250)];

imageView.image = [UIImage imageNamed:@"1.jpg"];

self.tableView.tableHeaderView = imageView;

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

[self scrollControlRate:0.5 colorWithRed:0.0 green:1.0 blue:0.0 ];

}

- (void)viewWillAppear:(BOOL)animated{

[super viewWillAppear:animated];

[self setInViewWillAppear];

}

- (void)viewWillDisappear:(BOOL)animated{

[super viewWillDisappear:animated];

[self setInViewWillDisappear];

}

@end



下面这个效果图是一个ViewController中含有自己创建的一个CollectionView.

1.gif

控制器代码

@implementation TestCollectionController

-(void)viewDidLoad{

[super viewDidLoad];

//1.设置当有导航栏自动添加64的高度的属性为NO

self.automaticallyAdjustsScrollViewInsets = NO;

//2.设置导航条内容

[self setUpNavBar];

//3.导航条上的自定义的子标签是否需要跟着隐藏,只对自定义的view有效果.对系统默认的无效

[self  setBarItemAlphaControl:(HYBarItemAlphaControl){0,1,1}];

//4.设置collectionView

[self setUpCollectionView];

//5.告诉程序是根据哪个scrollView的滚动来控制状态栏的变化

self.keyScrollView = self.collectionView;

[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;

}

#warning 监听滚动,调用框架接口

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

//rate将决定颜色变化程度,值越大,颜色变化越明显,rate的取值范围是0.01 - 0.999999

[self scrollControlRate:0.5 colorWithRed:1.0 green:0.0 blue:0.0 ];

}

- (void)viewWillAppear:(BOOL)animated{

[super viewWillAppear:animated];

[self setInViewWillAppear];

}

- (void)viewWillDisappear:(BOOL)animated{

[super viewWillDisappear:animated];

[self setInViewWillDisappear];

}

项目源码https://github.com/newyeliang/HYNavBarHidden.git

时间: 2024-10-10 21:08:46

【导航条滚动透明】一个分类搞定的相关文章

iOS:导航条滚动透明度随着tableView的滚动而变化

来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如美团外卖的首页模块,新浪微博的个人详情页面.要怎么样才能快速的实现这个功能呢!那下面由笔者来告诉你如何三行代码,集成这个功能... 原理介绍: 要想把一个view设计成透明的我们一下子就会想到两种方案,设置view的alpha值为0,或者设置view的backgroundColor为clearCol

高逼格,超简单,实现App自动更新,一个方法搞定

前言 前段时间写了一个篇APP自动更新下载的文章自动更新,一个方法搞定,使用系统的DownloadManager 方法超简洁的实现了apk的下载,不过有好多网友反映有一些机型上面这个方法无法实现下载,经过小编的实验在部分机型上确实会有这个问题,所以其中下载的部分只能通过其它方法搞定了.正好看到网上好多关于使用Retrofit实现下载并且监听进度的文章,并且我一直在看Retrofit的东西但是一直没有机会用到,所以我正好拿这个练练手,最终我使用Retrofit + OkHttp + RxBus +

iOS (导航条)navBar 透明

现实开发中会遇到一种情况.UI会把导航条做成透明的,滑动的时候才逐渐显现.不透明的时候样子是这样的. 是挺难看的. 所以想要制作透明的导航条 就要知道一个方法,一个属性 这时 UIImage 这个图看来是必须要画一个了 - (UIImage *)imageWithColor:(UIColor *)color { CGRect rect = CGRectMake(0, 0, 1, 1); UIGraphicsBeginImageContext(rect.size); CGContextRef co

一个系列搞定校招——简历篇

上一篇一个系列搞定校招——综合篇总体介绍了校招从简历到面试的各个环节,没看过的可以先看上一篇,接下来将分别从每一个环节详细介绍,本篇先说[简历篇]. 前面说过,简历是求职的敲门砖,一份好的简历必然会给你带来更多的机会,我们写简历尽量要做到一点: 一眼就可以看到这个人有什么技能或能力,过去取得了哪些成就,适合负责什么业务.注意是一眼,这样既能突出自身优势,也节约hr的时间,因为校招时期hr一天要筛选几百份简历,人家没时间去细看每一份简历,所以就要求我们写简历一定要突出重点,吸引眼球.下面将详细介绍

封装一个类搞定90%安卓客户端与服务器端交互

本实例封装了一个处理安卓客户端与服务器端交互的几个方法,对于中文乱码问题本实例也找到了解决方案.本例可以处理的场景如下: 1.与服务器端交互json数据. 2.Get方式与服务器端交互数据. 3.Post方式与服务器端交互数据. 4.HttpClient方式与服务器端交互数据. 5.上传文件到服务器端. 6.从服务器端下载文件. 7.从服务器端读取文本文件. 实例截图: 本篇文章将实例代码完整贴出,希望以本文作为一个交流的平台,大家集思广益封装出更好的处理类.交流地址: http://blog.

Spark技术内幕:一个图搞定Spark到底有多少行代码

Spark1.0.0发布一个多月了,那么它有多少行代码(Line of Code, LOC)? 注:代码统计未包含测试,sample. Spark技术内幕:一个图搞定Spark到底有多少行代码

Javascript:实操---导航条滚动

CSS部分 <style>*{ margin:0; padding:0;}.out{ position:absolute;}.tabs{ width:300px; height:100px; margin-top:20px; position:absolute;}.slider{ height:7px; width:79px; border-bottom:2px solid #E4393C; text-align:center; overflow:hidden; position:absolu

收不到Win10正式版预订通知?一个批处理搞定

目前,已经有不少Win7.Win8.1用户在系统右下角收到Win10正式版的预订提示窗口.点击接受预订后,系统会将Win10正式版所需的安装文件提前下载好,7月29日正式发布的时候,就可以第一时间升级了. 不过,也有不少用户反映自己尚未收到提示,外媒ghacks提供了一系列解决办法,大家不妨试试,据说这些方法还是挺有效的. 这里将可能遇到的问题做成了一个批处理文件(点此下载),解压后即可得到win10fix_full.bat文件,以管理员身份运行后,会出现如下提示: 按任意键继续,出现版本列表,

iOS之下拉放大,上推缩小,一个方法搞定

先来看看效果吧. 讲讲大概的实现思路:1?创建头部的视图和tableview,需要注意的是tableview要设置contentInset,contentInsent 的顶部要和头部视图的背景图的高度一样,否则会有空隙(或是有遮挡).myTableView.contentInset = UIEdgeInsetsMake(headRect.size.height-navHeight-navHeight, 0, 0, 0);2?对头部视图的背景图片的尺寸进行处理,当然,你也可以直接找一个适合尺寸的图