iOS 7通知中心喜欢标签

在iOS7通知中心，标签（和分隔线）有一个非常有趣的背景：模糊图像和看起来像柔光混合模式。iOS 7通知中心喜欢标签

我不确定搜索什么。关于如何做到这一点的指针将非常感激。

到现在为止，我试图通过使用label.textColor = [UIColor colorWithPatternImage:...]将模糊图像的一部分设置为背景来复制效果。当背景全是黑色（或白色）并且导致文本变得不可读时，这也不能解释这种情况。

但这似乎并不正确。

像这样：

Blur example

这是我已经试过：

- (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:@"[email protected]"]; 
    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标签。

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

来源

2013-11-26 caughtinflux

您是否尝试调整标签的alpha值（尽可能简单）？您可以尝试，也可以在将其应用到标签之前为模糊添加一些白色。

来源

2013-11-26 19:30:04 Bensge

你的第二个评论是现货！模糊之前，我在图像上添加了轻微的白色色调，与我试图复制的图像非常接近。将blur设置为标签的textColor很好用，就像我上面的代码一样。谢谢！当我的代码使用图片时，Greg的回答也显示了如何在iOS中使用新的快照API来创建相同的图片。 – caughtinflux

如何滚动？ @caughtinflux –

你必须不断调整图像的contentOffset的滚动视图 – caughtinflux

这是模糊效果。您可以在UIImage上找到Apple的类别，其效果为available for download here。该文件的名称是的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]; 
      }

让我知道这是你需要的东西。如果它不能解释一遍，有更多的细节，你想达到什么目的？

来源

2013-11-26 12:01:20 Greg

这是[链接]（https://developer.apple.com/downloads/download.action?path=wwdc_2013/wwdc_2013_sample_code/ios_uiimageeffects.zip）到该文件。 – Greg

我也使用相同的类别，但这并没有真正回答我的问题，只是告诉我如何模糊。 – caughtinflux

这与我工作过的代码类似（请参阅编辑），但不会尝试将用作文本颜色的图案图像与实际背景对齐。 – caughtinflux

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

你可以在这里看看吧：https://github.com/mikrohard/BluredTableView

可能仍有一些缺陷，性能比较的问题，等等。但是随意使用和改进。

来源

2013-12-29 10:25:39 Mikrohard

一个脱离主题的自我广告......？ – holex

库没有实现这种效果。他使用Apple的UIImage + Effects – bcattle

iOS 7通知中心喜欢标签

回答

相关问题