姚翔的部落格

iOS的毛玻璃效果View

| Comments

在iOS升级到7时,巨大的UI风格改变给我们带来了全新的视觉感受,而那个独特的Navigation Bar毛玻璃(模糊背景)效果更是让很多人赞叹不已。现在iOS 8中Apple已经添加了UIKit层对这个Blur Effect的原生支持,我是以WWDC 2014中某一个视频为契机找到了相关的内容,特此整理和记录下。我只是简单地做个Note,这里有个较完整的说明,想更深入了解的朋友请自行Google,关键词:UIBlurEffect、UIVibrancyEffect、UIVisualEffectView。

在最新的XCode里,IB中的Object Libary已经默认自带Visual Effect View的控件,可以直接拖拽使用,非常方便。如果想用代码来添加的话,大致是这样的:

1
2
3
4
5
6
  UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
  UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
  effectView.contentView.backgroundColor = [UIColor colorWithWhite:0.7 alpha:0.3];

  [self.blurView addSubview:effectView];
  effectView.frame = self.blurView.bounds;

可以发现,就算用代码也非常简便,和使用其他UI元素一样,创建并加入到view的tree中(当然也可以用autolayout来控制位置)。附赠一个小贴士,经过测试,如果加入了visual effect view后,再去修改其父view(上面代码中的self.blurView)的alpha值时,其模糊效果就会失效了,具体底层原因是什么还没深究过,这只是我个人的实践结果。

Comments