05-iOS毛玻璃效果

微信读书

在很早之前就看到了「微信读书」上的个人页面,初次见这个毛玻璃效果就让我吃了一🐳。背景是用头像的图片虚化,让人看到这个页面的颜色简直和谐死了,舒服死了,个性死了!我为什么脑中只剩“精致”一词来形容它!再转身看看自己搭建的个人页。。。。额,背景only 万年不变一张简单的绿色系图片💔如果你的头像是红红的,嗯,恭喜你,配色效果会非常好看,嗯,非常好看😂
作为一个程序猿,不去勇敢写一写,试一试,是说不过去的。于是在网上一番搜索,找到了几种实现毛玻璃效果的方法,而且苹果Dady还帮我们封装好了这个效果,that is greatest!!!(好了,这么一大堆废话,我能说是为了纯粹凑字数吗,谁让简书它不让我上首页😫理科生憋半天才憋出一百字🐌)
唉,伤心事不提了,进入正题✌️:可以看出微信读书的毛玻璃效果的实现(ps:系统8.0以上有效):

[headerBgView sd_setImageWithURL:[NSURL URLWithString:[YSXUserInfo sharedYSXUserInfo].userIcon] placeholderImage:[UIImage imageNamed:@"touxiang_color"]];
UIBlurEffect * blur = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:blur];
effectView.frame = CGRectMake(0, 0, headerBgView.valueOfW, headerBgView.valueOfH);
[headerBgView addSubview:effectView];

但是如果图片白色像素居多,图片上面的白色文字就会不明显,然后有了如下处理😂👇

UIView * mengView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, headerBgView.valueOfW, headerBgView.valueOfH)];
mengView.backgroundColor = RGB(0, 0, 0, 0.2);
[headerBgView addSubview:mengView];

搞定!撒花!

我的小花花啊~

ps:还有两种实现方法,请参考 文章
又ps:我试了其中一种,卡💔,如果有大神用着不卡,麻烦传授👊

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

推荐阅读更多精彩内容

  • 前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做...
    WheatDen阅读 7,041评论 1 2
  • 话说苹果在iOS7.0之后,很多系统界面都使用了毛玻璃效果,增加了界面的美观性,比如下图的通知中心界面; 效果图:...
    Mr_董阅读 1,320评论 0 0
  • 一.取消tableView Cell的选中状态 取消之前 在cell数据(以下方法中) - (UITableV...
    轻斟浅醉17阅读 705评论 2 6
  • 在ios开发过程中,为了界面的美观,我们往往需要对一个图片进行模糊化处理,有一种朦胧美得感觉,就是所谓的毛玻璃效果...
    鲲鹏DP阅读 28,072评论 9 55
  • 上海欧洲领事馆在哪里? 南京东路地铁站2号口出,久事商务大厦,入口在四川中路上,对我这个路痴来说,出地铁口直接用高...
    绿水荡漾景天然阅读 1,536评论 2 0