iOS毛玻璃效果
2017-03-20 本文已影响182人
xiao小马哥
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