美文网首页
iOS毛玻璃效果

iOS毛玻璃效果

作者: xiao小马哥 | 来源:发表于2017-03-20 18:07 被阅读182次
CCD23C33-C091-4DD2-BDEB-FD6A33D1C136.png ](https://img.haomeiwen.com/i1632693/14298e98c35123ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

添加UIToolbar之后的效果是这样的

11B28308-BAC0-4F3F-9A34-CE7CFB9961E4.png
完全不是毛玻璃好吧(通过层级结构看到上面确实有一个toolbar)。

同样的方法也试过另一种控件UIVisualEffectView,据说叫毛玻璃视图,同样的方法,不过之前要创建UIBlurEffect

 //实现模糊效果
UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];

//毛玻璃视图
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:blurEffrct];

同样把这个视图添加到imageView上,效果如下

7E3D3AF8-18E8-4D5E-8A8E-493912CB513F.png

稍微好了一点,能透过后面的背景颜色了,但是和自己想要的还差好多啊。

又想他们都是继承view,view有个透明度的属性(alpha),通过设置这个属性看看达到的效果!(附带一张效果图和代码)

//实现模糊效果
UIBlurEffect *blurEffrct =[UIBlurEffect effectWithStyle:UIBlurEffectStyleExtraLight];

//毛玻璃视图
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc]initWithEffect:blurEffrct];

这也不是我想要的效果好吧,

visualEffectView.alpha = 0.8;

[self.contentView addSubview:visualEffectView];

[visualEffectView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(self.logoView);
}];
B25D6457-F286-4E7A-BD83-2691FD2D06A6.png

这里有个demo实现了效果,按照设计要求并在上面添加了一个视图。
最终的效果图如下:

CCD23C33-C091-4DD2-BDEB-FD6A33D1C136.png

相关文章

网友评论

      本文标题:iOS毛玻璃效果

      本文链接:https://www.haomeiwen.com/subject/rhjinttx.html