前一段時間項目中用到毛玻璃效果,那時對UIBlurEffect類和 UIVisualEffectView這兩個類做了一部分了解。但當時並沒有去特別的深入研究,直到項目做完后,才靜下心來好好研究了一番。記錄一下。
iOS8之后,Apple新添加UIBlurEffect類、UIVibrancyEffect類 和 UIVisualEffectView類這三種類,用途就是對背景色進行模糊化,也就是我們稱的 "毛玻璃效果"。接下來就對具體的使用做一下分析吧。
其實細看下來,Apple對這種特效封裝的很好,所以我們使用起來的並不需要什么步驟。不得不佩服Apple的強大啊。
1、關於UIBlurEffect類
我們首先看UIBlurEffect類,Apple文檔中只給出了一個方法:
+ (UIBlurEffect *)effectWithStyle:(UIBlurEffectStyle)style;
我們實現也是這樣:
/** * 模糊效果的三種風格 * * @param UIBlurEffectStyle UIBlurEffectStyleExtraLight,//額外亮度,(高亮風格) UIBlurEffectStyleLight,//亮風格 UIBlurEffectStyleDark//暗風格 * */
//實現模糊效果
UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
2、關於UIVibrancyEffect類
文檔中給出的也是一個方法:
+ (UIVibrancyEffect *)effectForBlurEffect:(UIBlurEffect *)blurEffect;
官方給出的解釋是這樣的
/* UIVibrancyEffect amplifies and adjusts the color of content layered behind the view, allowing content placed inside the contentView to become more vivid. It is intended to be placed over, or as a subview of, a UIVisualEffectView that has been configured with a UIBlurEffect. This effect only affects content added to the contentView. Because the vibrancy effect is color dependent, subviews added to the contentView need to be tintColorDidChange aware and must be prepared to update themselves accordingly. UIImageView will need its image to have a rendering mode of UIImageRenderingModeAlwaysTemplate to receive the proper effect.
*/
翻譯如下:
UIVibrancyEffect的作用是放大和調整UIVisualEffectView內容視圖的內容的顏色,讓UIVisualEffectView的contentView中的內容看起來更加生動。它作為一個子視圖被放置在UIVisualEffectView上面,去連接UIBlurEffect。這種效果只會影響添加到UIVisualEffectView的contentView上的內容。因為活力影響是受顏色依賴的.....
我們可以看出:通常UIVibrancyEffect對象是與UIBlurEffect一起使用,主要用於處理在UIBlurEffect特效上的一些顯示效果。
下面看看實現代碼:
//實現模糊效果
UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffrct]; UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:vibrancyEffect]; // visualEffectView.backgroundColor = [ UIColor grayColor ];
visualEffectView.contentView.frame = CGRectMake(10, 100, 300, 500);
[self.view addSubview:visualEffectView];
下面我們往 UIVisualEffectView 的contentView上添加個view看看效果
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 300, 280, 90)]; label.text = @"曾經撒次考試了hhhhhhhhhhhhhhh"; label.textAlignment = NSTextAlignmentLeft; label.font = [UIFont systemFontOfSize:30]; label.tintColor = [UIColor yellowColor]; label.numberOfLines = 0; [visualEffectView.contentView addSubview:label];
上面代碼中可以看到, 我改變Label中text的顏色是使用的:tintColor ,這也是特別要注意的地方,文檔中也有專門提出,並給出了解釋:Because the vibrancy effect is color dependent, subviews added to the contentView need to be tintColorDidChange aware and must be prepared to update themselves accordingly. 所以我們使用 label.textColor去改變顏色是完全不起作用的。
運行效果圖如下:(只剪切出效果部分)

至於顏色不是設置的yellowColor,我想不需要多說了吧,這就是UIVibrancyEffect的功能。
3、UIVisualEffectView類
老規矩先看文檔:也是寥寥的四種,其中值得一提的是:contentView。這里明確告訴我們:不要直接添加子視圖去UIVisualEffectView,而是要添加到contentView上。
@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 NS_DESIGNATED_INITIALIZER;
這里我就給出一個比較完整的代碼(我們看一看UIBlurEffect類 和 UIVisualEffectView類 的效果):
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"6.jpg"]]; /** * 模糊效果的三種風格 * * @param UIBlurEffectStyle UIBlurEffectStyleExtraLight,//額外亮度,(高亮風格) UIBlurEffectStyleLight,//亮風格 UIBlurEffectStyleDark//暗風格 * */
//實現模糊效果
UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]; //毛玻璃視圖
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:blurEffrct]; visualEffectView.frame = CGRectMake(60, 100, 300, 500); visualEffectView.alpha = 0.9; [self.view addSubview:visualEffectView];
看看效果圖是不是你想要的:

關於iOS8之前的實現,可以去github上看看一些封裝庫。有很多不錯的三方庫不錯,這里就不列出了。
