Question

I am trying to achieve this glowing effect for a UILabel as shown below :

I have subclassed UILabel , and created a custom label class that adds an outer shadow.

Edit : Here’s the code i have used for outer shadow/glow in my custom Label class :

- (void)drawTextInRect:(CGRect)rect {
UIColor *insideColor;
UIColor *blurColor;
CGContextRef ctx = UIGraphicsGetCurrentContext();

insideColor =[UIColor colorWithRed:255/255.0 green:255/255.0 blue:191/255.0 alpha:1];
blurColor =[UIColor orangeColor];    


    CGContextSetFillColorWithColor(ctx, insideColor.CGColor);
    CGContextSetShadowWithColor(ctx, CGSizeMake(0, 0), self.glowAmount, blurColor.CGColor);
    CGContextSetTextDrawingMode(ctx, kCGTextFillStroke);

    [self.text drawInRect:self.bounds withFont:self.font lineBreakMode:self.lineBreakMode alignment:self.textAlignment];
}

But this gives me the following result

As you can see this lacks the desired effect because of the missing inner shadow. Can anyone suggest how to achieve this?

Thanks!

Answer 1

I referred the answer by Steven XM for Inner Shadow in UILabel . It was a great help.

Here’s what i have done to achieve the result but i want to know if this can be more optimized?

-(void)setInnerGlowWithColor:(UIColor *)shadowColor fillColor:(UIColor *)insideColor inRect:(CGRect)rect 
{

    UIFont *font = self.font;
   // UIFont *font = [UIFont fontWithName:@"HelveticaNeue-Bold" size:17];
    CGSize fontSize = [self.text sizeWithFont:font];


    /****    Following are the steps to create an inside shadow ****/

    // STEP 1 :  Create a  image mask of your text.

        CGImageRef mask = [self createMaskWithSize:rect.size shape:^{
        [[UIColor blackColor] setFill];
        CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
        [[UIColor whiteColor] setFill];
        // custom shape goes here
        [self.text drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), 0) withFont:font];
        }];


    // STEP 2 : Invert that mask.

        CGImageRef cutoutRef = CGImageCreateWithMask([self blackSquareOfSize:rect.size].CGImage, mask);
        CGImageRelease(mask);

        UIImage *cutout = [UIImage imageWithCGImage:cutoutRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];
        CGImageRelease(cutoutRef);  



     // STEP 3 : Use this inverted mask to draw a shadow around the inside edges of the text.

        CGImageRef shadedMask = [self createMaskWithSize:rect.size shape:^{
        [[UIColor whiteColor] setFill];
        CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
        //****************For inner shadow/glow
        NSLog(@"in custom label---->  %f",self.glowAmount);
        CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(0, 0), self.glowAmount, shadowColor.CGColor);
        [cutout drawAtPoint:CGPointZero];
        }];


    // STEP 4 : Create negative image

        UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0);
        [shadowColor setFill];
        // custom shape goes here
        [self.text drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), 0) withFont:font];
        UIImage *negative = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext(); 


    // STEP 5 : Create the shadow image

        CGImageRef innerShadowRef = CGImageCreateWithMask(negative.CGImage, shadedMask);
        CGImageRelease(shadedMask);
        UIImage *innerShadow = [UIImage imageWithCGImage:innerShadowRef scale:[[UIScreen mainScreen] scale] orientation:UIImageOrientationUp];
        CGImageRelease(innerShadowRef);


    // STEP 6 : Draw actual text

        [insideColor setFill];
        [self.text drawAtPoint:CGPointMake((self.bounds.size.width/2)-(fontSize.width/2), 0) withFont:font];  


    // STEP 7 : Finally apply the shadow image   

        [innerShadow drawAtPoint:CGPointZero];

}


- (UIImage*)blackSquareOfSize:(CGSize)size {
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);  
    [[UIColor blackColor] setFill];
    CGContextFillRect(UIGraphicsGetCurrentContext(), CGRectMake(0, 0, size.width, size.height));
    UIImage *blackSquare = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return blackSquare;
}


- (CGImageRef)createMaskWithSize:(CGSize)size shape:(void (^)(void))block {
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);  
    block();
    CGImageRef shape = [UIGraphicsGetImageFromCurrentImageContext() CGImage];
    UIGraphicsEndImageContext();  
    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(shape),
                                        CGImageGetHeight(shape),
                                        CGImageGetBitsPerComponent(shape),
                                        CGImageGetBitsPerPixel(shape),
                                        CGImageGetBytesPerRow(shape),
                                        CGImageGetDataProvider(shape), NULL, false);
    return mask;
}