来源: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这个视图的结构了,如下图。

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];

}

项目源码分享,希望大家喜欢,下载的时候顺便star一下,好人多福。https://github.com/newyeliang/HYNavBarHidden.git

iOS导航条渐变透明的更多相关文章

  1. iOS 导航栏 不透明

    UINavigationBar.appearance().translucent = false UINavigationBar.appearance().barStyle = UIBarStyle. ...

  2. iOS 导航条的影响

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

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

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

  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. IOS 滑动指示导航栏 渐变

    关于导航栏渐变,本人在写APP的时候,发现了各路大神各现其通,其实我觉得这个是个很简单的问题,不需要搞得那么麻烦,对个项目要求整齐来说,一般会建一个工具类,自定义View,各个同事需要的时候,直接调用 ...

随机推荐

  1. BZOJ 1192 鬼谷子的钱袋

    题目如下 Description 鬼谷子非常聪明,正因为这样,他非常繁忙,经常有各诸侯车的特派员前来向他咨询时政.有一天,他在咸阳游历的时候,朋友告诉他在咸阳最大的拍卖行(聚宝商行)将要举行一场拍卖会 ...

  2. jbpmAPI-8

    8.1. Process Instance State jBPM允许某些信息的持久性存储.本章描述了这些不同类型的持久性,以及如何配置它们.存储的信息的一个例子是运行时状态的过程.存储过程运行时状态是 ...

  3. R语言学习之主成分分析法的R实践

    主成分分析R软件实现程序(一): >d=read.table("clipboard",header=T) #从剪贴板读取数据 >sd=scale(d)  #对数据进行标 ...

  4. [LeetCode]题解:005-Longest Palindromic Substring优化

    题目来源和题意分析: 详情请看我的博客:http://www.cnblogs.com/chruny/p/4791078.html 题目思路: 我上一篇博客解决这个问题的时间复杂度是最坏情况是(O(n^ ...

  5. c# zip file and folder programmatically

    In .net 4.5 Framework, we can zip a file by this way: private static string CompressFile(string sour ...

  6. 基于FPGA的key button等开关消抖,按键消抖电路设计

    最近要用上一个key消抖的功能.于是找到了之前写的并放入博客的程序,发现居然全部有问题.http://www.cnblogs.com/sepeng/p/3477215.html —— 有问题,包括很多 ...

  7. Oracle的三种高可用集群方案

    浏览了一下Oracle官方的网页以及非官方的ppt,简单了解了一下Oracle提供的高可用方案. 主要有三种: 1. RAC RAC,  Real Application Clusters 多个Ora ...

  8. 带你一起Piu Piu Piu~

    单刀直入,今天要讲的是自己写的一个WPF动画例子.我们在看下最终效果~ 最近在重看WPF编程宝典2010,在练习第15章动画性能例子时有了些想法.原始例子如下:  原始例子(打包了整个15章的) 它是 ...

  9. perl5 第八章 子程序

    第八章 子程序 by flamephoenix 一.定义二.调用  1.用&调用  2.先定义后调用  3.前向引用  4.用do调用三.返回值四.局部变量五.子程序参数传递  1.形式  2 ...

  10. HDU 2147 kiki's game

    题解:画图可得当横纵坐标均为奇数时为必败态…… #include <cstdio> int main(){ int a,b; while(scanf("%d%d",&a ...