美文网首页
导航栏动态渐变

导航栏动态渐变

作者: CombatReadiness | 来源:发表于2020-06-10 14:35 被阅读0次

    设置导航栏渐变关键亮点第一navigationController.navigationBar.translucent = YES;第二设置navigationController.navigationBar的背景图片,导航栏的透明度渐变其实就是背景图透明度的渐变。

    Jun-21-2021 11-31-56.gif

    我们平时应用时,导航栏渐变同时也会改变状态栏颜色和导航栏上文字和图标的颜色。

    关键代码

    /**
     注意,要在控制器里设置导航栏状态需要先在Info.plist设置View controller-based status bar appearance 为YES,
    在有导航栏的页面,一定要设置导航栏控制器preferredStatusBarStyle由visibleViewController即他的子控制决定(见BaseNavigationController),
    然后在子控制起设置preferredStatusBarStyle
     */
    - (UIStatusBarStyle)preferredStatusBarStyle {
        if (self.navBarAlpha > 0.8) {
            return UIStatusBarStyleLightContent;
        }
        return UIStatusBarStyleDefault;
    }
    
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
        CGFloat offset = scrollView.contentOffset.y;
        CGFloat alpha = offset / 40;
        self.navBarAlpha = alpha;
        NSLog(@"y轴偏移量:%f*******透明度:%f",offset,alpha);
        //这儿imageWithColor方法为自定义color转image
        [self.navigationController.navigationBar setBackgroundImage:[Tools imageWithColor:[UIColor colorWithRed:246/255.0 green:18/255.0 blue:56/255.0 alpha:alpha] size:CGSizeMake(1, 1)] forBarMetrics:UIBarMetricsDefault];
        if (alpha > 0.8) {
            [self setLightStyle];
        } else {
            [self setBlackStyle];
        }
        [self setNeedsStatusBarAppearanceUpdate];//更新状态栏
    }
    
    - (void)setBlackStyle {
        self.rightBarBtnItem.image = [[UIImage imageNamed:@"buycarblack"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor blackColor],NSFontAttributeName:[UIFont systemFontOfSize:17]};
        self.navigationController.navigationBar.translucent = YES;
    }
    
    - (void)setLightStyle {
        self.rightBarBtnItem.image = [[UIImage imageNamed:@"buycarwhite"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
        self.navigationController.navigationBar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor whiteColor],NSFontAttributeName:[UIFont systemFontOfSize:17]};
        self.navigationController.navigationBar.translucent = NO;//这儿设置为NO是为了保证导航栏一点不透明,视觉不看到下一层
    }
    
    

    特别要注意的是当导航栏背景图透明度为1.0时,若是不设置navigationController.navigationBar.translucent = NO,这时导航栏其实处于半透明的,看得到下面的图层,这儿可以根据实际需要设置,当设置为NO时,一定要记得在viewDidload中设置self.extendedLayoutIncludesOpaqueBars = YES,YES是为了保证设置导航栏translucent为NO时self.view的起点依然为(0, 0),否则会变为(0,状态栏高度+导航栏高度);出现跳动。

    具体实现可以下载demo查看

    相关文章

      网友评论

          本文标题:导航栏动态渐变

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