原圖
毛玻璃效果與漸變
毛玻璃效果
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];
}
