iOS 开发,渐变导航栏的一种实现方法

前言

已经很久没有写博客了,我的博客一般都是对我工作中遇到的问题的一个总结已经自己学习中遇到的一些心得,刚刚迭代的公司的项目中,有个我做的界面要实现一个渐变导航栏的效果(一开始为透明导航栏,随着滚动视图的滚动,导航栏出现然后渐变到完全不透明),在网上也搜到了很多资料,demo和相关的blog更是多的数不清,我这里介绍一下我自己的实现方法,不喜勿喷呀
github传送门 <a href="https://github.com/iOScoderZZJ/ZZJNavigationBar">demo下载</a>

讲解

-其实代码很简单
首先来看进入这个界面的基础设置,我这个demo是将这几句话写到了控制器的viewDidLoad方法中,但是我项目中写到了viewWillAppear中,根据自己的需求进行书写就可以了

//设置navigationBar的barTintColor,也就是最后变成不透明时的颜色
self.navigationController.navigationBar.barTintColor = [UIColor yellowColor];
//在这个demo中设置这句没有任何的作用,如果该控制器是push过来的时候,要将这句写上
self.navigationController.navigationBar.translucent = YES;
//设置透明
[[[self.navigationController.navigationBar subviews]objectAtIndex:0] setAlpha:0];

-核心代码
是运用到了UIScrollViewDelegate中的代理方法-(void)scrollViewDidScroll:(UIScrollView *)scrollView,这个代理方法监听了ScrollView的滚动,其子类自然也集成了该方法,如tableView

//minOffsetY 该宏定义的值为50
//maxOffsetY 该宏定义的值为200  都可以根据自己的需求进行更改
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //取出scrollView的y轴偏移量
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat alpha = 0;
    if (offsetY <= minOffsetY) {
        //navigationController的titleView,我放了一个label,demo 中有写到这里不再阐述来历
        self.titleLabel.textColor = [UIColor blackColor];
        //设置navigationBar整体的透明度
        [[[self.navigationController.navigationBar subviews]objectAtIndex:0] setAlpha:alpha];

    } else if(offsetY > minOffsetY && offsetY <= maxOffsetY){
       //根据偏移量的多少来设置背景的alpha值
        alpha = offsetY / (maxOffsetY - minOffsetY);
         self.titleLabel.textColor = [UIColor redColor];
        //设置alpha
        [[[self.navigationController.navigationBar subviews]objectAtIndex:0] setAlpha:alpha];
    }else{
        //偏移量大于一个值后,讲背景设置为完全不透明
        [[[self.navigationController.navigationBar subviews]objectAtIndex:0] setAlpha:1];
    }
}

这样我们就用很简单的代码完成了渐变导航栏的一个效果,并且讲titleView的颜色改变(目的是为了如果滚动的界面很长,界面上部分和下部分的色调不一致,为了让用户清晰的看到该视图,从而改变颜色,行成与背景之间的反差,左右的item同理)
-效果图
来看看效果图吧,这里我故意把tableViewCell在第五行以后的背景颜色进行了改变,颜色丑,见谅^ ^

渐变导航栏.gif

最后

今天的一个小分享就到这里了,如果对你有所启发欢迎like,大神勿喷啊..
我是iOS开发的小菜鸡,希望有一天能成为雄鹰
路途很长,还需修行

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

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,133评论 25 707
  • 华为贴吧爬虫 程序爬了6000页就被百度封掉,你们回去可以改下贴吧的,比如爬小米吧或者其他娱乐的吧,将页面数改成小...
    大邓和他的python阅读 976评论 10 1
  • 因为是端午节,所以找来屈原的生平来看了一下,很多文章都在剖析屈原的死因,他为何要跳江自杀呢?在屈原被流放后,郢都被...
    莜薇阅读 445评论 0 0