kokomo / moomaskediconview Goto Github PK

MOOMaskedIconView is a UIView subclass that uses black-and-white masks to draw icons of different styles at any size or resolution. It's like Photoshop layer styles, using the same technique as UITabBar to generate various effects from a single icon mask.

MOOMaskedIconView displays common image formats and PDFs, the native vector file format of iOS and OS X. PDFs are best—they're easy to maintain and resolution independent.

###Create a green icon from a PNG

MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithResourceNamed:@"icon.png"]
iconView.color = [UIColor greenColor];
[self.view addSubview:iconView];

###Resize a PDF icon and add a reusable gradient trait

MOOStyleTrait *grayGradientTrait = [MOOStyleTrait trait];
grayGradientTrait.gradientColors = [NSArray arrayWithObjects:[UIColor colorWithWhite:0.7f alpha:1.0f],
                                                             [UIColor colorWithWhite:0.5f alpha:1.0f], nil];

MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithPDFNamed:@"icon.pdf" size:CGSizeMake(32.0f, 26.0f)];
[iconView mixInTrait:grayGradientTrait];
[self.view addSubview:iconView];

###Add an overlay and a shadow to a red icon

UIImage *overlay = [UIImage imageNamed:@"overlay.png"];
MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithImageNamed:@"icon.png"];
iconView.color = [UIColor redColor];
iconView.overlay = overlay;
iconView.shadowColor = [UIColor darkGrayColor];
iconView.shadowOffset = CGSizeMake(3.0f, 3.0f);
[self.view addSubview:iconView];

###Render a PDF icon into a UIButton

MOOMaskedIconView *iconView = [MOOMaskedIconView iconWithResourceNamed:@"icon.pdf"];
iconView.color = [UIColor magentaColor];
iconView.highlightedColor = [UIColor orangeColor];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[iconView renderImage] forState:UIControlStateNormal]
[button setImage:[iconView renderHighlightedImage] forState:UIControlStateHighlighted];
[self.view addSubview:button];

For more examples, check out the Demo Project.

For the full list of styleable properties, see MOOMaskedIconViewStyles.

For information on reusable styles, caching, and other advanced topics, see Advanced Use.

###First: Clone into a submodule

In your project's folder, type:

git submodule add git://github.com/peyton/MOOMaskedIconView.git

A submodule allows your repository to contain a clone of an external project. If you don't want a submodule, use:

git clone git://github.com/peyton/MOOMaskedIconView.git

###Next: Add classes

Drag MOOMaskedIconView/ into your Xcode project's file browser.

Note: An options dialog will pop up. If you're using MOOMaskedIconView as a submodule, you should uncheck "Copy items into destination group's folder (if needed)."

###Then: Add Accelerate.framework

With your application's target selected in the navigator, click on the "Build Phases" tab. Under "Link Binary With Libraries," click the "+" button and add Accelerate.framework.

###Finally: Import the header

#import "MOOMaskedIconView.h"

###Later: Update to the latest version

cd into the MOOMaskedIconView directory and run:

git pull

An image mask is a black-and-white image that clips drawing. Quartz clipping follows three simple rules:

• Black pixels render opaquely.
• White pixels render transparently.
• Gray pixels render with an alpha value of 1 - source pixel's gray value.

Mask images may not use an alpha channel, so icons with transparency must be set on a white background. For more information about Quartz image masking, see the Quartz 2D Programming Guide.

MOOMaskedIconView makes it easy to use PDFs as icons, eliminating "*@2x.*" files. Many Apple applications on OS X use PDF icons for resolution independence.

Next to the network, the biggest source of latency on an iPhone is the disk. For small, simple icons the PDF format adds a few KB of overhead over PNG. Because the iPhone loads data in chunks, in practice the difference in loading time is nothing. For larger icons a PDF of vectors can save space.

Some editors need a little massaging to export PDFs suitable for iOS icons. How-to instructions are here.

Forks, patches, and other suggestions are always welcome and addressed as quickly as possible. Here's a quick guide to the process.