Oct
19

1

iOS Gradent with Transparency

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.

-(voiddrawGradient:(CGRect)rect
{
    CGFloat maskColors[] 
=
    
{
        0.0f
0.0f0.0f1.0f,
        
1.0f1.0f1.0f1.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(00rect.size.widthrect.size.height);
    
UIGraphicsBeginImageContextWithOptions(rect.sizeNO1.0);
    
CGContextRef context UIGraphicsGetCurrentContext();
    
CGContextSetFillColorWithColor(context[self.color colorWithAlphaComponent:_alpha].CGColor);
    
CGContextFillRectUIGraphicsGetCurrentContext(), frame);
    
CGImageRef colorRef UIGraphicsGetImageFromCurrentImageContext().CGImage;
    
    
// Create an image of a gradient from black to white
    
CGColorSpaceRef rgb CGColorSpaceCreateDeviceRGB();
    
CGGradientRef gradientRef CGGradientCreateWithColorComponents(rgbmaskColorsNULL
                                           
sizeof(maskColors) / (sizeof(maskColors[0]) * 4));
    
CGColorSpaceRelease(rgb);
    
CGContextDrawLinearGradientcontextgradientRefstartPointendPoint
                                                  
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(contextrectCGImageCreateWithMask(colorReftmpMask));
    
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
AlphaGradientViewgradient [[AlphaGradientView alloc] initWithFrame:
                                  
CGRectMake(00self.view.frame.size.width150)];
   
gradient.color [UIColor purpleColor];
[self.view addSubview:gradient]



// RIGHT
AlphaGradientViewgradient [[AlphaGradientView alloc] initWithFrame:
                               
CGRectMake(self.view.frame.size.width 1500150
                                                    
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
AlphaGradientViewgradient [[AlphaGradientView alloc] initWithFrame:
                                   
CGRectMake0250self.view.frame.size.width50)];
    
[self.view addSubview:gradient];

gradient [[AlphaGradientView alloc] initWithFrame:
                               
CGRectMake0200self.view.frame.size.width50)];

gradient.direction GRADIENT_DOWN;
[self.view addSubview:gradient]

Happy Coding!


   


Comments

Thankyou!

Posted by David on Apr 12, 2015

Enter a comment - moderated

Add Comment