在很早之前就看到了「微信读书」上的个人页面,初次见这个毛玻璃效果就让我吃了一🐳。背景是用头像的图片虚化,让人看到这个页面的颜色简直和谐死了,舒服死了,个性死了!我为什么脑中只剩“精致”一词来形容它!再转身看看自己搭建的个人页。。。。额,背景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:我试了其中一种,卡💔,如果有大神用着不卡,麻烦传授👊