In my IPhone application, I want the text in UILabel to glow for a second, then fade for a sec;. Also i want to repeat this cycle for say 3 or 4 times.
Is this possible?
As of 3.2 you there is direct support for shadows in the SDK.
label.layer.shadowColor = [label.textColor CGColor];
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);
Play with the parameters:
label.layer.shadowRadius = 3.0;
label.layer.shadowOpacity = 0.5;
And to avoid shadow being clipped by the label bouds:
label.layer.masksToBounds = NO;
Don't forget to
#include <Quartzcore/Quartzcore.h>
and link against the QuartzCore or CoreGraphics frameworks (thanks to commenters for pointing this out).
I've posted some sample code which subclasses UILabel and enables you to apply glow and soft shadows to text.
http://www.redrobotstudios.com/blog/2010/04/29/create-glow-soft-shadow-text-on-iphone/
Yes. Use beginAnimation...commitAnimation, and use the alpha value to brighten or dim the ULabel. Make sure that the default value of the UILabel's alpha starts at 0.85 and brightens to 1.0 and then dims to 0.75, and when all is done, you go back to 0.85.
There are other ways to do it such as having another view on top of the label that is gray or black and you use the same begin...commitAnimation to change the alpha on that from 0 to 0.20 or so.
There are many ways to do this, with varying quality. One way would be to subclass UILabel, and implement some kind of gradient effect in coregraphics in the drawRect method.
You can also play with the text shadow (change the colour and alpha) and see if you can come up with a decent glow.
The easiest way is probably to make a transparent glow-outline image in photoshop and place it behind your text, and then do like mahboudz suggests... fade the image in and out using coreanimation.
- (UILabel *) setUpGlowLabelWithFrame: (CGRect) frame fontSize: (int)fontSize {
UILabel* label = [[UILabel alloc] initWithFrame:frame];
label.backgroundColor = [UIColor clearColor];
label.font = [UIFont boldSystemFontOfSize:fontSize];
label.textColor = [UIColor whiteColor];
label.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
label.textAlignment = UITextAlignmentCenter;
label.layer.shadowColor = [label.textColor CGColor];
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);
label.layer.masksToBounds = NO;
label.layer.shadowRadius = 0.5f;
label.layer.shadowOpacity = 0.95;
label.numberOfLines = 2;
label.tag = 20;
return label;
}
I get the glow effect when using this.
Hope it helps.
Happy coding :)
For those of you using Swift 4, here's what I used for multiple objects to Glow the same color as they are:
let colorRed: UIColor? = timeLabel.textColor
timeLabel.layer.shadowColor = colorRed?.cgColor
timeLabel.layer.shadowRadius = 4.0
timeLabel.layer.shadowOpacity = 0.9
timeLabel.layer.shadowOffset = CGSize.zero
timeLabel.layer.masksToBounds = false
As for animating the glow, just add a timer for 3-4 loops and change .shadowOpacity to something lower.
Related
As I am new in iphone development. I want to give glow effect like "info UIButton" to "custom UIButton".
-->
Please help me in this case, to give the above effect on button tap.
I found an easy way to do as I want.
It's by enabling check mark of "Shows Touch On Highlight" property.
See the screenshot..
It's working fine for my custom buttons.
if you do not want to use image then use below code
import 'CoreGraphics framework' to use below code
-(IBAction)myButtonTapped:(id)sender
{
UIButton *tmpbtn=(UIButton *)sender;
tmpbtn.layer.shadowColor = [UIColor cyanColor].CGColor;
tmpbtn.layer.shadowRadius = 10.0f;
tmpbtn.layer.shadowOpacity = 1.0f;
tmpbtn.layer.shadowOffset = CGSizeZero;
}
To remove glow effect just add
-(void)removeBtnGlow
{
myBtn.layer.shadowColor = [UIColor clearColor].CGColor;
myBtn.layer.shadowRadius = 10.0f;
myBtn.layer.shadowOpacity = 1.0f;
myBtn.layer.shadowOffset = CGSizeZero;
}
you cut the image of glow effect like and use this code
[yourBtn setBackgroundImage:[UIImage imageNamed:#"yourimagename"] forState:UIControlStateHighlighted];
Have you tried to create an image of a glowing version of your button icon and set it in code like this:
[yourButton setImage:glowImage forState:UIControlStateHighlighted];
or in the interface builder:
As a UIBUtton category and by using glowWithProgress: you can animate glow change
#implementation UIButton (Extra)
-(void)addGlow{
[self glowWithProgress:1.0];
}
-(void)removeGlow{
[self glowWithProgress:0.0];
}
-(void)glowWithProgress:(CGFloat)progress{
CGFloat realProgress = MAX(.0f, MIN(1.0f, progress));
self.layer.shadowColor = [UIColor whiteColor].CGColor;
self.layer.shadowRadius = 10.0f;
self.layer.shadowOpacity = 1.0f * realProgress;
self.layer.shadowOffset = CGSizeZero;
}
#end
I am new to iphone.i found UILabel instance methodes very hard for me to implement.how can i use it.how can i customize the appearance of your text of a UIlabel further by subclassing UILabel.Plz i need little help to initiate.Foe example i have a label in my viewController how can i custmize it's text and hoe to subclass
.thanks in advance.
You can use so many properties of a UILabel like:
UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(5, 5, 100, 40)];
lbl.font = [UIFont fontWithName:#"Helvetica" size:12.0]; // For setting font style with size
lbl.textColor = [UIColor whiteColor]; //For setting text color
lbl.backgroundColor = [UIColor clearColor]; // For setting background color
lbl.textAlignment = UITextAlignmentCenter; // For setting the horizontal text alignment
lbl.numberOfLines = 2; // For setting allowed number of lines in a label
lbl.lineBreakMode = UILineBreakModeWordWrap; // For setting line break mode
lbl.text = #"TitleText"; // For setting the text inside the label
Let me know if any thing other than this you want to know!!
The two methods
- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines
{
return CGRectInset(bounds, MARGIN, MARGIN);
}
- (void)drawTextInRect:(CGRect)rect
{
[super drawTextInRect: CGRectInset(self.bounds, MARGIN, MARGIN)];
}
We are using CGRectInset to create a rectangle that is either larger or smaller than an existing rectangle (bounds).
For Smaller rectangle, use positive values as MARGIN
For Larger rectangle, use positive values as MARGIN
All the best!!!
something exactly like above?
I know how to produce a rounded corner:
imageView.layer.cornerRadius = 10;
imageView.layer.shouldRasterize = YES;
imageView.layer.masksToBounds = YES;
For the shadow, I have tried
imageView.layer.shadowOffset = CGSizeMake(1, 1);
imageView.layer.shadowRadius = 5;
imageView.layer.shadowOpacity = 0.4;
imageView.layer.shadowColor = [UIColor blackColor].CGColor;
imageView.layer.shouldRasterize = YES;
But imageView.layer.masksToBounds = YES; from rounded corner kills the shadow.
Another question is that how to produce a shadow exactly like shown in the image? I produced this image in photoshop, I used 120 degree as the direction of the light. But if I used the code above, and turn off maskToBounds, I can see the shadow and it is ugly.
Or can I produce a rounded corner+shadow image frame in photoshop and apply the frame to every image in my app? I think that will give better performance. shadowing and cornering the images on the fly will have terrible performance if all images are on a scroll.
Thanks
Try this :
CALayer *sublayer = [CALayer layer];
sublayer.backgroundColor = [UIColor blueColor].CGColor;
sublayer.shadowOffset = CGSizeMake(0, 3);
sublayer.shadowRadius = 5.0;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shadowOpacity = 0.8;
sublayer.frame = CGRectMake(30, 30, 128, 192);
sublayer.borderColor = [UIColor blackColor].CGColor;
sublayer.borderWidth = 2.0;
sublayer.cornerRadius = 10.0;
[self.view.layer addSublayer:sublayer];
CALayer *imageLayer = [CALayer layer];
imageLayer.frame = sublayer.bounds;
imageLayer.cornerRadius = 10.0;
imageLayer.contents = (id) [UIImage imageNamed:#"BattleMapSplashScreen.jpg"].CGImage;
imageLayer.masksToBounds = YES;
[sublayer addSublayer:imageLayer];
And take look at the original source
I would use two image views. A background png that has the shadow (can be re-used for every image) and the foreground png image which has rounded corners.
You probably want to use a different layer for shadowing, and keep your masksToBounds and rounding code. In this example imageView is the name the image view that you want to shadow and round:
CALayer *shadowLayer = [[[CALayer alloc] init] autorelease];
sublayer.frame = imageView.bounds;
sublayer.masksToBounds = NO;
sublayer.shadowOffset = CGSizeMake(1, 1);
sublayer.shadowRadius = 5;
sublayer.shadowOpacity = 0.4;
sublayer.shadowColor = [UIColor blackColor].CGColor;
sublayer.shouldRasterize = YES;
[imageView.layer insertSublayer:shadowLayer atIndex:0]; // Put it underneath the image
That should give you the shadow. Now to avoid the slow recalculating, I suggest creating a UIImage out of the image. See this link: Create UIImage from shadowed view while retaining alpha?.
Hope this helps!
I add shadow to the UIView:
[blurView.layer setCornerRadius:kCornerRadius];
blurView.layer.masksToBounds = NO;
blurView.layer.shadowColor = [[UIColor redColor] CGColor];
blurView.layer.backgroundColor = blurView.layer.shadowColor;
blurView.layer.shadowPath = [UIBezierPath
bezierPathWithRoundedRect:CGRectMake(-2.0*kCornerRadius, -2.0*kCornerRadius, blurView.bounds.size.width+4.0*kCornerRadius, blurView.bounds.size.height+4.0*kCornerRadius)
cornerRadius:kCornerRadius].CGPath;
blurView.layer.cornerRadius = kCornerRadius;
blurView.layer.shadowOffset = CGSizeMake(0.0, 0.0);
blurView.layer.shadowRadius = kCornerRadius;
blurView.layer.shadowOpacity = kOpacity;
blurView.layer.opacity = 1.0;
This part of code gives me a this view, like a uiview is blured:
When I try change opacity of blurView.layer (for example to 0.5), I get unexpected view:
As you can see - I get a sharp edges of uiview.
I think, shadow opacity is a part of opacity of layer - it's a cause of this 'error'. Can anybody help me to fix this? May be can I merge layers before change opacity of blurView.layer or something like this?
UPD
With this fix:
blurView.layer.shadowColor = [[UIColor colorWithRed:1 green:0 blue:0 alpha:0.5] CGColor];
I get this:
UPD
Answer is using setShouldRasterize method:
Thanks everybody!
[blurView.layer setShouldRasterize:YES];
The answer is using this code line:
blurView.layer.shouldRasterize = YES;
Maybe you could try putting this in?
blurView.layer.shadowColor = [[UIColor colorWithRed:1 green:0 blue:0 alpha:0.5] CGColor];
What happens if you put this :
blurView.layer.shadowOpacity = 1.0;
blurView.layer.opacity = 0.5;
I think that you might be setting the shadow opacity to 0.5 and then the whole layer to 0.5, making the shadow twice as transparent?
(or I'm completely wrong!)
I know soft shadows are not supported by the UILabel out of the box, on the iPhone. So what would be the best way to implement my own one?
EDIT:
Obviously I will subclass the UILabel and draw in the -drawRect:
My question is, how do I get the contents of the label as graphics and draw around them, blur them etc...
EDIT 2:
I returned to this question about a year later. In the meantime I've built a class that allows you to easily add soft shadow to a label and tweak it's radius etc and also to draw gradients on the text itself. You can find it on GitHub: https://github.com/doukasd/iOS-Components/tree/master/Views
As of 3.2 there is direct support for shadows in the SDK.
label.layer.shadowColor = [label.textColor CGColor];
label.layer.shadowOffset = CGSizeMake(0.0, 0.0);
#import <QuartzCore/QuartzCore.h> and play with some parameters:
label.layer.shadowRadius = 3.0;
label.layer.shadowOpacity = 0.5;
And, if you find your shadow clipped by the label bounds:
label.layer.masksToBounds = NO;
finally set
label.layer.shouldRasterize = YES;
I advise you to use the shadowColor and shadowOffset properties of UILabel:
UILabel* label = [[UILabel alloc] init];
label.shadowColor = [UIColor whiteColor];
label.shadowOffset = CGSizeMake(0,1);
This answer to this similar question provides code for drawing a blurred shadow behind a UILabel. The author uses CGContextSetShadow() to generate the shadow for the drawn text.
Additionally to IIDan's answer:
For some purposes it is necessary to set
label.layer.shouldRasterize = YES
I think this is due to the blend mode that is used to render the shadow. For example I had a dark background and white text on it and wanted to "highlight" the text using a black shadowy glow. It wasn't working until I set this property.
Apply the (soft) shadow on the view's layer, like this:
UILabel *label = [[UIabel alloc] init];
label.layer.shadowColor = [[UIColor whiteColor] CGColor];
label.layer.shadowOpacity = 1.0;
To keep things up to date: Creating the shadow in Swift is as easy as that:
Import the QuartzCore Framework
import QuartzCore
And set the shadow attributes to your label
titleLabel.shadowColor = UIColor.blackColor()
titleLabel.shadowOffset = CGSizeMake(0.0, 0.0)
titleLabel.layer.shadowRadius = 5.0
titleLabel.layer.shadowOpacity = 0.8
titleLabel.layer.masksToBounds = false
titleLabel.layer.shouldRasterize = true
_nameLabel = [[UILabel alloc] initWithFrame:CGRectZero];
_nameLabel.font = [UIFont boldSystemFontOfSize:19.0f];
_nameLabel.textColor = [UIColor whiteColor];
_nameLabel.backgroundColor = [UIColor clearColor];
_nameLabel.shadowColor = [UIColor colorWithWhite:0 alpha:0.2];
_nameLabel.shadowOffset = CGSizeMake(0, 1);
i think you should use the [UIColor colorWithWhite:0 alpha:0.2] to set the alpha value.
I tried almost all of these techniques (except FXLabel) and couldn't get any of them to work with iOS 7. I did eventually find THLabel which is working perfectly for me. I used THLabel in Interface Builder and setup User Defined Runtime Attributes so that it's easy for a non programmer to control the look and feel.
https://github.com/MuscleRumble/THLabel
This like a trick,
UILabel *customLabel = [[UILabel alloc] init];
UIColor *color = [UIColor blueColor];
customLabel.layer.shadowColor = [color CGColor];
customLabel.layer.shadowRadius = 5.0f;
customLabel.layer.shadowOpacity = 1;
customLabel.layer.shadowOffset = CGSizeZero;
customLabel.layer.masksToBounds = NO;
I wrote a library that provides a UILabel subclass with soft shadow support and a bunch of other effects:
https://github.com/nicklockwood/FXLabel
In Swift 3, you can create an extension:
import UIKit
extension UILabel {
func shadow() {
self.layer.shadowColor = self.textColor.cgColor
self.layer.shadowOffset = CGSize.zero
self.layer.shadowRadius = 3.0
self.layer.shadowOpacity = 0.5
self.layer.masksToBounds = false
self.layer.shouldRasterize = true
}
}
and use it via:
label.shadow()
Subclass UILabel, as stated, then, in drawRect:, do [self drawTextInRect:rect]; to get the text drawn into the current context. Once it is in there, you can start working with it by adding filters and whatnot. If you want to make a drop shadow with what you just drew into the context, you should be able to use:
CGContextSetShadowWithColor()
Look that function up in the docs to learn how to use it.
As of iOS 5 Apple provides a private api method to create labels with soft shadows.
The labels are very fast: I'm using dozens at the same time in a series of transparent views and there is no slowdown in scrolling animation.
This is only useful for non-App Store apps (obviously) and you need the header file.
$SBBulletinBlurredShadowLabel = NSClassFromString("SBBulletinBlurredShadowLabel");
CGRect frame = CGRectZero;
SBBulletinBlurredShadowLabel *label = [[[$SBBulletinBlurredShadowLabel alloc] initWithFrame:frame] autorelease];
label.backgroundColor = [UIColor clearColor];
label.textColor = [UIColor whiteColor];
label.font = [UIFont boldSystemFontOfSize:12];
label.text = #"I am a label with a soft shadow!";
[label sizeToFit];
While it's impossible to set a blur radius directly on UILabel, you definitely could change it by manipulating CALayer.
Just set:
//Required properties
customLabel.layer.shadowRadius = 5.0 //set shadow radius to your desired value.
customLabel.layer.shadowOpacity = 1.0 //Choose an opacity. Make sure it's visible (default is 0.0)
//Other options
customLabel.layer.shadowOffset = CGSize(width: 10, height: 10)
customLabel.layer.shadowColor = UIColor.black.cgColor
customLabel.layer.masksToBounds = false
What I hope will help someone and other answers failed to clarify is that it will not work if you also set UILabel Shadow Color property directly on Interface Builder while trying to setup .layer.shadowRadius.
So if setting label.layer.shadowRadius didn't work, please verify Shadow Color for this UILabel on Interface Builder. It should be set to default. And then, please, if you want a shadow color other than black, set this color also through .layer property.
Subclass UILabel, and override -drawInRect: