11

For example, in the iOS toolbar, you drag in your own .png which is opaque black and transparent, and it automatically adds the iOS blue gloss.

However, I'd like to know how to do this yourself, but just solid colors will do.

For example, if you had this image: Example

What would you do to make that entire solid, pink, or blue, or grey? I want to cut down on the number of versions of .png's I save in my app by colorizing them with code.

Thank you!

Qiming
  • 1,664
  • 1
  • 14
  • 18
  • possible duplicate of [How to recolor an image using CoreGraphics?](http://stackoverflow.com/questions/9225834/how-to-recolor-an-image-using-coregraphics) – CodaFi Aug 18 '12 at 03:32
  • imo you should just color graphic before runtime as much as possible. It is inefficient to programmatically color PNGs since you will use just as much processing power to read a fully colored PNG as you will to read a PNG with alpha=0 regions. – James Aug 18 '12 at 03:54
  • @CodaFi, my apologies, my research didn't bring me to that I guess. The answer also isn't fully what I'm looking for. I don't understand how that code works or how it incorporates back to a UIImage or where to insert the image into the context. – Qiming Aug 18 '12 at 14:53
  • @James, oh, I see, but wouldn't having the same image in different colors add to your application size? Say you had 20 icons you wanted in 5 or 6 colours depending on which part of the application they appear in... – Qiming Aug 18 '12 at 14:54
  • In that case go with @David H's answer. But if you have a set selection of colors you wish to use, and you're really worried about the download size, just create all the images once and save them to your docs directory. – James Aug 18 '12 at 15:57
  • @James I see, thanks. I didn't know abou the documents directory method. That's actually an interesting workaround to the download size. But wouldn't you have to download those documents at some point? If you don't include it in the App Store app, where will the user get them? – Qiming Aug 21 '12 at 01:42
  • Oh never mind, do you mean to generate the images once by code and then save them? That makes more sense now. My bad. – Qiming Aug 21 '12 at 01:43

2 Answers2

15

This should do it for you:

- (UIImage *)colorImage:(UIImage *)origImage withColor:(UIColor *)color
{
    UIGraphicsBeginImageContextWithOptions(origImage.size, YES, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, (CGRect){ {0,0}, origImage.size} );

    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, origImage.size.height);
    CGContextConcatCTM(context, flipVertical);
    CGContextDrawImage(context, (CGRect){ pt, origImage.size }, [origImage CGImage]);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}
David H
  • 40,852
  • 12
  • 92
  • 138
  • 1
    Hey, thank you, I was wondering what "pt" in the line "CGContextDrawImage(context, (CGRect){ pt, origImage.size }, [origImage CGImage]);" was. It seems to be an undeclared variable? Thanks for your help though. – Qiming Aug 21 '12 at 01:41
  • pt is the CGPoint that you want as the origin of your image, if the image is not the exact size of the new image. If the sizes are exact it will be {0,0}. And thank you for the thanks! You're most welcome! – David H Aug 21 '12 at 01:43
  • Is there an easy way to change this to achieve the opposite effect? i.e. changing the color of the non-transparent part. – Leah Sapan Jul 10 '15 at 00:35
  • @LukeSapan I suggest you post your own question, link back to this one, and I'm sure you'll get an answer almost immediately. Make sure to say if you are using iOS7, 8, or 9 and there are new APIs added to newer releases (my answer is almost 3 years old now!) Also, specifically what you want. That is, if your icon is gray scale or color. In fact, see the other answer - it has some ideas for you. – David H Jul 10 '15 at 12:46
1

As of iOS 7 you can now colour black (greyscale) / transparent images with a single colour like so

UIImage *image = [UIImage imageNamed:@"myImage.png"];
UIImageView *imageView = [[UIImageView alloc]initWithImage:[image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]];
imageView.tintColor = [UIColor redColor];
Magoo
  • 2,552
  • 1
  • 23
  • 43