#Introduction
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.
#Examples
###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.
#How to install
###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
#Creating image masks
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.
#Scalable icons with PDFs
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.
#Contributing
Forks, patches, and other suggestions are always welcome and addressed as quickly as possible. Here's a quick guide to the process.