iOS的毛玻璃效果

简要说明

毛玻璃(高斯模糊)效果是iOS开发中经常使用到的一个实现模糊效果的技能,实现这个效果有三种方法:

  1. 在iOS 8之前是通过UIToolbar 方式实现,使用也是非常简单,几行代码搞定。
  2. iOS 8之后苹果新增了一个类 UIVisualEffectView,通过这个类来实现毛玻璃效果与上面的 UIToolbar 一样,而且效率也非常之高,使用也是非常简单,几行代码搞定。UIVisualEffectView 是一个抽象类,不能直接使用,需通过它下面的三个子类来实现(UIBlurEffect,UIVisualEffevt,UIVisualEffectView)。
  3. 国外大神通过对UIImageView 的分类进行封装好的第三方库** LBBlurredImage**来实现,大伙可以前往LBBlurredImage github地址看实现原理与源代码

苹果推荐我们使用第二种方法。

UIToolbar 方式实现

/*
 毛玻璃的样式(枚举)
 UIBarStyleDefault          = 0,
 UIBarStyleBlack            = 1,
 UIBarStyleBlackOpaque      = 1, // Deprecated. Use UIBarStyleBlack
 UIBarStyleBlackTranslucent = 2, // Deprecated. Use UIBarStyleBlack and set the translucent property to YES
 */
UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.view.bounds];
bgImgView.image = [UIImage imageNamed:@"huoying.jpg"];
[self.view addSubview:bgImgView];
     
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, bgImgView.frame.size.width, bgImgView.frame.size.height)];
toolbar.barStyle = UIBarStyleBlackTranslucent;
[bgImgView addSubview:toolbar];

UIVisualEffectView实现

/*
 毛玻璃的样式(枚举)
 UIBlurEffectStyleExtraLight,
 UIBlurEffectStyleLight,
 UIBlurEffectStyleDark
 */
UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.view.bounds];
bgImgView.image = [UIImage imageNamed:@"huoying.jpg"];
[self.view addSubview:bgImgView];
   
UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
effectView.frame = CGRectMake(0, 0, bgImgView.frame.size.width , bgImgView.frame.size.height);
[bgImgView addSubview:effectView];

第三方库LBBlurredImage

// 对背景图片进行毛玻璃效果处理 参数blurRadius默认是20,可指定,最后一个参数block回调可以为nil
UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.view.bounds];
[bgImgView setImageToBlur: [UIImage imageNamed:@"huoying.jpg"] blurRadius:20 completionBlock:nil];
[self.view addSubview:bgImgView];

毛玻璃效果图


毛玻璃效果图
毛玻璃效果图
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 系统控件 苹果在iOS7很多系统界面中都使用了毛玻璃效果,增加了界面的美观性,具有该效果的控件有 UINaviga...
    太郎君阅读 1,777评论 0 0
  • 话说苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如下图的通知中心界面; 效果图:...
    Mr_董阅读 1,312评论 0 0
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 难度:容易 要求: 给你一个整数n. 从 1 到 n 按照下...
    柒黍阅读 453评论 0 0
  • 故事要从何处说起?不知不觉你变成了我的小秘密。从未想过是以这种方式分离,18天里从爱你到互相“抛弃”,一切都像设计...
    Ann安墨染阅读 370评论 0 5
  • 第一次发表文章,不是因为我去刻意表现什么,或者说表达什么!单纯的只是缘于热爱,又亦是想延续青春时的梦想! ...
    无念之城阅读 389评论 0 1