In the iOS7 notification centre, the labels (and the separator lines) have a very interesting background: the blur image, and what looks like the soft light blend mode.
I'm unsure what to search for. A pointer as to how this could be done would be really appreciated.
Till now, I've tried to replicate the effect by setting a part of the blurred image as the background using label.textColor = [UIColor colorWithPatternImage:...]. This also doesn't account for the case when the background is all black (or white), and leads to the text becoming unreadable.
But that doesn't seem to work just right.
Like this:
Here's what I've 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 results in
Code Result http://caughtinflux.com/static/result.png
As you can see, that isn't similar to the NC label.
EDIT
The blurred image background for the text should align with the actual background as much as possible. Hopefully the simulator screenshot of my code helps make sense of what I'm saying.
This is a blur effect. You can find Apple's category on UIImage with this effect available for download here. The files name is UIImage+ImageEffects.h/UIImage+ImageEffects.m any you can use it like that:
UIImage *backgImage = [image applyBlurWithRadius:2
tintColor:tintColor saturationDeltaFactor:0.8 maskImage:nil];
//Extended
You can create your view with the labels on it with lets say white text colour (to highlight in when you will blur whole view) and after that you can create snapshot of of this view and set up it as a background of the view you can use (by [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 is it something you need. If it doesn't can you explain again, with more details, what you want to achieve?
Did you try adjusting the labels alpha value yet (as easy as it sounds)?
You could try that, and maybe add a bit of white to the blur before applying it to the label.
I have a sample project with notification center like separators, selected background views and (as of today) labels.
You can have a look at it here: https://github.com/mikrohard/BluredTableView
There may still be some bugs, perfomance issues, etc. But feel free to use and improve it.
Related
So How you will set a background image to UILabel.
Here is the ways i have tried after googling and reading some of Stackoverflow posts.
I have a image and want to fit / shrink according to size of UILabel.
1 --
lblDelivery.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Tick.png"]];
and result is :
2 --
UIImage *img = [UIImage imageNamed:#"Tick.png"];
CGSize imgSize = lblDelivery.frame.size;
UIGraphicsBeginImageContext( imgSize );
[img drawInRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lblDelivery.backgroundColor = [UIColor colorWithPatternImage:newImage];
and result is :
Please help on this issue. how to i can get this image in BG perfectly
You may use a custom button rather than label having no action against button.
For that you can use this piece of code to set the background image, and it will be stratched automatically.
[yourButton setBackgroundImage:[UIImage imageNamed:#"yourImage.png"] forState:UIControlStateNormal];
Although There is no action against this button, you may also disable user intraction on this button as
yourButton.userInteractionEnabled = NO;
i'm trying to make a UIImageView with rounder corner and white border, i have subclassed a UIImageView, this is the code:
MyUIImageView.h
#interface MyUIImageView : UIImageView
#end
MyUIImageView.m
#implementation MyUIImageView
-(void)layoutSubviews
{
self.layer.cornerRadius = CGRectGetWidth(self.frame)/2.f;
self.layer.borderColor = [[UIColor whiteColor] CGColor];
self.layer.borderWidth = kLineWidth;
self.layer.masksToBounds = YES;
self.clipsToBounds = YES;
self.contentMode = UIViewContentModeScaleAspectFill;
self.backgroundColor = [UIColor colorWithRed:0.82 green:0.82 blue:0.83 alpha:1];
}
#end
this is the result:
seems fine, but there is a problem as you can see from here:
the image pops out from the borders edge, how i can avoid this problem? how i can cut the image exactly at the edge of the border?
Perhaps a better solution doesn't involve making another View at all - with two views you greatly increase complexity for animation etc, not to mention overhead to keep track of and manipulate both.
I'd instead create a shape layer and add it as a sublayer. Something like this:
CAShapeLayer border = [[CAShapeLayer alloc] init];
border.path = [UIBezierPath bezierPathWithRoundedRect: self.bounds cornerRadius: self.layer.cornerRadius];
border.strokeColor = [UIColor whiteColor];
border.fillColor = [UIColor clearColor];
self.layer.addSublayer(border)
The benefit of doing it this way is that you can add it as a method on your UIImageView subclass if you wish. You can add a border to an object and forget about it, as long as you're not changing the frame of the base object. Transforms etc affect sublayers so you can scale, rotate, etc and not have gross edges.
Hope this helps!
Create a custom border like this:
UIImage *image = [UIImage imageNamed:#"spongebob.jpg"];
UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(30, 30, 200, 200)];
[borderView.layer setMasksToBounds:YES];
[borderView.layer setCornerRadius:borderView.frame.size.width/2.0f];
[borderView setBackgroundColor:[UIColor whiteColor]];
int borderWidth = 3.0f;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(borderWidth, borderWidth, borderView.frame.size.width-borderWidth*2, borderView.frame.size.height-borderWidth*2)];
[imageView.layer setCornerRadius:imageView.frame.size.width/2.0f];
[imageView.layer setMasksToBounds:YES];
[imageView setImage:image];
[borderView addSubview:imageView];
[self.view addSubview:borderView];
Now you image does not pop out of the border.
Hope this helps :)
So the text of my playingCardLabel is #"A \u2663"
- (IBAction)flipCardButtonTapped:(UIButton *)sender
{
if([self.playingCardLabel.textColor isEqual:[UIColor whiteColor]])
self.playingCardLabel.textColor = [UIColor blackColor];
else
self.playingCardLabel.textColor = [UIColor whiteColor];
}
How come when I tap the button, only the A changes to white, the spade (or whatever it is called) remains black no matter what?
Those symbols appear to be fixed in color. Use \U2663 for the black club (♣︎) and use \U2667 for the white club (♧). There are similar black or white version of the spade, heart, and diamond.
create image from symbol of unicode using your colour. use UIImageView instead UILabel, or use UILabel with NSAttributedString + NSTextAttachment (image inside).
#implementation NSString (OSExt)
- (UIImage *)toImageWithAttributes:(NSDictionary*)attributes
{
CGSize size = [self sizeWithAttributes:attributes];
UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);
[self drawAtPoint:CGPointZero withAttributes:attributes];
CGContextRef imgctx = UIGraphicsGetCurrentContext();
// use blend mode to fill symbols like #"♣︎"
CGContextSetBlendMode(imgctx, kCGBlendModeSourceAtop);
CGContextSetFillColorWithColor(imgctx, [attributes[NSForegroundColorAttributeName] CGColor]);
CGContextFillRect(imgctx, (CGRect){CGPointZero, size});
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
#end
// use
id attrs = #{NSForegroundColorAttributeName:[UIColor greenColor]};
UIImage *image = [#"♣︎" toImageWithAttributes:attrs];
I have a UITextView and an UIImageView that I want to convert into a single image to share.
SaveImageView, is the ImageView, where I want to save the image of the textview.
The Textview can move it across the screen, so I decide to save their final position and give it to the SaveImageView.
First convert the UItextView in an image and save his position.
Then, I want to join two imageview, into a single image.
self.SaveTextView.frame = self.textView.frame;
UIGraphicsBeginImageContext (self.textView.bounds.size);
[self.textView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *resultingImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
self.SaveTextView.image=resultingImage;
//join two uiimageview
UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0.0);
[self.BaseImageView.image drawInRect:CGRectMake(0, 0, self.BaseImageView.frame.size.width, self.BaseImageView.frame.size.height)];
[self.SaveTextView.image drawInRect:CGRectMake(self.SaveTextView.frame.origin.x, self.SaveTextView.frame.origin.y, self.SaveTextView.frame.size.width, self.SaveTextView.frame.size.height)];
_SaveImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
The problem is that the place where I write in the textview is not in the same position of the saved image, the image with the text is slightly moved, when it should be the exact spot where I have written, not find where is the error.
Any Help ??
Try implement this method and call it on superview:
#implementation UIView (ScreenShot)
- (UIImage *)screenShot
{
UIGraphicsBeginImageContextWithOptions(self.bounds.size, self.opaque, 0.0);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
#end
Try this...
//Make Label
UILabel *_labelTimeOutName = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 428, 32)];
_labelTimeOutName.text = #"Your label text here";
_labelTimeOutName.minimumScaleFactor = 0.5;
_labelTimeOutName.numberOfLines = 1;
_labelTimeOutName.textColor = [UIColor whiteColor];
_labelTimeOutName.backgroundColor = [UIColor clearColor];
_labelTimeOutName.font = [UIFont fontWithName:#"TrebuchetMS-Bold" size:24];
_labelTimeOutName.textAlignment = NSTextAlignmentCenter;
//add label inside a temp View
UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 428, 32)];
tempView.backgroundColor = [UIColor clearColor];
[tempView addSubview:_labelTimeOutName];
//render image
//CGContextRef context = UIGraphicsGetCurrentContext();
UIGraphicsBeginImageContextWithOptions(tempView.bounds.size, tempView.opaque, 0.0);
// The view to be rendered
[[tempView layer] renderInContext:UIGraphicsGetCurrentContext() ]; //context];
// Get the rendered image
//////////////////////////////////////////////////////////////////////
UIImage *FinalTextIamge = UIGraphicsGetImageFromCurrentImageContext();
//////////////////////////////////////////////////////////////////////
UIGraphicsEndImageContext();
Enjoy!
I have a somewhat unusual problem. In my app, I am shadowing a UIImageView using basic Quartz2d layer shadowing. Here's my code:
imageView.layer.shadowOpacity = 1.0; // Pretty self explanatory
imageView.layer.shadowRadius = 8.0; // My softness
imageView.layer.shadowColor = [UIColor blackColor].CGColor; // Color of the shadow
imageView.layer.shadowOffset = CGSizeMake(0.0, 0.0); // Offset of the shadow
This produces a nice blur behind the image view. However, I am doing some animation with this view, and the constant recalculation of the shadowing during the transitions causes a very choppy transition. What I'd like to be able to do is create a UIImage or .png file out of the image view with the blur and its alpha intact. Here's what I've already tried:
UIGraphicsBeginImageContext(CGSizeMake(320, 396));
[imageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageWriteToSavedPhotosAlbum(viewImage, nil, nil, nil);
Since I have a shadow which "grows outside" of the image view, I can't just pass his size in the UIGraphicsBeginImageContext function. I set the correct size, but the resulting image doesn't save my alpha, instead it places a white background behind the shadow, which won't work for me because my real background is a wood texture. Also, the view isn't centered in the resulting file.
I'm pretty good with UIKit, but I'm a real noobie with Quartz 2d graphics, so if there's an obvious answer to this, send it anyway. :)
Try setting your UIImageView's backgroundColor to [UIColor clearColor] - this may enable your current solution to work.
imageView.backgroundColor = [UIColor clearColor];
UIGraphicsBeginImageContext(CGSizeMake(320, 396));
[imageView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
Source: Converting a CGLayer to a *transparent* UIImage and PNG file in CoreGraphics iphone
I've had this issue before too. My solution was not to do an image, but instead to set the shadow path to just the outline of the view you are animating.
[imageView setContentMode:UIViewContentModeScaleAspectFit];
imageView.layer.masksToBounds = NO;
imageView.layer.shadowOffset = CGSizeMake(5, 5);
imageView.layer.shadowRadius = 200;
imageView.layer.shadowOpacity = 0.5;
CGRect rect = [self rectFromImageView:imageView];
imageView.layer.shadowPath = [UIBezierPath bezierPathWithRect:rect].CGPath;
Which uses the following function which assumes the image is set to content mode aspect fit:
-(CGRect)rectFromImageView:(UIImageView *)iv {
CGRect rect = (CGRect){{0,0},iv.frame.size};
if (iv.image.size.width/iv.frame.size.width > iv.image.size.height/iv.frame.size.height) {
//rect.origin.x == 0
CGFloat sf = iv.frame.size.width/iv.image.size.width;
rect.size.height = sf*iv.image.size.height;
rect.origin.y = floor((iv.frame.size.height - rect.size.height)/2);
} else {
//rect.origin.y == 0;
CGFloat sf = iv.frame.size.height/iv.image.size.height;
rect.size.width = sf*iv.image.size.width;
rect.origin.x = floor((iv.frame.size.width - rect.size.width)/2);
}
return rect;
}
If your image is just set to fill then just using the imageView.bounds should be sufficient
Add shadow path to view like this
[view.layer setShadowPath:[[UIBezierPath bezierPathWithRect:view.bounds] CGPath]]; //add path
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowOffset = CGSizeMake(x, y);
view.layer.shadowRadius = rad;
view.layer.shadowOpacity = 0.2f;