来源:HelloYeah

链接:http://www.jianshu.com/p/b8b70afeda81

下面这个界面有没有觉得很眼熟。打开你手里的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 <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,以下是效果图和代码

控制器代码:

#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(, , , )];
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){,,}];
//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一下,好人多福。https://github.com/newyeliang/HYNavBarHidden.git

iOS:导航条滚动透明度随着tableView的滚动而变化的更多相关文章

  1. iOS导航条渐变透明

    来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如 ...

  2. Android Material Design:基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出

    activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...

  3. iOS 导航条的影响

    如果是push出来的控制器,self.view的(0,0)点从状态栏下面开始: 如果有present出来的控制器,self.view的(0,0)点包含状态栏:

  4. 【iOS开发-22】navigationBar导航条和navigationItem设置:基本搞定导航条上的文字和按钮以及各种跳转

    http://blog.csdn.net/weisubao/article/details/39646739?utm_source=tuicool&utm_medium=referral (1 ...

  5. ios 修改导航条返回按钮

    ios 修改导航条返回按钮 方式一:使用系统的:可以更改系统的文字:以及通过设置导航条的颜色来达到预期的效果 UIBarButtonItem *backBtns = [[UIBarButtonItem ...

  6. iOS改变UINavigationBar导航条标题颜色和字体

    转自:http://www.2cto.com/kf/201311/260409.html iOS 5 以后 UINavigationController 可以 改变UINavigationBar导航条 ...

  7. iOS 状态栏和导航条配置

    iOS 状态栏和导航条配置 一:隐藏: [self.navigationController setNavigationBarHidden:YES animated:YES]; [[UIApplica ...

  8. iOS下简单实现滑动导航条

    功能介绍 最近在做一款ios的app,其中有一个页面需要分成三个版块,版块之间可以通过左右滑动来进行切换,也可以通过点击上方的按钮来切换,好像在android中可以用过ViewPager + Frag ...

  9. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

随机推荐

  1. linux命令行任务管理

    今天看到了linux命令行的任务管理命令感觉很实用: 1.ctrl+z  将当前前台执行的任务放到后台并暂停 2.fg恢复上次放入后台的任务 这两个命令组合起来很实用,比如在linux命令行中写pyt ...

  2. tinyhttpd ------ C 语言实现最简单的 HTTP 服务器

    工作流程: 1>服务器启动,在指定端口或随机选取端口绑定httpd服务. 2>收到一个http请求时(其实就是listen端口accept的时候),派生一个线程运行accept_reque ...

  3. 《深入浅出MyBatis技术原理与实战》——4. 映射器,5. 动态SQL

    4.1 映射器的主要元素 4.2 select元素 4.2.2 简易数据类型的例子 例如,我们需要统计一个姓氏的用户数量.应该把姓氏作为参数传递,而将结果设置为整型返回给调用者,如: 4.2.3 自动 ...

  4. IIS 7/8安装SSL证书

    文件说明:1. 证书文件1532113691949.pem,包含两段内容,请不要删除任何一段内容.2. 如果是证书系统创建的CSR,还包含:证书私钥文件1532113691949.key.PFX格式证 ...

  5. [你必须知道的.NET]第二十六回:认识元数据和IL(下)

    发布日期:2009.03.04 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. 说在,开篇之前 书接上回: 第二十四回:认识元数据和IL(上), ...

  6. Loadrunner脚本读取 XMl 文件

    Loadrunner脚本读取 XMl 文件 性能测试工程师要懂代码么?答案是必须的,好多测试员认为在 loadrunner 中编写脚本很难很牛 X . 好多人认为 loadrunner 只支持 C 语 ...

  7. MySQL常用的几个数据类型详解

    一.字符串类型 类型 范围 说明   Char(N) [ binary] N=1~255 个字节binary :分辨大小写 固定长度 std_name cahr(32) not null VarCha ...

  8. PHP7 微信支付回调失败 解决

    升级完PHP7 发现微信支付回调失败.原来是 $GLOBALS['HTTP_RAW_POST_DATA'];没有定义的问题.php7 移除了这个全局变量. 问题代码如下: 微信API :WxPay.A ...

  9. onethink 重写URL后,apache提示No input file specified

    <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{RE ...

  10. 转:攻击JavaWeb应用[7]-Server篇[1]

    转:http://static.hx99.net/static/drops/tips-604.html 攻击JavaWeb应用[7]-Server篇[1] 园长 · 2013/09/22 15:39 ...