iOS 7 通知中心像标签

Question

在 iOS7 通知中心，标签(和分隔线)有一个非常有趣的背景:模糊图像，以及看起来像柔光混合模式的东西。

我不确定要搜索什么。非常感谢有关如何完成此操作的指示。

到目前为止，我已经尝试通过使用 label.textColor = [UIColor colorWithPatternImage:...] 将模糊图像的一部分设置为背景来复制效果。这也没有考虑到背景全黑(或白)的情况，并导致文本变得不可读。

但这似乎并不合适。

像这样:

这是我尝试过的:

- (void)viewDidLoad
{
    [super viewDidLoad];

    const CGFloat fontSize = 25.f;
    const NSString *text = @"A long-ish string";
    CGSize size = [text sizeWithAttributes:@{NSFontAttributeName: [UIFont fontWithName:@"Avenir Next" size:fontSize]}];
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(80, 270, size.width, size.height)];
    label.font = [UIFont fontWithName:@"Avenir Next" size:fontSize];
    label.textAlignment = NSTextAlignmentNatural;
    label.backgroundColor = [UIColor clearColor];
    label.text = text;

    UIImage *image = [UIImage imageNamed:@"wat@2x"];
    UIImage *blurredImage = [image applyBlurWithRadius:20.5 tintColor:[UIColor clearColor] saturationDeltaFactor:1.f maskImage:nil];

    UIImageView *imageView = [[UIImageView alloc] initWithImage:[blurredImage applyDarkEffect]];
    imageView.frame = self.view.bounds;

    CGFloat imgScale = image.scale;
    CGRect labelFrame = label.frame;
    CGRect realRect = CGRectMake(labelFrame.origin.x * imgScale, labelFrame.origin.y * imgScale, labelFrame.size.width * imgScale, labelFrame.size.height * 2.0);
    CGImageRef labelPatternImage = CGImageCreateWithImageInRect(image.CGImage, realRect);
    label.textColor = [UIColor colorWithPatternImage:[UIImage imageWithCGImage:labelPatternImage scale:2.f orientation:UIImageOrientationUp]];
    CGImageRelease(labelPatternImage);

    [self.view addSubview:imageView];
    [self.view addSubview:label];
}

这段代码导致 Code Result http://caughtinflux.com/static/result.png
如您所见，这与 NC 标签不相似。

编辑
文本的模糊图像背景应尽可能与实际背景对齐。希望我的代码的模拟器屏幕截图有助于理解我在说什么。

Answer 1

这是一个模糊效果。你可以在 UIImage 上找到具有这种效果的 Apple 类别 available for download here .文件名是 UIImage+ImageEffects.h/UIImage+ImageEffects.m 你可以这样使用它:

UIImage *backgImage = [image applyBlurWithRadius:2
tintColor:tintColor saturationDeltaFactor:0.8 maskImage:nil];

//扩展

您可以创建带有标签的 View ，让我们说白色文本颜色(在模糊整个 View 时突出显示)，然后您可以创建此 View 的快照并将其设置为背景您可以使用的 View (通过 [self.view setBackgroundColor:[UIColor colorWithPatternImage:blurredImage];)。

            UIView *snapshotView = [YOURUIVIEW resizableSnapshotViewFromRect:self.contentView.frame afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero];

            UIGraphicsBeginImageContextWithOptions( self.contentView.bounds.size, YES, 0.0f);
            BOOL result = [snapshotView drawViewHierarchyInRect:self.contentView.bounds
            afterScreenUpdates:YES];
            UIImage *snapshotImage =
            UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
            if (result){
                UIColor *tintColor = [UIColor colorWithWhite:0.97 alpha:0.82];
                UIImage *blurredImage = [snapshotImage applyBlurWithRadius:4 tintColor:tintColor saturationDeltaFactor:1.8
                maskImage:nil];
            }

如果您需要，请告诉我。如果不能，您能否再次详细说明您想要实现的目标？