iOS 7 通知中心样式标签

Question

iOS 7 通知中心样式标签

7

在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标签不相似。编辑
文本的模糊图像背景应尽可能与实际背景对齐。希望我代码的模拟器截图有助于理解我的意思。

- caughtinflux

3个回答

1

我有一个示例项目，其中包括通知中心的分隔符、选定的背景视图和标签（截至今日）。

您可以在此处查看它: https://github.com/mikrohard/BluredTableView

可能仍然存在一些错误、性能问题等。但请随意使用和改进。

- Mikrohard

一个与主题无关的自我宣传...？ - holex

没有库实现这个效果。他使用了苹果的UIImage+Effects。 - bcattle

1

你尝试过调整标签的 Alpha 值了吗（非常简单）？你可以尝试一下，或者在应用模糊效果之前在标签上添加一些白色。

- Bensge

你的第二条评论非常准确！在模糊之前，我给图像添加了一点白色色调，这样就接近我想要复制的效果了。将模糊设置为标签的文本颜色很好用，就像我上面的代码一样。谢谢！虽然我的代码使用了图像，但Greg的答案也展示了如何使用iOS中的新截屏API来创建相同的效果。 - caughtinflux

滚动条呢？@caughtinflux - Marwan Roushdy

你必须根据滚动视图的contentOffset不断调整图像。 - caughtinflux

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg · Accepted Answer

这是一个模糊效果。您可以在苹果的UIImage类中找到此效果，可在此下载。文件名为UIImage+ImageEffects.h/UIImage+ImageEffects.m，您可以像这样使用它:

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

//扩展

您可以创建带有标签的视图，例如白色文本颜色（以便在模糊整个视图时突出显示），然后您可以创建此视图的快照，并将其设置为您可以使用的视图的背景（通过[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];
            }

请告诉我这是否是你所需的。如果不是，请再次解释并提供更多细节，说明你想要实现什么。