在iOS上如何实现晕影效果？

Question

当弹出UIAlertViews时，背景会产生一个小插曲效果。也就是说，边缘会变暗，中心会变亮。

我想知道这种小插曲效果是否内置于Cocoa Touch中。我想在我的自定义视图后面显示这种小插曲效果。

- JoJo

---

我也曾经想过这个问题！大多数显示自定义警报或HUD图标的应用程序只是简单地添加了一个透明黑色覆盖层，看起来非常糟糕。 - BoltClock

你可能只需要使用一个内嵌的box-shadow来实现这个效果，我是一名Web开发者，所以这就是我能说的了。 - James Kyle

@James Kyle：这不是一个网站，而是一个应用程序。 - JoJo

是的，我知道，但你不能在iOS上使用CSS吗？ - James Kyle

不在 WebView 之外，而大多数应用程序都不是。 - Seva Alekseyev

这个链接 https://github.com/jdg/MBProgressHUD 有什么影响。 - hoshi

Answer 1

这个功能已经嵌入到UIKit中（就像UIAlertView是UIKit的一部分），但它不是公开的。

然而，创建相同的效果应该不会太难。 它只是一个径向渐变，可以在代码或Photoshop中绘制。

更新：如果您必须知道，背景是一个名为_UIAlertNormalizingOverlayWindow的类，具有以下类层次结构：

_UIAlertNormalizingOverlayWindow
_UIAlertOverlayWindow
UIWindow

- Can Berk Güder

---

这个应用程序使用了未记录的东西，它不会被拒绝吗？ - JoJo

Answer 2

创建一个名为VignetteEffect的类作为UIView子类。

在你的-drawRect:方法中添加以下代码：

- (void)drawRect:(CGRect)rect
{

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGColorSpaceRef colSp = CGColorSpaceCreateDeviceRGB();

    CGGradientRef gradient = CGGradientCreateWithColors(colSp, (__bridge CFArrayRef)[NSArray arrayWithObjects:(id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0] CGColor], (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:0.5] CGColor], nil], 0);

    CGContextDrawRadialGradient(context, gradient, self.center, 0, self.center, self.frame.size.height+self.frame.size.height/4, 0);

    CGColorSpaceRelease(colSp);
    CGGradientRelease(gradient);

}

根据您的喜好调整数值。

将其添加到任何视图中即可。Et voila。一个漂亮的晕影效果。

- the_critic

---

这是一个不错的解决方案，但速度较慢。我建议使用预渲染图像。 - Léo Natan

@LeoNatan 确实，但就可定制性而言，这是一个更合适的解决方案。 - the_critic

非常好的解决方案，非常感谢！ - michaelsnowden

Answer 3

事实上，这个效果是通过额外的图片实现的 - 一个带有imageview的单独窗口显示在uialertview下面。那个窗口使得你不能选择或触摸任何其他视图。如果你想要那张图片，可以在这里找到。

- DanZimm

---

我知道如何手动完成，但我想知道系统是否提供了这个功能。这有点像任何人都可以复制UISwitch，但这并不是一个好主意，因为正如你从iOS 4到5所看到的那样，他们改变了UISwitch的样式。 - JoJo

我怀疑UIKit不会使用图像来实现这个。 - Can Berk Güder

我保证它确实可以，事实上我百分之百确定；）。是的，我不知道公共方法，但你肯定可以研究私有方法。 - DanZimm

@DanZimm，你说的图片确实没错。SpringBoard.app中有4个名为spotlight*.png的文件。但是你提供的链接似乎不是其中之一。 - Can Berk Güder

我链接的是一个旧版本，我想它已经更名了。 - DanZimm

Answer 4

SVProgressHud可以实现这种效果，查看代码中详细介绍了SVProgressHUDMaskTypeGradient。

- BarrettJ

Answer 5

我认为所选答案不正确且可能存在危险。这是我的解决方案：

我从SVProgressHud中复制了渐变绘图代码，并将其放入我的SSGradientView分支中：

SSGradientView *vignette = [SSGradientView new];
vignette.frame = [UIScreen mainScreen].currentBounds;
vignette.backgroundColor = [UIColor clearColor];
vignette.direction = SSGradientViewDirectionRadial;
UIColor *startColor = // We just need the colorspace.
UIColor *endColor = // Visible vignette color.
vignette.colors = @[
[startColor colorWithAlphaComponent:0.0f], 
[endColor colorWithAlphaComponent:1.0f] ];
vignette.locations = @[ @0.4f, @1.0f ];
[view insertSubview:vignette atIndex:0]; // Or equivalent.

- hlfcoding