Using material icons in Cappuccino

With the help of CSS Theming, you can now easily use Material Icons (Doc from Google) as CPImage.

For example, to add a gear icon (named settings in Material Icons) to a button, simply use :

[theButton setImage:[CPImage imageWithMaterialIconNamed:@"settings" size:CGSizeMake(16,16)]]

This simple method will handle automatically normal and highlighted state of the icon.

Normal state :

Highlighted state :

New CPImage methods

You can use the following new class methods :

+ (CPImage)imageWithMaterialIconNamed:(CPString)iconName size:(CGSize)size

and

+ (CPImage)imageWithMaterialIconNamed:(CPString)iconName size:(CGSize)size color:(CPColor)color

In fact, those 2 methods will return a subclass of CPImage (_CPMaterialIconImage) but don't bother with that, just use them as CPImage.

New CPButtonBar methods

In order to use Material Icons in your CPButtonBar, 2 new convenience methods have been added :

- (id)buttonWithMaterialIconNamed:(CPString)iconName

and

- (id)pulldownButtonWithMaterialIconNamed:(CPString)iconName

They ensure look and feel consistency with CPButtonBar 2.0 (see CPButtonBar 2.0 documentation).

Animating Material Icons images

You can even animate your material icon images using new method :

- (void)addRotationEffectWithAngle:(float)angle

For example, if you want the gear icon to rotate 90 degrees when highlighted, simply use :

image1 = [CPImage imageWithMaterialIconNamed:@"settings" size:CGSizeMake(16,16)];

image2 = [CPImage imageWithMaterialIconNamed:@"settings" size:CGSizeMake(16,16)];

[image1 addRotationEffectWithAngle:0];

[image2 addRotationEffectWithAngle:90];

[aButton setImage:image1];

[aButton setAlternateImage:image2];

Right now, only rotation effect is defined but more may come in the future...

Hovering button image

You can now specify a CPImage that will be used when the user moves its mouse over a button (hovered state).

- (void)setHoveredImage:(CPImage)anImage

If you combine this with previous example, and do :

image1 = [CPImage imageWithMaterialIconNamed:@"settings" size:CGSizeMake(16,16)];

image2 = [CPImage imageWithMaterialIconNamed:@"settings" size:CGSizeMake(16,16)];

[image1 addRotationEffectWithAngle:0];

[image2 addRotationEffectWithAngle:90];

[aButton setImage:image1];

[aButton setAlternateImage:image2];

[aButton setHoveredImage:image2];

you get the following effect :

To be consistent with setImage and setAlternateImage, you can also use - (CPImage)hoveredImage.