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

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

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

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

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

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

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

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

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

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

UIImageView *imageView = [[UIImageView alloc]init];

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

imageView.frame = self.view.bounds;

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

imageView.image = [UIImage imageNamed:@"Jay.jpg"];

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

imageView.contentMode = UIViewContentModeScaleToFill;

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

[self.view addSubview:imageView];

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

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

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

创建 ToolBar 对象，代码如下：

UIToolbar *toolBar = [[UIToolbar alloc]init];

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

toolBar.frame = imageView.bounds;

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

toolBar.barStyle = UIBarStyleBlack;

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

[imageView addSubview:toolBar];

运行模拟器，效果如下：

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

toolBar.barStyle = UIBarStyleDefault;

运行模拟器，效果如下：

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

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

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

创建 Label 对象，代码如下：

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 上进行显示，代码如下：

[toolBar addSubview:label];

运行模拟器，效果如下：

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

- (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];
}

如果你对iOS开发感兴趣，欢迎你关注我的公众号。

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

猜你喜欢