I'm looking for method to add gradually fading or maybe blured border (I don't exactly know how to name this effect) to arbitrary UIView. I don't need animated effect, I need static effect, for example I my UITableView border being partially transparent. I've made the example:
So you can see what I'm trying to do.
Can anyone help me?
I've found a solution - I've useed CALayer's property mask:
CALayer *viewLayer = [back layer];
CALayer* maskCompoudLayer = [CALayer layer];
maskLayer.bounds = viewLayer.bounds;
[maskLayer setPosition:CGPointMake(160, CGRectGetHeight(maskCompoudLayer.frame)/2.0)];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate (NULL, 320, 480, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGFloat colors[] = {
0.5, 0.5, 0.5, 0.0, //BLACK
0.0, 0.0, 0.0, 1.0, //BLACK
};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
CGColorSpaceRelease(colorSpace);
NSUInteger gradientH = 20;
NSUInteger gradientHPos = 0;
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0].CGColor);
CGContextFillRect(context, CGRectMake(0, gradientHPos + gradientH, CGRectGetWidth(maskLayer.frame), CGRectGetHeight(maskLayer.frame)));
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.0].CGColor);
CGContextFillRect(context, CGRectMake(0, 0, 320, gradientHPos));
CGContextDrawLinearGradient(context, gradient, CGPointMake(160, gradientHPos), CGPointMake(160, gradientHPos + gradientH), 0);
CGGradientRelease(gradient);
CGImageRef contextImage = CGBitmapContextCreateImage(context);
CGContextRelease(context);
[maskLayer setContents:(id)contextImage];
CGImageRelease (contextImage);
viewLayer.masksToBounds = YES;
viewLayer.mask = maskCompoudLayer;
Using this code I have UITableView with fading border
I'll say this first, iKiR's answer was more than enough for me. I copied the code as it is, and with little experience from my side, I was able to make it work effortlessly (on a UITableView
).
MaskingView
QuartzCore
framework!initWithCoder:
and/or initWithFrame:
as appropriate)MaskingView
. (In Interface Builder, user Editor -> Embed In -> View. Then, choose the class of the new superview as MaskingView
)NOTES:
The Code:
CALayer *viewLayer = [self layer];
CALayer* maskLayer = [CALayer layer];
maskLayer.bounds = viewLayer.bounds;
[maskLayer setPosition:CGPointMake(CGRectGetWidth(viewLayer.frame)/2.0, CGRectGetHeight(viewLayer.frame)/2.0)];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate (NULL, viewLayer.bounds.size.width, viewLayer.bounds.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGFloat colors[] = {
0.5, 0.5, 0.5, 0.0, //BLACK
0.0, 0.0, 0.0, 1.0, //BLACK
};
CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
CGColorSpaceRelease(colorSpace);
NSUInteger gradientH = 20;
NSUInteger gradientHPos = 0;
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:1.0].CGColor);
CGContextFillRect(context, CGRectMake(0, gradientHPos + gradientH, CGRectGetWidth(maskLayer.frame), CGRectGetHeight(maskLayer.frame)));
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.0].CGColor);
CGContextFillRect(context, CGRectMake(0, 0, 320, gradientHPos));
CGContextDrawLinearGradient(context, gradient, CGPointMake(160, gradientHPos), CGPointMake(160, gradientHPos + gradientH), 0);
CGGradientRelease(gradient);
CGImageRef contextImage = CGBitmapContextCreateImage(context);
CGContextRelease(context);
[maskLayer setContents:(__bridge id)contextImage];
CGImageRelease (contextImage);
viewLayer.masksToBounds = YES;
viewLayer.mask = maskLayer;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With