如何在 iPhone 中实现图片的毛玻璃效果

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

兄弟连田心9号
2017-12-03 · TA获得超过38万个赞

知道顶级答主

回答量：12.3万

采纳率：87%

帮助的人：1.2亿

我也去答题访问个人页

关注

展开全部

如何通过 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.899999618530273px; line-height:1.45; font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace; word-wrap:normal; padding:16px; overflow:auto; background-color:rgb(247,247,247); color:rgb(51,51,51); margin-top:0px!important; margin-bottom:0px!important"><code style="display:inline; overflow:visible; background-color:transparent; font-family:Consolas,'Liberation Mono',Menlo,Courier,monospace; word-break:normal; border:0px; line-height:inherit; word-wrap:normal">- (void)viewDidLoad {    [super viewDidLoad];        // 第一步：对图片进行处理    UIImageView *imageView = [[UIImageView alloc]init];    imageView.frame = self.view.bounds;    imageView.image = [UIImage imageNamed:@"Jay.jpg"];    imageView.contentMode = UIViewContentModeScaleToFill;        // 第二步：制作毛玻璃    UIToolbar *toolBar = [[UIToolbar alloc]init];    toolBar.frame = imageView.bounds;    toolBar.barStyle = UIBarStyleBlack;    [imageView addSubview:toolBar];        // 第三步：添加文字    UILabel *label = [[UILabel alloc]init];    label.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2+150, 100, 100);    label.textColor = [UIColor whiteColor];    label.textAlignment = NSTextAlignmentCenter;    label.text = @"Jay";    [toolBar addSubview:label];        [self.view addSubview:imageView]; }</code></pre>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何在 iPhone 中实现图片的毛玻璃效果

其他类似问题

为你推荐：