博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS:导航条滚动透明度随着tableView的滚动而变化
阅读量:6334 次
发布时间:2019-06-22

本文共 3846 字,大约阅读时间需要 12 分钟。

来源:HelloYeah 

链接:

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

 

原理介绍:

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

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

navigationBar.opaque = NO;

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

navigationBar.backgroudcolor = [UIColor clearColor];

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

 

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

//设置一张空的图片

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

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

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

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

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

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

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

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

 

分类介绍

  • 我写的这个分类不仅可以在系统的UITableViewController 和UICollectionViewController中使用,(系统的只需调用分类中两个方法即可)。而且当你的UIViewController中有1个或多个可以垂直滚动的scrollView都可以使用。(需要告诉控制器需要监听哪个scrollView的滚动,即设置keyScrollView).

  •  

  • 重要的是,这个分类的代码侵入性非常低,使用简单方便。当不需要这些功能的时候,你只需要注释掉几行代码即可。对原控制器没有任何影响,无需更改控制器内的其他代码结构。

分类代码

分类接口#import 
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,以下是效果图和代码

 

控制器代码:#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.

控制器代码@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];}

项目源码分享,希望大家喜欢,下载的时候顺便star一下,好人多福。

 

转载地址:http://ntioa.baihongyu.com/

你可能感兴趣的文章
9个offer,12家公司,35场面试,从微软到谷歌,应届计算机毕业生的2012求职之路...
查看>>
创建符合标准的、有语意的HTML页面——ASP.NET 2.0 CSS Friendly Control Adapters 1.0发布...
查看>>
Adobe驳斥Flash过度耗电论 称HTML5更耗电
查看>>
No!No!No! It's not fashion!
查看>>
艰困之道中学到的经验教训
查看>>
互联网生态建设落地五大挑战——保险科技生态建设 ...
查看>>
进行短视频app开发工作时,可以加入它来保护青少年 ...
查看>>
25G DAC无源高速线缆和25G光模块之间的区别
查看>>
乐乐茶完成近2亿元Pre-A轮融资,祥峰投资领投
查看>>
clickhouse修改时区
查看>>
CSS_定位
查看>>
第二十四章:页面导航(六)
查看>>
百度、长沙加码自动驾驶,湖南阿波罗智行科技公司成立 ...
查看>>
10 个 Linux 中方便的 Bash 别名
查看>>
[Server] 服务器配置SSH登录邮件通知
查看>>
全新 DOCKER PALS 计划上线,带给您不一样的参会体验! ...
查看>>
Android开发之自定义View(二)
查看>>
python爬虫之微打赏(scrapy版)
查看>>
自制操作系统Antz day08——实现内核 (中) 扩展内核
查看>>
poj-1056-IMMEDIATE DECODABILITY(字典)
查看>>