毛玻璃效果与渐变_IT百科

UIToolbar有一个属性:barStyle,设置对应的枚举值来呈现毛玻璃的样式,最后再添加到需要进行毛玻璃效果的view上即可.

观察UIToolbar的试图结构：UIBarBackgournd、UIVisualEffectView、UIVisualEffectFilterView

在iOS8.0之后,苹果新增了一个类UIVisualEffectView，通过UIVisualEffectView即可实现毛玻璃效果。

UIVisualEffectView在初始化时，需要一个UIVisualEffect参数。另外UIVisualEffect是一个抽象类,需通过它下面的子类来实现。UIBlurEffect, UIVibrancyEffect。

渐变可通过 CAGradientLayer 实现。只需设置其颜色数组、起点与终点。

demo地址： https://github.com/taoGod/frostedGlass

如何通过 ToolBar 模拟出图片的毛玻璃效果。首先我们新建一个工程，工程模板切换到 iOS ，选择 Single View Application ，如下图所示：

点击 Next ，命名任意，Language 选择 Objective-C，如下图所示：

输入完工程名之后，继续点击 Next ，选择一个在你 Mac 上用于存储工程文件的目录完成即可，工程建立好之后开始我们今天的代码之旅。

既然需要模拟图片的毛玻璃效果，我们首先当然就需要一张图片，我这里用了一张周杰伦第一张专辑的封面作为本节内容的图片素材，图片如下：

接下来，将这张图片拖动到刚才建立好的工程文件的文件夹 Assets.xcassets 中，如下图所示：

现在点击左侧文件列表选择 ViewController.m 文件，这时候会在文件列表右侧代码区域显示相关代码，接下来我们书写代码，完成我们今天想要达到的效果。

需要注意的是，以下代码我们需要写在 viewDidLoad 方法中，OK，开始。

第一步，我们首先对图片进行处理，将图片添加进 iPhone 界面，并全屏显示。相关代码如下：

创建 UIImageView 对象用于存储图片，代码如下：

设置图片尺寸占据整个屏幕，代码如下：

指定待显示图片资源，代码如下：

设置图片显示模式，代码如下：

在 iPhone 上显示 image 图片，代码如下：

先来看一下现在效果如何，运行模拟器，效果如下：

这样我们就将这张图片添加到了 iPhone ，并进行了全屏显示，由于图片比例和 iPhone 比例不一致，所以这里略显比例失衡，大家可以找一张比例一致的图片进行测试，接下来我们看下一步如何制作毛玻璃效果。

第二步，制作毛玻璃效果，这里我们利用 ToolBar 覆盖在图片上来模拟毛玻璃的效果，具体 *** 作方法就是先建立一个 ToolBar 对象，然后设置它的尺寸和图片尺寸一致，即设置为屏幕尺寸，然后覆盖在图片上即可，相关 *** 作代码如下。

创建 ToolBar 对象，代码如下：

设置 ToolBar 尺寸和图片尺寸一致，代码如下：

设置毛玻璃效果，代码如下：

将 toolBar 添加到图片上覆盖图片，代码如下：

运行模拟器，效果如下：

这是黑色的毛玻璃效果，关于毛玻璃还有一种默认的白色效果，只需将毛玻璃效果设置代码修改为如下代码即可：

运行模拟器，效果如下：

但个人觉得黑色要更加好看一些，所以这里我使用黑色，我将设置代码还原为黑色效果。

现在，图片已经出现了毛玻璃效果，比较模糊，如果这时候我们在毛玻璃上写字，那么这个字一定会异常清晰，要不要试试看，OK，我们来继续在毛玻璃上面写点字看一下效果，我们就在图片下方写上这张专辑的名字吧。

第三步，添加文字，相关代码如下。

创建 Label 对象，代码如下：

设置文字显示位置，代码如下：

设置文字显示颜色为白色，代码如下：

设置文字居中对齐，代码如下：

设置文字显示内容，代码如下：

将文字添加到 toolBar 上进行显示，代码如下：

运行模拟器，效果如下：

至此，全部代码写完，完成今天毛玻璃效果图片的效果演示，完整代码如下：

<pre style="font-size:11.899999618530273pxline-height:1.45font-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-wrap:normalpadding:16pxoverflow:autobackground-color:rgb(247,247,247)color:rgb(51,51,51)margin-top:0px!importantmargin-bottom:0px!important"><code style="display:inlineoverflow:visiblebackground-color:transparentfont-family:Consolas,'Liberation Mono',Menlo,Courier,monospaceword-break:normalborder:0pxline-height:inheritword-wrap:normal">- (void)viewDidLoad { &nbsp&nbsp[superviewDidLoad]&nbsp&nbsp&nbsp&nbsp// 第一步：对图片进行处理&nbsp&nbspUIImageView*imageView = [[UIImageViewalloc]init]&nbsp&nbspimageView.frame= self.view.bounds&nbsp&nbspimageView.image= [UIImageimageNamed:@"Jay.jpg"]&nbsp&nbspimageView.contentMode= UIViewContentModeScaleToFill&nbsp&nbsp&nbsp&nbsp// 第二步：制作毛玻璃&nbsp&nbspUIToolbar*toolBar = [[UIToolbaralloc]init]&nbsp&nbsptoolBar.frame= imageView.bounds&nbsp&nbsptoolBar.barStyle= UIBarStyleBlack&nbsp&nbsp[imageView addSubview:toolBar]&nbsp&nbsp&nbsp&nbsp// 第三步：添加文字&nbsp&nbspUILabel*label = [[UILabelalloc]init]&nbsp&nbsplabel.frame= CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2+150, 100, 100)&nbsp&nbsplabel.textColor= [UIColorwhiteColor]&nbsp&nbsplabel.textAlignment= NSTextAlignmentCenter&nbsp&nbsplabel.text= @"Jay"&nbsp&nbsp[toolBar addSubview:label]&nbsp&nbsp&nbsp&nbsp[self.viewaddSubview:imageView]}</code></pre>

所谓的毛玻璃效果其实是半透明+模糊，可以用CSSfilter实现。时间不多，就抛个砖，题主可以自己找一下文档和案例。filter-CSSdiv{-moz-filter:blur(5px)-webkit-filter:blur(5px)-o-filter:blur(5px)-ms-filter:blur(5px)filter:blur(5px)}大体思路是，当出现d出层的时候，对背景层增加blurfilter，再给d出层的一定透明度就可以了。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11673047.html

毛玻璃效果与渐变

发表评论

评论列表（0条）