美文网首页毛玻璃
iOS-毛玻璃、navigationBar滑动颜色渐变

iOS-毛玻璃、navigationBar滑动颜色渐变

作者: Freedom_fly | 来源:发表于2017-07-06 17:12 被阅读158次

    多数APP个人中心模块的需求是:
    头像做为大背景,并且以毛玻璃的效果显示;
    导航栏的颜色具有滑动渐变的效果。
    先说第一个功能。

    1、毛玻璃实现

    iOS8以上,官方提供了系统方法实现毛玻璃,代码如下:

    // iOS8 UIVisualEffectView
        UIImageView *bgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"car.png"]];
        bgView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
        [self.view addSubview:bgView];
        UIVisualEffectView *blurView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
        blurView.alpha = 0.9; // 控制模糊程度
        blurView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
        [bgView addSubview:blurView];
        
        UIVibrancyEffect *vibrancyView = [UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)blurView.effect];
        UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyView];
        visualEffectView.translatesAutoresizingMaskIntoConstraints = NO;
        [blurView.contentView addSubview:visualEffectView];
    

    a> UIBlurEffectStyle = UIBlurEffectStyleExtraLight;

    Paste_Image.png

    b> UIBlurEffectStyle = UIBlurEffectStyleLight;

    Paste_Image.png

    c> UIBlurEffectStyle = UIBlurEffectStyleDark;

    Paste_Image.png
    2、导航栏滑动渐变

    导航栏最开始的状态是透明的状态,可以看到后面的图片。之后随着用户的滑动颜色开始加深。
    代码如下:

    - (void)viewWillAppear:(BOOL)animated {
        [super viewWillAppear:animated];
        [self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                                      forBarMetrics:UIBarMetricsDefault];
         self.navigationController.navigationBar.shadowImage = [UIImage new];
    }
    

    在tableview或scrollview的代理方法中:

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
        CGFloat minAlphaOffset_Y = - 64;
        CGFloat maxAlphaOffset_Y = 125;
        CGFloat offset_Y = scrollView.contentOffset.y;
        CGFloat alpha = (offset_Y - minAlphaOffset_Y) / (maxAlphaOffset_Y - minAlphaOffset_Y);
        [[[self.navigationController.navigationBar subviews] objectAtIndex:0] setAlpha:alpha];
    }
    

    但是在跳转的时候需要恢复原状,即导航栏呈现不透明状态,可以封装跳转方法:

    - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{
        [[[self.navigationController.navigationBar subviews] objectAtIndex:0] setAlpha:1];
        [self.navigationController pushViewController:viewController animated:animated];
    }
    

    这样就没什么问题了。

    相关文章

      网友评论

        本文标题:iOS-毛玻璃、navigationBar滑动颜色渐变

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