 |
 |
You can see examples and more explanation in the Full article… link below.
Developing for iOS has been a blast thus far; its a nice break from Flex and Air. The syntax was a serious hurtle at first but thankfully I am over that now. It is not uncommon for me to receive designs that contain several layers just to pull off a header bar or button skin. That was the case last week when I received a design that had a header bar that was made up of two parts. A background that had an alpha and an additional layer that was an gradient with transparency. I searched far and wide but couldn’t find any iOS examples of gradients with transparency. The lack of examples and my relatively fresh knowledge of Obj-C lead me to creating my own class.
The AlphaGradient class is extended from UIVIew and has a very simple API. Aside from being a UIView, you can set a color and a direction. The color represents the color of your gradient and the direction is which way the gradient goes. The direction points to the side with the alpha of 1.0.
In order to achieve a gradient with transparency it is necessary to create a solid color image and apply an image mask. The AlphaGradient class creates the solid color image and the image mask programatically. These are made by drawing into a context and pulling out the resulting images. The code below is the business end of the AlphaGradient class.
-(void) drawGradient:(CGRect)rect
{
CGFloat maskColors[] =
{
0.0f, 0.0f, 0.0f, 1.0f,
1.0f, 1.0f, 1.0f, 1.0f,
};
// Set up the start and end points for the gradient
[self calculateStartAndEndPoints];
// Create an image of a solid slab in the desired color
CGRect frame = CGRectMake(0, 0, rect.size.width, rect.size.height);
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 1.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [self.color colorWithAlphaComponent:_alpha].CGColor);
CGContextFillRect( UIGraphicsGetCurrentContext(), frame);
CGImageRef colorRef = UIGraphicsGetImageFromCurrentImageContext().CGImage;
// Create an image of a gradient from black to white
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradientRef = CGGradientCreateWithColorComponents(rgb, maskColors, NULL,
sizeof(maskColors) / (sizeof(maskColors[0]) * 4));
CGColorSpaceRelease(rgb);
CGContextDrawLinearGradient( context, gradientRef, startPoint, endPoint,
kCGGradientDrawsBeforeStartLocation |
kCGGradientDrawsAfterEndLocation);
CGImageRef maskRef = UIGraphicsGetImageFromCurrentImageContext().CGImage;
UIGraphicsEndImageContext();
// Blend the solid image and the gradient to produce the final gradient.
CGImageRef tmpMask = CGImageMaskCreate(
CGImageGetWidth(maskRef),
CGImageGetHeight(maskRef),
CGImageGetBitsPerComponent(maskRef),
CGImageGetBitsPerPixel(maskRef),
CGImageGetBytesPerRow(maskRef),
CGImageGetDataProvider(maskRef),
NULL,
false);
// Draw the resulting mask.
context = UIGraphicsGetCurrentContext();
CGContextDrawImage(context, rect, CGImageCreateWithMask(colorRef, tmpMask));
UIGraphicsEndImageContext();
}
Since the AlphaGradient is simply a visual treatment, the user interaction has been turned off. By default the gradient is black and has the direction of GRADIENT_UP. This default configuration has been chosen it behaves like a drop shadow without extra input. The class supports GRADIENT_UP, GRADIENT_DOWN, GRADIENT_LEFT and GRADIENT_RIGHT.
In order to use the AlphaGradient you simply declare and instance, set its frame and optionally set its color and direction. Below are some usage examples to get you on your way:
//TOP
AlphaGradientView* gradient = [[AlphaGradientView alloc] initWithFrame:
CGRectMake(0, 0, self.view.frame.size.width, 150)];
gradient.color = [UIColor purpleColor];
[self.view addSubview:gradient];
// RIGHT
AlphaGradientView* gradient = [[AlphaGradientView alloc] initWithFrame:
CGRectMake(self.view.frame.size.width - 150, 0, 150,
self.view.frame.size.height)];
gradient.color = [UIColor yellowColor];
gradient.direction = GRADIENT_RIGHT;
[self.view addSubview:gradient];
The next sample is super fancy and uses two gradients back to back:
// TWO
AlphaGradientView* gradient = [[AlphaGradientView alloc] initWithFrame:
CGRectMake( 0, 250, self.view.frame.size.width, 50)];
[self.view addSubview:gradient];
gradient = [[AlphaGradientView alloc] initWithFrame:
CGRectMake( 0, 200, self.view.frame.size.width, 50)];
gradient.direction = GRADIENT_DOWN;
[self.view addSubview:gradient];
Happy Coding!
]]>
Everybody has ideas and everybody has a side project. Anyone can tell you their idea, most people can start a project, but its the smaller group who actually finish what they started. This is the group who’s work I appreciate and who I strive to be a part of. Over the course of my life I keep finding that the last 10% of a project is ALWAYS the hardest. Its that last bit of polish and love that is the most tedious. A wise man once told me that you should never talk about a project you are going to build. The mere act of talking about it is creatively rewarding enough to prevent you from starting it. I find that when thinking of projects, I focus on one key portion of the project and loose track of the big picture. Once that key component is complete, my creative mind is onto the next project. The problem is, that the original project is not finished. If you were to put an engine in a frame, sure it’s a car, but it’s not a car you want to drive in the rain and therefore not finished. Using my current project I can illustrate how much of the actual work lies outside the initial core concept.
