iOS开发——毛玻璃效果进阶

注意：本篇所讲的内容是基于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];

顺利的话你应该已经看到酷炫的效果了