IOS 7 Notification Center Like Label

Question

In the iOS7 notification center, shortcuts (and separator lines) have a very interesting background: a blur image and what looks like a soft glow mode.

I'm not sure what to look for. An indicator of how this can be done will be truly appreciated.

So far, I have tried to reproduce the effect by setting part of the blurry image as the background using label.textColor = [UIColor colorWithPatternImage:...] . This also does not take into account the case when the background is completely black (or white) and leads to the fact that the text becomes unreadable.

But this does not seem to work correctly.

Like this:

Here is what I tried:

 - (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]; } 

This code leads to the code Result http://caughtinflux.com/static/result.png
As you can see, this does not look like an NC label.

EDIT
The blurred background of the image for the text should match the actual background as much as possible. Hopefully a screenshot of my simulator of my code will help to understand what I'm saying.

Answer 1

Have you tried setting the alpha value of the labels yet (as simple as it seems)? You can try this and maybe add a little white to the blur before applying it to the tag.

Answer 2

This is a blur effect. You can find the Apple category on UIImage with this effect which can be downloaded here . The file name is UIImage + ImageEffects.h / UIImage + ImageEffects.m. You can use it like this:

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

// Extended

You can create your own view with inscriptions on it, let's say the white color of the text (to highlight when you blur the whole view), and after that you can create a snapshot of this view and set it as the background you can use (via [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]; } 

Let me know this is what you need. If this does not help, will you explain in more detail what you want to achieve?

Answer 3

I have an example project with a notification center such as delimiters, selected background views and (for today).

You can look here: https://github.com/mikrohard/BluredTableView

There may be some errors, performance issues, etc. But feel free to use and improve it.