Place text on top of other CALayer in drawRect - ios

I am trying to show text above CALayer but somehow I am not able to achieve it. I have used following code:
- (void)drawRect:(CGRect)rect
{
self.layer.sublayers = nil;
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
// Code to show grid lines clipped
CGRect overallRectForBarItem = CGRectMake(20, 20, 176, 35);
CAShapeLayer *barItemShape = [CAShapeLayer layer];
barItemShape.frame = overallRectForBarItem;
barItemShape.path = [UIBezierPath bezierPathWithRect:overallRectForBarItem].CGPath;
barItemShape.strokeColor = [UIColor lightGrayColor].CGColor;
barItemShape.fillColor = [UIColor lightGrayColor].CGColor;
[self.layer addSublayer:barItemShape];
[self drawTextForBarItem:#"TESTING" inRect:CGRectMake(100, 40, 35, 0)];
// Other code clipped
CGContextRestoreGState(ctx);
}
-(void) drawTextForBarItem:(NSString*)barItemTitle inRect:(CGRect)rect
{
float actualFontSize = 14.0;
UIFont *font = [ISUtility getSystemFont:actualFontSize];
CGSize size = [barItemTitle sizeWithFont:font];
NSMutableParagraphStyle *paragraphStyle = [[[NSParagraphStyle defaultParagraphStyle] mutableCopy] autorelease];
paragraphStyle.lineBreakMode = NSLineBreakByTruncatingTail;
paragraphStyle.alignment = NSTextAlignmentRight;
[barItemTitle drawInRect:CGRectMake(rect.origin.x, rect.origin.y - size.height/2, rect.size.width, size.height) withAttributes:#{NSFontAttributeName:font, NSForegroundColorAttributeName:[UIColor blueColor], NSParagraphStyleAttributeName:paragraphStyle}];
}
Following is the screen shot of simulator.
I have also tried zPosition but no use.
barItemShape.zPosition = -1000;

The most possible cause of you issue is that you creating CGContextRef but adding sublayer when you need to draw lightgray rectangle. I think, that it would be more consistant to draw your rectange with CoreGraphics functions and that draw your text.
To be more detailed, it seems that you drawing text in current layer but adding sublayer that will be above your text.
For instance, you can use this code to give it a try:
UIColor * redColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
CGContextSetFillColorWithColor(context, redColor.CGColor);
CGContextFillRect(context, self.bounds);

Related

UISegmentedControl tintColor gradient

I'm trying to set the foreground/tintColor of a UISegmentedControl to a horizontal gradient. I want the gradient to extend across the control and appropriately adjust when each segment is clicked. See image below:
I've tried setting the tintColor using the stackoverflow solution found here, but using colorWithPattern doesn't seem to work when I change it to be horizontal:
Here's what I'm using now:
UIView* test2 = [[UIView alloc] initWithFrame:CGRectMake(10, 60, 200, 25)];
test2.backgroundColor = [self gradientFromColor:[UIColor redColor] toColor:[UIColor greenColor] withWidth:test2.frame.size.width];
[self.view addSubview:test2];
UISegmentedControl *test = [[UISegmentedControl alloc] initWithItems:#[#"one", #"two"]];
test.frame = CGRectMake(10, 100, 200, 25);
test.tintColor = [self gradientFromColor:[UIColor redColor] toColor:[UIColor greenColor] withWidth:test.frame.size.width];
[self.view addSubview:test];
...
- (UIColor*) gradientFromColor:(UIColor*)c1 toColor:(UIColor*)c2 withWidth:(int)width{
CGSize size = CGSizeMake(width, 1);
UIGraphicsBeginImageContextWithOptions(size, NO, 1);
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
NSArray* colors = [NSArray arrayWithObjects:(id)c1.CGColor, (id)c2.CGColor, nil];
CGGradientRef gradient = CGGradientCreateWithColors(colorspace, (CFArrayRef)colors, NULL);
CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(width, 0), 0);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGGradientRelease(gradient);
CGColorSpaceRelease(colorspace);
UIGraphicsEndImageContext();
return [UIColor colorWithPatternImage:image];
}
I'm thinking I need to do some work with masking but I've been having trouble getting it to work.

Shadow and outline in button

i want put a shadow in my button, but when i put a outline in the title, the outline have a shadow, and i want put shadow only in the text.
This is my code that i use in my button:
NSShadow *shadow = [NSShadow new];
[shadow setShadowColor:self.shadowColor];
[shadow setShadowOffset:self.offset];
UIColor* strokeColor = self.outlineColor;
UIColor* fontColor = [self titleColorForState:UIControlStateNormal];
NSAttributedString *attributedText =
[[NSAttributedString alloc] initWithString:self.titleLabel.text
attributes:#{
NSShadowAttributeName:shadow,
NSStrokeWidthAttributeName:[NSNumber numberWithFloat:(-1 * self.outlineWidth)],
NSStrokeColorAttributeName: strokeColor,
NSForegroundColorAttributeName: fontColor}];
[self setAttributedTitle:attributedText forState:UIControlStateNormal];
So is i want to show the title of button:
I think the easiest way to do what you want is to stack two instances of your text on top of each other. The bottom one has no outline, but casts the narrow shadow that you want. The one on top has the outline and no shadow.
i find a solution for this question, i used the next code:
-(void)drawRect:(CGRect)rect {
[super drawRect:rect];
CGRect rectt = self.titleLabel.frame;
rect = rectt;
rectt.origin.y += self.offset.height;
rectt.origin.x += self.offset.width;
UIColor *borderColor = [self.outlineColor copy];
UIColor *fillColor = self.titleLabel.textColor;
CGContextRef context = UIGraphicsGetCurrentContext();
if (self.drawShadow) {
CGContextSetLineWidth(context, 0.0f);
CGContextSetTextDrawingMode(context, kCGTextFillStroke);
[self setTitleColor:self.shadow forState:UIControlStateNormal];
[self.titleLabel drawTextInRect:rectt];
}
if (self.drawOutline) {
CGContextSetLineWidth(context, self.outlineWidth);
CGContextSetTextDrawingMode(context, kCGTextStroke);
[self setTitleColor:borderColor forState:UIControlStateNormal];
[self.titleLabel drawTextInRect:self.titleLabel.frame];
}
CGContextSetLineWidth(context, 0.0f);
CGContextSetTextDrawingMode(context, kCGTextFillStroke);
[self setTitleColor:fillColor forState:UIControlStateNormal];
[self.titleLabel drawTextInRect:self.titleLabel.frame];
}
My class is inherited of UIButton

Unable to make UILabel text glow

I'm running the following code in viewDidLoad, it is applying the glow outside the label not on the text. Please advise.
lbl_score.font = myfont;
lbl_score.alpha = 1.0;
lbl_score.textColor = UIColor.greenColor;
lbl_score.layer.shadowColor = [[UIColor blueColor] CGColor];
lbl_score.layer.shadowOffset = CGSizeMake(0.0, 0.0);
lbl_score.layer.shadowRadius = 30.0f;
lbl_score.layer.shadowOpacity = 0.9;
lbl_score.layer.masksToBounds = NO;
I've imported QuartzCore/QuartzCore.h". I would like to apply the glow only on the label text.
Thanks
To apply a glow to the actual text in a label, you have to override drawTextInRect on the label itself. You're setting a shadow on the label's layer, which is a rectangle.
The override is quite simple. You just adjust the graphics context, call super, then restore the graphics context:
-(void)drawTextInRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, CGSizeZero, 30.0, [UIColor blueColor].CGColor);
[super drawTextInRect:rect];
CGContextRestoreGState(context);
}
You are putting a shadow on the layer, which is rectangular. UILabel has shadowColor and shadowOffset properties which you should use instead. You can’t set a separate opacity for the shadow this way, but you can bake it into the UIColor that you pass for the shadow color.
lbl_score.font = myfont;
lbl_score.alpha = 1.0;
lbl_score.textColor = UIColor.greenColor;
lbl_score.shadowColor = [[UIColor blueColor] colorWithAlphaComponent:0.9];
lbl_score.shadowOffset = CGSizeMake(0.0, 0.0);
Unfortunately, you can’t set a shadow radius in this way. If you need to change the radius, look at doing your own custom drawing in -drawRect: instead.
I found code similar to jrturton ,but with more customisation.
This is working for me.
DTGlowingLabel.h
#interface DTGlowingLabel : UILabel {
}
#end
DTGlowingLabel.m
#import "DTGlowingLabel.h"
#implementation DTGlowingLabel
- (void) drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIColor *insideColor = [UIColor colorWithRed:69.0/255.0 green:254.0/255.0 blue:0 alpha:1];
UIColor *outlineColor = [UIColor colorWithRed:22.0/255.0 green:145.0/255.0 blue:0 alpha:0.8];
UIColor *blurColor = [UIColor colorWithRed:104.0/255.0 green: 248.0/255.0 blue:0 alpha:0.7];
CGContextSetStrokeColorWithColor(ctx, outlineColor.CGColor);
CGContextSetFillColorWithColor(ctx, insideColor.CGColor);
CGContextSetLineWidth(ctx, self.font.pointSize/60.0);
CGContextSetShadowWithColor(ctx, CGSizeMake(0, 0), self.font.pointSize / 10.0, blurColor.CGColor);
CGContextSetTextDrawingMode(ctx, kCGTextFillStroke);
[self.text drawInRect:self.bounds withFont:self.font lineBreakMode:self.lineBreakMode alignment:self.textAlignment];
}
#end
Source : http://www.cocoanetics.com/2010/01/uilabels-with-neon-effect/

text with sharp shadow around

I want to achieve the text appearance like in the pictures below:
Now I'm working on shadow around the letters and I can't figure out how to do that.
What I've tried so far:
- The solution with:
label.shadowColor = [UIColor blackColor];
label.shadowOffset = CGSizeMake(1, 2);
gives a nice sharp shadow, but it doesn't fit my needs by two reasons:
It gives a shadow only from one side, set up by shadowOffset, whereas I need a "wrapping" shadow;
This solution doesn't give the soft part of the shadow (gradient) as there is in the pictures;
-The solution with:
label.layer.shadowOffset = CGSizeMake(0, 0);
label.layer.shadowRadius = 5.0;
label.layer.shouldRasterize = YES;
label.layer.shadowOpacity = 1;
label.layer.shadowColor = [UIColor blackColor].CGColor;
label.layer.masksToBounds = NO;
Works great, but it gives too soft shadow even though the shadowOpacity is set to 1 and the shadowColor is set to black:
Obviously it's not enough and I already think about drawing in labels' context. But it is not clear to me how would I achieve the goal even through context drawing.
Any idea would be much appreciated.
Try this
Create a Custom UILabel SubClass and Override the following method
- (void)drawTextInRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetShadow(context, CGSizeMake(0.0, 0.0), 10);
CGContextSetShadowWithColor(context, CGSizeMake(0.0, 0.0), 10, [UIColor blackColor].CGColor);
[super drawTextInRect:rect];
CGContextRestoreGState(context);
}
and this bottomColorLayer to the Label
CALayer *bottomColorLayer = [CALayer layer];
bottomColorLayer.frame = CGRectMake(0, labelRect.size.height/2, labelRect.size.width, labelRect.size.height/2);
bottomColorLayer.backgroundColor = [[UIColor colorWithWhite:0 alpha:.5] CGColor];
[label.layer insertSublayer:bottomColorLayer above:(CALayer *)label.layer];
or If you want Gradient
CAGradientLayer *bottomGradient = [CAGradientLayer layer];
bottomGradient.frame = CGRectMake(0, labelRect.size.height/2, labelRect.size.width, labelRect.size.height/2);
bottomGradient.cornerRadius = 0.0f;
bottomGradient.colors = #[(id)[[UIColor colorWithWhite:1 alpha:.5] CGColor], (id)[[UIColor colorWithWhite:0 alpha:.5] CGColor]];
[label.layer insertSublayer:bottomGradient above:(CALayer *)label.layer];
Use an explicit shadow path that's the shape you want. It sounds like you want a shadow the same shape as your text, but larger, with each shadow-letter centered on its corresponding letter. Once you have that, use the shadow radius to soften the edges of the shadow to whatever degree you want.
The code you have relies on the shadow radius alone to make the shadow larger than the text, which removes your ability to control the softness.
Try with the code below :-
[_testLable setText:#"TION ERRO"];
[_testLable setTextColor:[UIColor whiteColor]];
[_testLable setFont:[UIFont boldSystemFontOfSize:22] ];
_testLable.layer.shadowOffset = CGSizeMake(0, 0);
_testLable.layer.shadowRadius = 10.0;
_testLable.layer.shouldRasterize = YES;
_testLable.layer.shadowOpacity = 1;
_testLable.layer.shadowColor = [UIColor blackColor].CGColor;
_testLable.layer.masksToBounds = NO;
CGPathRef shadowPath = CGPathCreateWithRect(_testLable.bounds, NULL);
_testLable.layer.shadowPath = shadowPath;
CGPathRelease(shadowPath);
Its output is like this:-

can not show the text of uilabel, custom view

Following some instructions at my first post, what I am doing is
1. create a class ( subclass of uiview)
2. fill it with gradient
3. add a uilabel on it
What I am doing is :
1. in xib, i drag and drop uiview onto the screen
2. change to 'customViewBackGround' in 'custom class'
and customViewbackGround looks like below :
-(void) layoutSubviews {
CGFloat height = 20.0;
CGFloat x = 5;
CGFloat y = 3;
CGRect rect = CGRectMake(x, y, self.bounds.size.width - 2 * x, height);
titleLabel.frame = rect;
titleLabel = [[UILabel alloc] init] ;
titleLabel.textAlignment = NSTextAlignmentLeft;
titleLabel.opaque = NO;
titleLabel.backgroundColor = [UIColor clearColor];
titleLabel.font = [UIFont systemFontOfSize:15];
titleLabel.textColor = [UIColor blackColor];
[self addSubview:titleLabel];
}
- (void)drawRect:(CGRect)rect {
titleLabel.text = #"How to redeem your e-gift card online";
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorRef whiteColor = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0].CGColor;
CGColorRef lightGrayColor = [UIColor colorWithRed:230.0/255.0
green:230.0/255.0
blue:230.0/255.0
alpha:1.0].CGColor;
CGColorRef separatorColor = [UIColor colorWithRed:208.0/255.0 green:208.0/255.0 blue:208.0/255.0 alpha:1.0].CGColor;
CGRect paperRect = self.bounds;
// Fill with gradient
drawLinearGradient(context, paperRect, whiteColor, lightGrayColor);
// Add white 1 px stroke
CGRect strokeRect = paperRect;
strokeRect.size.height -= 1;
strokeRect = rectFor1PxStroke(strokeRect);
CGContextSetStrokeColorWithColor(context, whiteColor);
CGContextSetLineWidth(context, 1.0);
CGContextStrokeRect(context, strokeRect);
// Add separator
CGPoint startPoint = CGPointMake(paperRect.origin.x, paperRect.origin.y + paperRect.size.height - 1);
CGPoint endPoint = CGPointMake(paperRect.origin.x + paperRect.size.width - 1, paperRect.origin.y + paperRect.size.height - 1);
draw1PxStroke(context, startPoint, endPoint, separatorColor);
}
However, the text of uilabel is not showing up after all.
Any ideas about this issue.
You can't set the frame of titleLabel before it's been initialized. Swap those two lines:
titleLabel = [[UILabel alloc] init] ;
titleLabel.frame = rect;
In layoutSubviews you are setting the frame on titleLabel before it is created. Set it after creating the label.

Resources