变得模糊:快速的iOS技巧,用于模糊的表格视图单元

我刚刚在应用程序商店中发布了天气应用程序Celsius和Fahrenheit,这非常令人兴奋,并且会获得其博客文章,但是在此之前,我想谈一谈我很高兴在构建时使用的一项很酷的功能我的应用

UIBlurEffect

我已经说明了一个看起来很酷的空间背景场景,就像任何有理性的人使用一个很酷的背景构建一个表格视图一样,都不希望所有令人敬畏的事物完全消失在纯色表格视图单元格后面。 我尝试调整Alpha,但它缺少我想要的某些辐射效果。 在今天的扩展或聚光灯下搜索之前,我曾看到过很大的模糊,但还不知道如何将它们变成我自己的并将其放入表格竞争单元格。 走进了UIVisualEffect和UIBlurEffect。

这是我构建的演示项目的屏幕截图,演示了一些模糊效果。 我使用了色彩鲜艳的背景和一艘太空飞船来帮助更好地看到效果。

使用默认的表视图单元格,结果就是这样。 您可以看到为什么它需要一些帮助。 出于我自己的娱乐考虑,我选择在表视图中填充宇航员的姓名和他们所飞入的航天器的名称。我将行分开,每行各有一个部分,以便在连续两次之间调整空白细胞。

现在,如果我将带有模糊效果的UIVisualEffectView放到情节提要中的原型单元内容视图中,就会看到此情况。

将UIVisualEffectView添加到情节提要中的表格视图只会在单元格上方或下方添加模糊效果。

我决定以编程方式在tableView:cellForRowAtIndexPath:方法中添加视觉效果视图和模糊效果,并认为看完结果后可以继续使用。

但不要上当!!! 当表格视图滚动出并再次进入视图时,每次调用tableView:cellForRowAtIndexPath:都会添加一个新的视觉效果视图。 与Gherman Titov和他的飞船Orel(Eagle)一起检查底部单元。 它越来越亮!!!

我们使用Xcode中的Debug View Hierarchy按钮来确认这一点,并且可以看到所有添加的视觉效果视图堆叠在底部单元上方。

在尝试添加逻辑以测试单元格是否具有视觉效果视图并尝试添加一个逻辑效果视图后,我决定通过在我的自定义单元格初始化中将UITableViewCell子类化并在代码中使用UIBlurEffect构建UIVisualEffectView来解决此问题。 。

首先,我在第19行初始化了模糊效果,并且从UIBlurEffectStyleExtraLight,UIBlurEffectStyleLight和UIBlurEffectStyleDark中选择了三种不同的模糊。 初始化模糊效果后,我在第21行的视觉效果视图中使用了方便的initWithEffect:instancetype方法,在第23行将视图的框架设置为单元格的边界,并在第26行添加了子视图。

最后,我回头将情节提要中的单元原型类设置为我的自定义类,然后运行该项目。

在我的天气应用程序摄氏和华氏度(可在App Store中购买(无耻的插件!))中,我使用常规的视图控件并添加了表格视图,以便可以设置背景图像,并且单元格可以在静止的背景上移动。 它给了我想要的美感,但是却带来了一些意想不到的复杂性。 我将很快添加一个博客文章,以显示您知道要查找的内容后如何快速解决这些问题。 敬请关注!!!