An iOS UIImage category, UIImageView subclass and UIButton subclass that apply colour to greyscale, icon-style images, preserving any transparency that already exists.

What it Depends on

RCRColorizedIconImage has been verified as working with Xcode 6.1 and iOS 8.1.

All code uses ARC.

How to Use it

First, add the RCRColorizedIconImage folder and code to your project. You can then make use of the UIImage category, the UIImageView subclass, and the UIButton subclass as discussed in the following sections.

UIImage Category

The RCRColorizedIconImage category on UIImage provides a variety of methods for applying colour to images.

In order to use the category, you’ll need the following import:

#import "UIImage+RCRColorizedIconImage.h"

There are then a few options for applying colour to images. For example, to create a red coloured version of an image named ‘Sample’ you would do the following:

UIImage *redImage = [UIImage colorizedImageNamed:@"Sample" color:[UIColor redColor]];

To obtain a green coloured version of an existing UIImage, you could use the following code:

// ‘existingImage’ is a UIImage that we’re already using
UIImage *greenImage = [existingImage colorizedVersionWithColor:[UIColor greenColor]];

Please refer to the sample project and API documentation for further information.

UIImageView Subclass

The UIImageView subclass is primarily intended for use as a convenient way of applying colour to images within Interface Builder.

Simply drag a regular image view out into your view. Then, using the Identity Inspector, set its class to be RCRColorizedIconImageView. You can now apply colour to the image using the colour picker that can be found in the ‘Colorized Icon Image Button’ section of the Attributes Inspector.

Note that if you have an outlet referencing the image view, you can programmatically change the color property at any time, with the image being updated accordingly.

Examples of using the image view with Interface Builder can be found in the sample project.

UIButton Subclass

Use in Interface Builder

The simplest way to use RCRColorizedIconImageButton is with Interface Builder.

First, drag a regular button out into your view. Then, using the Identity Inspector, set the button’s class to be RCRColorizedIconImageButton. Next, using the Attributes Inspector, change the type of the button to be ‘Custom’.

We’re now ready to configure the look of the button - but before we do, there are a couple of important things to be aware of.

Firstly, RCRColorizedIconImageButton works with the button’s ‘normal’ control state. In Interface Builder this is represented by the ‘Default’ value of the State Config attribute, so please ensure this value is selected before proceeding. In order to have the button appear as you would typically want it to when its tapped and disabled, it’s recommended that you leave the ‘Highlighted Adjusts Image’ and ‘Disabled Adjusts Image’ attributes ticked (as they are by default).

Secondly, RCRColorizedIconImageButton is intended to be used with the button’s main image (not the background image) - so be sure to use the correct attribute when specifying a filename.

With these points in mind, you can now set the button’s image using the Attributes Inspector.

The only thing left to do now is specify the colour to apply to the image. This is done using the colour picker that can be found in the ‘Colorized Icon Image Button’ section of the Attributes Inspector. Pick a colour using the standard interface and you’re done!

An example of using the button with Interface Builder can be found in the sample project.

Programmatic Use

Should you wish to create buttons programmatically, outside of Interface Builder, the process is essentially the same as working with a regular UIButton.

First, you’ll need an import:

#import "RCRColorizedIconImageButton.h"

Next, create a new RCRColorizedIconImageButton instance and set its image. Again, note that RCRColorizedIconImageButton is intended to be used with the button’s main image only (and not the background image) and also that only UIControlStateNormal is catered for. As such, it is recommended that the UIButton properties adjustsImageWhenDisabled and adjustsImageWhenHighlighted are left set to their default values of YES.

Finally, the only additional step that’s needed is to set the button’s color property.

The following code shows one example of using a red colorized button from within a view controller.

RCRColorizedIconImageButton *button = [[RCRColorizedIconImageButton alloc] initWithFrame:CGRectMake(50.0f, 50.0f, 80.0f, 38.f)];
[button setImage:[UIImage imageNamed:@"Sample"] forState:UIControlStateNormal];
button.color = [UIColor redColor]; // Colorize the button
[self.view addSubview:button];

(This code assumes that a suitable image named ‘Sample‘ is available to your project.)

As with the image view, the button’s color property can be changed at any time, with the image being updated accordingly.

Sample Project

A sample project illustrating examples of image views and buttons can be found in the RCRColorizedIconImageSample folder.

API Docs

The latest API documentation can be found on CocoaDocs.

License

MIT License (see LICENSE in the root of the repository).