Search code examples
iosiphoneuiimageview

How to write text on image in Objective-C (iOS)?


I want to make an image like this programmatically:

example

I have the upper image and text with me. Should I write text on the image?

I want to make it a complete .png image(image + label) and set it as the background of the button.


Solution

  • Draw text inside an image and return the resulting image:

    +(UIImage*) drawText:(NSString*) text 
                 inImage:(UIImage*)  image 
                 atPoint:(CGPoint)   point 
    {
    
        UIFont *font = [UIFont boldSystemFontOfSize:12];
        UIGraphicsBeginImageContext(image.size);
        [image drawInRect:CGRectMake(0,0,image.size.width,image.size.height)];
        CGRect rect = CGRectMake(point.x, point.y, image.size.width, image.size.height);
        [[UIColor whiteColor] set];
        [text drawInRect:CGRectIntegral(rect) withFont:font]; 
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        return newImage;
    }
    

    Usage:

    // note: replace "ImageUtils" with the class where you pasted the method above
    UIImage *img = [ImageUtils drawText:@"Some text"
                                inImage:img 
                                atPoint:CGPointMake(0, 0)];
    

    Change the origin of the text inside the image from 0,0 to whatever point you like.

    To paint a rectangle of solid color behind the text, add the following before the line [[UIColor whiteColor] set];:

    [[UIColor brownColor] set];
    CGContextFillRect(UIGraphicsGetCurrentContext(), 
                      CGRectMake(0, (image.size.height-[text sizeWithFont:font].height), 
                                      image.size.width, image.size.height));
    

    I'm using the text size to calculate the origin for the solid color rectangle, but you can replace it with any number.