毛玻璃效果

要想完成毛玻璃效果,其实有很多种途径:

  1. 第三方:DRNRealTimeBlur
  2. CoreImage:图片加高斯模
  3. UIToolBar
  4. 美工

UIToolBar

将 toolBar 覆盖到要添加的图片上面,就可以让图片有毛玻璃效果,其中 setBarStyle 可以设置毛玻璃效果的颜色什么的

1
2
3
4
5
6
7
// 添加毛玻璃效果
UIToolbar *toolBar = [[UIToolbar alloc] init];
[self.albumView addSubview:toolBar];
[toolBar setBarStyle:(UIBarStyleBlack)];
[toolBar makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.top.left.right.equalTo(self.albumView);
}];

iOS8 刚出的 UIBlurEffect UIVisualEffectView

苹果在iOS 7中将界面改为扁平化,并大量使用了毛玻璃效果。比如手机上拉和下拉菜单的背景等。iOS7 并没有将这些 API 公布出来。但iOS 8 SDK中直接提供了 UIBlurEffect 类与 UIVisualEffectView 类,可以实现毛玻璃效果。这两个类的使用方法非常简单,步骤是:

  1. 创建UIBlurEffect类的实例,并指定某一种毛玻璃效果。

  2. 创建UIVisualEffectView类的实例,将步骤1中的UIBlurEffect类的实例应用到UIVisualEffectView类的实例上。

  3. 将UIVisualEffectView类的实例置于待毛玻璃化的视图之上即可。

下面以一个简单的例子来演示,效果如下图所示。(其实用 storyboard 更简单,可以不用使用代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Blur Effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *bluredEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[bluredEffectView setFrame:self.selectedDetailsView.bounds];

[self.selectedDetailsView addSubview:bluredEffectView];

// Vibrancy Effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.selectedDetailsView.bounds];

// Add Label to Vibrancy View
[vibrancyEffectView.contentView addSubview:self.movieTitle];
[vibrancyEffectView.contentView addSubview:self.movieReleaseDate];
[vibrancyEffectView.contentView addSubview:self.movieDetails];

// Add Vibrancy View to Blur View
[bluredEffectView.contentView addSubview:vibrancyEffectView];
文章作者: Ammar
文章链接: http://lizhaoloveit.cn/2015/09/23/%E6%AF%9B%E7%8E%BB%E7%92%83%E6%95%88%E6%9E%9C/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ammar's Blog
打赏
  • 微信
  • 支付宝

评论