[TOC]
UIVisualEffect(毛玻璃效果)
毛玻璃效果 均是iOS8.0开始增加的API。
主要有四个类:
@interface UIVisualEffect : NSObject <NSCopying, NSSecureCoding>
@interface UIBlurEffect : UIVisualEffect
@interface UIVibrancyEffect : UIVisualEffect
@interface UIVisualEffectView : UIView <NSSecureCoding>
UIVisualEffect
UIVisualEffect是一个继承自NSObject的创建视觉效果的基类,这个类除了继承自NSObject的属性和方法外,没有提供任何新的属性和方法。
主要使用它的两个子类:
UIBlurEffect
: blur(毛玻璃)效果UIVibrancyEffect
: 放大和调整效果通常UIVibrancyEffect对象是与UIBlurEffect一起使用,主要用于处理在UIBlurEffect特效上的一些显示效果。
@interface UIVisualEffect : NSObject <NSCopying, NSSecureCoding>
@end
----毛玻璃效果---------------
@interface UIBlurEffect : UIVisualEffect
+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;
typedef NS_ENUM(NSInteger, UIBlurEffectStyle) {
UIBlurEffectStyleExtraLight,
UIBlurEffectStyleLight,
UIBlurEffectStyleDark,
UIBlurEffectStyleExtraDark __TVOS_AVAILABLE(10_0) __IOS_PROHIBITED __WATCHOS_PROHIBITED,
UIBlurEffectStyleRegular NS_ENUM_AVAILABLE_IOS(10_0), // Adapts to user interface style
UIBlurEffectStyleProminent NS_ENUM_AVAILABLE_IOS(10_0), // Adapts to user interface style
} NS_ENUM_AVAILABLE_IOS(8_0);
@end
---放大和调整效果----------------
@interface UIVibrancyEffect : UIVisualEffect
+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect;
@end
UIVisualEffectView
UIVisualEffectView对象可以看作是效果的一个容器,实际的效果会影响到该视图对象底下的内容。
- 需要注意是的,不应该直接添加子视图到UIVisualEffectView视图中,而是应该添加到UIVisualEffectView对象的contentView中。
- 尽量避免将UIVisualEffectView对象的alpha值设置为小于1.0的值,因为创建半透明的视图会导致系统在离屏渲染时去对UIVisualEffectView对象及所有的相关的子视图做混合操作。这不但消耗CPU/GPU,也可能会导致许多效果显示不正确或者根本不显示。
@interface UIVisualEffectView : UIView <NSSecureCoding>
@property (nonatomic, strong, readonly) UIView *contentView;
// Do not add subviews directly to UIVisualEffectView, use this view instead.
@property (nonatomic, copy, nullable) UIVisualEffect *effect;
- (instancetype)initWithEffect:(nullable UIVisualEffect *)effect NS_DESIGNATED_INITIALIZER;
- (nullable instancetype)initWithCoder:(NSCoder *)aDecoder;
@end
实践
- (void)viewDidLoad {
[super viewDidLoad];
//测试字体
UILabel *ceshi1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 150, 50)];
ceshi1.text = @"测试";
ceshi1.textAlignment = NSTextAlignmentCenter;
ceshi1.font = [UIFont boldSystemFontOfSize:34];
UILabel *ceshi2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 50, 150, 50)];
ceshi2.text = @"测试";
ceshi2.textAlignment = NSTextAlignmentCenter;
ceshi2.font = [UIFont boldSystemFontOfSize:34];
//原图:
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 120, 140, 50)];
label.text = @"原图:";
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont boldSystemFontOfSize:14];
[self.view addSubview:label];
UIImageView *imgv = [[UIImageView alloc] initWithFrame:CGRectMake(150, 70, 150, 150)];
imgv.image = [UIImage imageNamed:@"pikaqiu.jpg"];
[self.view addSubview:imgv];
//毛玻璃效果:
UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 280, 140, 50)];
label1.text = @"blur毛玻璃效果:";
label1.textAlignment = NSTextAlignmentCenter;
label1.font = [UIFont boldSystemFontOfSize:14];
[self.view addSubview:label1];
UIImageView *imgv1 = [[UIImageView alloc] initWithFrame:CGRectMake(150, 280, 150, 150)];
imgv1.image = [UIImage imageNamed:@"pikaqiu.jpg"];
[self.view addSubview:imgv1];
//blur
UIBlurEffect *blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
UIVisualEffectView * blurView = [[UIVisualEffectView alloc] initWithEffect:blur];
blurView.frame = imgv1.bounds; //blurView的大小可以自行设定, 它的大小决定了显示毛玻璃效果区域的大小
blurView.alpha = 1.0f; //最好不要小于1.0
[imgv1 addSubview:blurView];
[blurView.contentView addSubview:ceshi1];
//blur+vibrancy效果:
UILabel *label2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 490, 140, 50)];
label2.text = @"blur+vibrancy效果:";
label2.textAlignment = NSTextAlignmentCenter;
label2.font = [UIFont boldSystemFontOfSize:14];
[self.view addSubview:label2];
UIImageView *imgv2 = [[UIImageView alloc] initWithFrame:CGRectMake(150, 440, 150, 150)];
imgv2.image = [UIImage imageNamed:@"pikaqiu.jpg"];
[self.view addSubview:imgv2];
//blur+vibrancy
UIBlurEffect *blur2 = [UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];
UIVisualEffectView * blurView2 = [[UIVisualEffectView alloc] initWithEffect:blur2];
blurView2.frame = imgv2.bounds;
blurView2.alpha = 1.0f;
[imgv2 addSubview:blurView2];
UIVibrancyEffect *vibrancy = [UIVibrancyEffect effectForBlurEffect:blur2]; //必须对应的blur2
UIVisualEffectView * vibrancyView = [[UIVisualEffectView alloc] initWithEffect:vibrancy];
vibrancyView.frame = imgv2.bounds;
vibrancyView.alpha = 1.0f;
//[imgv2 addSubview:vibrancyView];
[blurView2.contentView addSubview:vibrancyView]; //必须通过contentView添加
[vibrancyView.contentView addSubview:ceshi2];
}