毛玻璃效果与渐变

原图

毛玻璃效果与渐变

毛玻璃效果

UIToolbar有一个属性:barStyle,设置对应的枚举值来呈现毛玻璃的样式,最后再添加到需要进行毛玻璃效果的view上即可.

- (void)toolbarImpl {
    UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH)];
    toolbar.barStyle = UIBarStyleBlackTranslucent;
    [self.view addSubview:toolbar];
}

观察UIToolbar的试图结构：UIBarBackgournd、UIVisualEffectView、UIVisualEffectFilterView

UIToolbar结构.png

在iOS8.0之后,苹果新增了一个类UIVisualEffectView，通过UIVisualEffectView即可实现毛玻璃效果。
UIVisualEffectView在初始化时，需要一个UIVisualEffect参数。另外UIVisualEffect是一个抽象类,需通过它下面的子类来实现。UIBlurEffect, UIVibrancyEffect。

- (void)visualEffectViewImpl {
    /*
     毛玻璃的样式(枚举)
     UIBlurEffectStyleExtraLight,
     UIBlurEffectStyleLight,
     UIBlurEffectStyleDark
     */
    UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = CGRectMake(0, 0, ScreenW, ScreenH);
    [self.view addSubview:effectView];
}

渐变

渐变可通过 CAGradientLayer 实现。只需设置其颜色数组、起点与终点。

- (void)graduallyChangingColor {
    UIView *backView = [UIView new];
    backView.frame = CGRectMake(0, -20, ScreenW, 64);
    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
    gradientLayer.frame = CGRectMake(0, 0, ScreenW, 64);
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithHex:0xe8292a alpha:0.76].CGColor,(__bridge id)[UIColor colorWithHex:0x60d653 alpha:0.28].CGColor];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1.0);
    [backView.layer addSublayer:gradientLayer];
    backView.userInteractionEnabled = NO;
    backView.alpha = 0.5;
    
    [self.navigationController.navigationBar addSubview:backView];
}

demo地址：https://github.com/taoGod/frostedGlass;