注意:本篇所講的內容是基于iOS8以上系統的。
iOS7開始的毛玻璃效果到現在已經3年了,但是如此酷炫的效果,你們除了系統導航欄和tab欄以外,還會在其它地方添加使用嗎?
其實很多地方加入這個效果都會讓你的app錦上添花,例如tableView的section header。在- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
這個代理方法中返回UIVisualEffectView
就可以實現這個效果,舉個栗子:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIVisualEffectView *view = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight]];
view.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 40);
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(20, 0, CGRectGetWidth(self.view.frame) - 10, 45)];
label.text = @"哈哈啊哈哈哈哈";
[view.contentView addSubview:label];
return view;
}
section header的毛玻璃效果
還有一個典型的應用是全屏的遮罩。例如需要彈出提示窗的或是菜單的時候,可以將原來半透明的黑色背景換成毛玻璃效果,像這樣:
毛玻璃遮罩
UIVisualEffectView
的使用也極其簡單,初始化的時候通過initWithEffect:這個方法為他指定模糊效果即可。三種Blur效果大家可以自己嘗試對比。
觀察細致的小伙伴可能注意到上面那張圖片中的文字也是有特殊效果的,可以透出背景的顏色,這是如何做到的呢?這實際上是將承載文字的Label放在了一個UIVisualEffectView
中,而這個UIVisualEffectView
的effect就是UIVibrancyEffect
。拿上面圖片的效果舉例,具體實現是這樣:
1、創建一個背景遮罩View
UIVisualEffectView *vfv = [[UIVisualEffectView alloc]initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
2、再創建另一個UIVisualEffectView
用于承載Label實現文字的穿透效果
UIVisualEffectView *tev = [[UIVisualEffectView alloc]initWithEffect:[UIVibrancyEffect effectForBlurEffect:(UIBlurEffect *)vfv.effect]];
3、創建一個label,將label添加到tev上面,將tev添加到vfv上面
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(40, 100, 200, 200)];
lbl.text = @"觀察細致的小伙伴可能注意到上面那張圖片中的文字也是有特殊效果的,可以透出背景的顏色,這是如何做到的呢?";
lbl.numberOfLines = 0;
[tev.contentView addSubview:lbl];
[vfv.contentView addSubview:tev];
順利的話你應該已經看到酷炫的效果了