美文网首页iOS 开发成长中心iOS 控件定制iOS学习
iOS 开发,渐变导航栏的一种实现方法

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

作者: iOScoderZZJ | 来源:发表于2017-03-20 15:41 被阅读190次

    前言

    已经很久没有写博客了,我的博客一般都是对我工作中遇到的问题的一个总结已经自己学习中遇到的一些心得,刚刚迭代的公司的项目中,有个我做的界面要实现一个渐变导航栏的效果(一开始为透明导航栏,随着滚动视图的滚动,导航栏出现然后渐变到完全不透明),在网上也搜到了很多资料,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开发的小菜鸡,希望有一天能成为雄鹰
    路途很长,还需修行

    相关文章

      网友评论

        本文标题:iOS 开发,渐变导航栏的一种实现方法

        本文链接:https://www.haomeiwen.com/subject/lvabnttx.html