美文网首页
iOS-导航栏,类似淘宝“我的淘宝”导航栏

iOS-导航栏,类似淘宝“我的淘宝”导航栏

作者: 牛牛爱优闲 | 来源:发表于2017-05-26 17:05 被阅读0次

    大牛路过还请赐教~

    实现的效果

    效果描述:
        1、个人中心页面,上滑操作时,导航栏从无到有渐变,背景是一张图片,不是颜色。
        2、设置按钮不管导航栏是有还是无,始终存在显示。
        3、标题“我的”随着导航栏的渐变渐变。
        4、从我的页面push进入的二级页面的导航栏背景是白色的。
    

    动态图效果:


    效果图
    其实开始做项目的时候我是搜索的第三方HYNavHidden传送门

    但是有一个 bug我不知道怎么解决,就是如果导航栏的rightItem和LeftItem是自定义按钮的话,多次push和pop时,这个自定义按钮有几次回来时是看不见的,而且标题也会闪一下。

    这个体验不太好,就自己用下面的方式实现了,虽然效果实现了,但是我经验有限,技术不精,不能保证性能,若某位大牛有更优的方案,还请赐教。

    实现要点:隐藏系统导航栏,自定义若隐若现导航栏

    1、隐藏导航栏

    设置导航栏的代理为当前控制器,实现下列代理方法
    
    #pragma mark - UINavigationControllerDelegate
    // 将要显示控制器
    - (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated {
        // 判断要显示的控制器是否是自己
        BOOL isShowHomePage = [viewController isKindOfClass:[self class]];
        
        [self.navigationController setNavigationBarHidden:isShowHomePage animated:YES];
    }
    

    或者以下代码也可以实现隐藏导航栏

    - (void)viewWillAppear:(BOOL)animated {
        [super viewWillAppear:animated];
    
        [self.navigationController setNavigationBarHidden:YES animated:NO];
    }
    
    - (void)viewWillDisappear:(BOOL)animated {
        [super viewWillDisappear:animated];
    
        [self.navigationController setNavigationBarHidden:NO animated:NO];
    }
    //⚠️这里的animated动画设置为YES的时候会有一个向上的隐藏动画,因此就设置为NO了。
    

    2、自定义导航栏

    ⚠️自定义了UI View当导航栏,因为需要实现导航栏透明但是上面的子视图设置按钮不透明所以不能使用alpha。父视图透明子视图不透明参考链接

    1、初始化自定义的导航栏;
    2、初始化导航栏父视图的时候,用以下方法([UIColor colorWithRed:(236)/255.0 green:(59)/255.0 blue:(59)/255.0 alpha:0.0];或者colorWithWhite:<#(CGFloat)#> alpha:<#(CGFloat)#>)
    

    设置颜色的alpha值为0,设置背景图片imageView和标题title的alpha值为0,保证进来页面时无导航栏,此时设置按钮还能显示出来。
    3、实现滑动视图ScrollViewDelegate的代理方法scrollViewDidScroll,计算动态的alpha值,改变alpha。

    #pragma mark - UIScrollViewDelegate 核心代码
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
        
        //初始值-20,往上滑 > -20;
        CGFloat alpha;
        
        //这里的300意思是滑动300距离的时候完全不透明,可以调节
        CGFloat offsetY = 300;
        CGPoint point = self.tableView.contentOffset;
        alpha =  point.y/offsetY;
        alpha = (alpha <= 0) ? 0 : alpha;
        alpha = (alpha >= 1) ? 1 : alpha;
        
        self.navBgImgView.alpha = alpha;
        self.titleLabel.alpha = alpha;
        self.navigationView.backgroundColor = [UIColor colorWithRed:(236)/255.0 green:(59)/255.0 blue:(59)/255.0 alpha:alpha];
    }
    

    demo地址有用的话请点个星,谢谢_

    相关文章

      网友评论

          本文标题:iOS-导航栏,类似淘宝“我的淘宝”导航栏

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