Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

UIView border with fade or blur effect

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:

enter image description here

So you can see what I'm trying to do.

Can anyone help me?

like image 456
iKiR Avatar asked Feb 21 '10 13:02

iKiR


2 Answers

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

like image 120
iKiR Avatar answered Oct 11 '22 21:10

iKiR


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).

  1. Create a new UIView subclass, I'll call it MaskingView
  2. import QuartzCore framework!
  3. Paste the code below in the init. (initWithCoder: and/or initWithFrame: as appropriate)
  4. Add the view that you want to apply the opacity feathering on within the MaskingView. (In Interface Builder, user Editor -> Embed In -> View. Then, choose the class of the new superview as MaskingView)
  5. Give all credit to iKiR, cause I srsly have no idea how the code works, but it simply does work!

NOTES:

  • I am developing a universal app, and the code below works as it is on both devices! (iPhone/iPad)
  • When using Embed In -> UIView, the new view will be a bit bigger than the subview. You have to make it exactly fit the subview. But, before resizing it, make sure you uncheck autoresize subviews.

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;
like image 30
Mazyod Avatar answered Oct 11 '22 19:10

Mazyod